Published
Edited
Feb 14, 2021
Fork of Dotwork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
bnb({
numFrames: 5 * 60,
fps: 30,
w: numTiles * tileSize,
h: numTiles * tileSize,
record,
globals: {
textCharWidth: null,
},
setup(sketch, globals) {
sketch.textSize(tileSize / 3);
let testStr = '0';
let goalWidth = tileSize - margin * 4;
while (true) {
if (sketch.textWidth(testStr) < goalWidth) {
testStr = `${testStr}0`;
} else {
break;
}
}
globals.textCharWidth = testStr.length;
sketch.colorMode(sketch.HSB, 1, 1, 1, 1);
},
draw(sketch, time, globals) {
sketch.background("black");
let tmap = (a, b=null) => {
if (b === null) {
b = a;
a = 0;
}
return sketch.map(time, 0, 1, a, b);
}
let tr = (x, y) => (x%3) + (y%5);
let min = Infinity;
let max = -Infinity;
for (let x = 0; x < numTiles; x++) {
for (let y = 0; y < numTiles; y++) {
let v = tr(x, y);
if (v < min) { min = v }
if (v > max) { max = v }
}
}
for (let x = 0; x < numTiles; x++) {
for (let y = 0; y < numTiles; y++) {
sketch.push();
let a = sketch.map(tr(x, y), min, max, 0, TAU) + time * TAU;
let scaler = (Math.sin(a) + 1) / 2;
let c = [
sketch.map(tsin(time + x/numTiles + y/numTiles), -1, 1, minHue, maxHue + 0.1),
sketch.map(tsin(time + x / numTiles + y / numTiles), -1, 1, 0.4, 0.9),
sketch.map(tsin(time + (x / numTiles) * (y / numTiles)), -1, 1, 0.6, 0.9),
sketch.map(scaler, 0, 1, 0.5, 1.0),
];
sketch.translate(tileSize * x, tileSize * y);
sketch.rotate(time * TAU + x*x + y);
let localMargin = margin * sketch.map(scaler, 0, 1, 1, 5);
sketch.stroke(c);
sketch.noFill();
sketch.rect(localMargin, localMargin, tileSize - localMargin * 2, tileSize - localMargin * 2);
localMargin *= 2;
c[3] /= 2;
sketch.fill(c);
sketch.noStroke();
sketch.rect(localMargin, localMargin, tileSize - localMargin * 2, tileSize - localMargin * 2);

if (showNumbers) {
let t = (localMargin).toString(36).slice(2, 2+globals.textCharWidth);
while (t.length < globals.textCharWidth) {
t = `${t}0`;
}
sketch.text(t, margin, localMargin-sketch.textSize());
}
sketch.pop();
}
}
if (debug) {
sketch.fill("red");
sketch.noStroke();
sketch.circle(tmap(sketch.width), 10, 5);
}
}
})
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