Public
Edited
Oct 27, 2022
2 forks
2 stars
Insert cell
Insert cell
Insert cell
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
let x, y, w, h;
let n = form.num;
let t = 1;
let marg = form.xmargin;
let diff = WIDTH / n - marg;
for (let j = 0; j < n; j++) {
for (let k = 0; k < n; k++) {
t = parseInt(Math.random() * 4);
x = j * diff + marg;
y = k * diff + marg;
w = (j + 1) * diff;
h = (k + 1) * diff;
switch (t) {
case 0:
rect_wiggle_x_lines(ctx, x, y, w, h);
break;
case 1:
rect_wiggle_lines(ctx, x, y, w, h);
break;
case 2:
rect_lines(ctx, x, y, w, h);
break;
case 3:
rect_backforth_lines(ctx, x, y, w, h);
break;
case 4:
rect_noise(ctx, x, y, w, h);
break;
}
}
}
return canvas;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
rect_noise = (ctx, x, y, w, h) => {
for (let i = 0; i < 10000; i++) {
if (Math.random() < 0.2) {
ctx.fillRect(x + Math.random() * w, y + Math.random() * h, 1, 1);
}
}
}
Insert cell
Insert cell
HEIGHT = 1000
Insert cell
WIDTH = 1000
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