viewof method = Inputs.select(['Brightness', 'Hue', 'Saturation'], {value: "Brightness", label: "Method"})
notes = {
let ns = [];
for (let i=0; i<pixel_colors.length; i++) {
ns.push(get_note(pixel_colors[i], pixel_hsls[i]));
}
return ns;
}
test = function(a) {
return a*2;
}
get_note = function(pixel_color, pixel_hsl) {
if (method=='Brightness') {
let brightness = pixel_color.r+pixel_color.g+pixel_color.b;
return c_scale[Math.floor((c_scale.length-1)*brightness/(255*3))];
} else if (method == 'Hue') {
let hue = pixel_hsl.h;
return c_scale[Math.floor((c_scale.length-1)*hue/(360))];
} else if (method == 'Saturation') {
let sat = pixel_hsl.s;
return c_scale[Math.floor((c_scale.length-1)*sat)];
}
}
pixel_hsls = {
let pix_hsls = []
for (let pixel_color of pixel_colors) {
pix_hsls.push(d3.hsl(pixel_color));
}
return pix_hsls;
}
pixel_colors = {
let pix_colors = []
for (let pixel_index of pixel_indices) {
let [r, g, b, a] = imd.data.slice(pixel_index*4, pixel_index*4+4);
pix_colors.push(d3.rgb(r, g, b, a));
}
return pix_colors
}
pixel_indices = {
let pis = [];
let [center_column, center_row] = [Math.floor(img.width/2), Math.floor(img.height/2)];
let beat_counter = beat % Math.floor(img.height/2);
console.log([center_column, center_row]);
const pix_ind = (row, column) => row*img.width+column;
for (let i=0; i<4; i++) {
let r = center_row + ((Math.floor(i/2)-0.5)*2)*beat_counter;
let c = center_column + (((i%2)-0.5)*2)*beat_counter;
pis.push(pix_ind(r, c));
}
return pis;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
