Snakes on a Cartesian Plane 🐍Leave it to Weaver 🧺Imitation Game 🖐Hive of Mirrors 🐝Ski Free ⛷Analog Circuit 🔋Joy of Scribbles 🌀 (Recreating Bob Ross Paintings with 12 colors of bezier curves)Squares from Circles 🔄 An Alternative Educational Viz for Fourier SeriesDepth First Forest 🏞Create Your Own Weather-Data-Driven-ArtThe Same, but Different 🌡 Combining Timeseries Data with the Traveling Salesman Problem for an Art PieceAlien Language 👽 Using Digital Communication Theory to Invent a Robust Alphabet of SymbolsEmojification 🙂 Convert Images to hundreds of emojis to impress your friends on twitter and slackDonuts on a Stick 🍩Oh, the Places You'll Go ⓄDragon Displayer 🐉An Anxiexty-Inducing Rug 🔀Dithering to overcome Noise 🇺🇸Strings of Pearls 🎷Dithering on Non-Square PixelsVisualizing Jacob Collier's "Moon River"
Joy of Subdividing Paintings 🎨
Matrix_stddev = {
var width = w
var height = h
var context = DOM.context2d(width, height, 1);
context.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
var {data: rgba} = context.getImageData(0, 0, width, height);
var data = new Float64Array(width * height);
// Create L*a*b* Matrix
var Matrix_L = [];
var Matrix_A = [];
var Matrix_B = [];
for (var rr=0; rr<height; rr++){
var Row_L = [];
var Row_A = [];
var Row_B = [];
for (var cc=0; cc<width; cc++){
var indx = (rr*width+cc)*4;
var p_rgb = d3.rgb(rgba[indx+0], rgba[indx+1], rgba[indx+2]);
var p_lab = d3.lab(p_rgb);
Row_L.push(p_lab.l);
Row_A.push(p_lab.a);
Row_B.push(p_lab.b);
}
Matrix_L.push(Row_L);
Matrix_A.push(Row_A);
Matrix_B.push(Row_B);
}
// Compute stddev per pixel
var Matrix_S = [];
for (var rr=0; rr<height; rr++){
var Row_S = [];
for (var cc=0; cc<width; cc++){
var rowIndxVec = d3.range(rr-NeighborhoodRadius, rr+NeighborhoodRadius+1)
.map(x => Math.max(Math.min(x,height-1),0));
var colIndxVec = d3.range(cc-NeighborhoodRadius, cc+NeighborhoodRadius+1)
.map(x => Math.max(Math.min(x,width-1),0));
// ITERATE thru all those ^ and collect LAB values
var neighborhood_L = [];
var neighborhood_A = [];
var neighborhood_B = [];
for (var r_ of rowIndxVec){
for (var c_ of colIndxVec){
neighborhood_L.push(Matrix_L[r_][c_])
neighborhood_A.push(Matrix_A[r_][c_])
neighborhood_B.push(Matrix_B[r_][c_])
}
}
// take STD DEV of each collection
var stddev_L = d3.deviation(neighborhood_L);
var stddev_A = d3.deviation(neighborhood_A);
var stddev_B = d3.deviation(neighborhood_B);
// aggregate to one single metric
Row_S.push(d3.mean([stddev_L, stddev_A, stddev_B]))
}
Matrix_S.push(Row_S);
}
//imshow(context, Matrix_S, width, height, 'id')
//return context.canvas;
return Matrix_S;
}
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.
