The avatar for @mattdzugan
Matt Dzugan
Published
Edited
Feb 1, 2021
1 fork
62 stars
2
Genuary 2021
Snakes on a Cartesian Plane 🐍Leave it to Weaver 🧺Imitation Game 🖐Hive of Mirrors 🐝Ski Free ⛷Joy of Subdividing Paintings 🎨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 Pixels
Visualizing Jacob Collier's "Moon River"
Also listed in…
Tilings
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const canvas = DOM.canvas(width, height);
var context = canvas.getContext("2d");
context.lineWidth = 2;
for (var poly of polys){
context.fillStyle = gradientscale(poly.centroid.y / height)//COLS[poly.colorid];
context.strokeStyle = "#eef4ed"
context.beginPath();
var iii = 0;
for( let P of poly.polygon ) {
if(iii==0){
context.moveTo( P.x, P.y );
}else{
context.lineTo( P.x, P.y );
}
iii++;
}
var P0 = poly.polygon[0];
context.lineTo( P0.x, P0.y );
context.fill();
context.stroke();
const centroid = poly.centroid
context.fillStyle = "#eef4ed"
context.beginPath();
context.arc(centroid.x, centroid.y, 2, 0, 2 * Math.PI);
context.fill();
}
// shrink this a bit so it doesn't hog the whole page...
// after all, it's not the star of the show
const shrink = 0.4;
const canvas_small = DOM.canvas(width*shrink, height*shrink);
var context_small = canvas_small.getContext("2d");
context_small.drawImage(canvas, 0, 0, width*shrink, height*shrink);

return canvas_small
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more