Web developer and autodidact with an interest in creative coding.
Random TilesLots of DotsPlots, Disassemble!Endless ProgressColonyWhat Goes Up ...VinesContractions 3ContractionsContractions 2ExtrusionPressurePulseEmbedding a canvas into an SVGSand SimTangent: DropsTangent: GlitchFPS Downsampling with CAValking WoronoiSeven, Eight, FourteenSix, Seven, EightDelaunator ShardsArc FlipSizzle 2SizzleDecimals 4ShimmyTwirlin' 2Twirlin'canvas-fly-flightCollider SparksSimplex Noise 2Simplex NoiseGhost LettersCloudy FillCircle SegmentsFlippin' ThalesAttractionCircumscribed SquaresHexagon 3Feedback FadeRectangle Curve 3Bulge IllusionGetting Artsy With LloydRectangle Curve 2Per-Layer Fadeout In 2D CanvasVoronoi BorderlandsTriangles And CirclesSplitting LinesStacking Polygons In A CircleHello QBasic-ish!Decimals 2DecimalsGlitchConnections 1Connections 2Rectangle Curve
Decimals 3
{
const dividend = n;
// Maximum by spec is 20, but browsers may support higher values.
const wScale = 2;
const h = 80;
const w = steps * wScale;
const c = DOM.context2d(w, h, 1);
c.canvas.style.maxWidth = '100%';
c.fillStyle = `#fff`;
c.fillRect(0,0,w,h);
for(let x = 0; x < steps; x++) {
const digits = (n/(x+1)).toFixed(Math.min(100,decimals)).split('.').pop().split('');
const a = avg(digits) / 9;
c.fillStyle = `hsl(0,0%,${(1-a)*100|0}%)`;
c.fillRect(x * wScale, h - h * a, wScale, h);
}
return c.canvas;
function avg(arr) {
return sum(arr) / arr.length;
}
function sum(arr) {
let s = 0;
for(let v of arr) s += +v;
return 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.
