dyads by infinite digits

https://dyads.infinitedigits.co
https://editor.p5js.org/
let points = [];
let t = 0;
let gravityStrength = -0.3;
let center;
function setup() {
createCanvas(1800, 1800, P2D);
pixelDensity(displayDensity());
center = createVector(width / 2, height / 2);
noFill();
let gridSize = 3;
let padL = 120, padR = 200, padT = 220, padB = 150;
let availableW = width - padL - padR;
let availableH = height - padT - padB;
let cellW = availableW / gridSize;
let cellH = availableH / gridSize;
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
let cx = padL + cellW * (col + 0.5);
let cy = padT + cellH * (row + 0.5);
let w = cellW * random(0.6, 0.7);
let h = cellH * random(0.6, 0.7);
let depth = random(0.25, 0.4);
let seed = int(random(1000));
let boxPts = createBox(cx, cy, w, h, depth, seed);
boxPts = smoothPoints(boxPts);
points = points.concat(boxPts);
}
}
}
function draw() {
background('#ffefbc');
for (let p of points) {
let dir = p5.Vector.sub(center, p);
let dist = dir.mag();
dir.normalize();
p.add(dir.mult(gravityStrength / (dist * 0.01 + 1)));
}
drawEcho(0, 7.2, 3.0);
drawEcho(1, 3.0, 2.5);
drawEcho(2, 1.6, 2.0);
drawEcho(3, 1.0, 1.4);
drawEcho(4, 0.7, 1.0);
drawEcho(5, 0.5, 0.6);
drawEcho(6, 0.35, 0.4);
if (t < points.length) t += 1.5;
else noLoop();
}
function drawEcho(layer, weight, jitterScale) {
stroke('#5D2E2E');
strokeWeight(weight);
beginShape();
for (let i = 0; i < t && i < points.length; i++) {
let p = points[i];
let jx = randomGaussian(0, jitterScale);
let jy = randomGaussian(0, jitterScale);
curveVertex(p.x + jx, p.y + jy);
}
endShape();
}
function createBox(cx, cy, w, h, depthFactor, seed) {
randomSeed(seed);
let d = w * depthFactor;
let angle = random(-PI / 6, PI / 6);
let cosA = cos(angle);
let sinA = sin(angle);
function rot(x, y) {
let dx = x - cx;
let dy = y - cy;
return createVector(cx + dx * cosA - dy * sinA, cy + dx * sinA + dy * cosA);
}
let fTL = rot(cx - w / 2, cy - h / 2);
let fTR = rot(cx + w / 2, cy - h / 2);
let fBR = rot(cx + w / 2, cy + h / 2);
let fBL = rot(cx - w / 2, cy + h / 2);
let bTL = rot(cx - w / 2 + d, cy - h / 2 - d);
let bTR = rot(cx + w / 2 + d, cy - h / 2 - d);
let bBR = rot(cx + w / 2 + d, cy + h / 2 - d);
let bBL = rot(cx - w / 2 + d, cy + h / 2 - d);
let ordered = [
fTL, fTR, fBR, fBL, fTL,
bTL, bTR, bBR, bBL, bTL,
bBL, fBL, fBR, bBR,
bTR, fTR
];
let start = seed % ordered.length;
let rotated = [];
for (let i = 0; i < ordered.length; i++) {
rotated.push(ordered[(i + start) % ordered.length]);
}
return rotated;
}
function smoothPoints(arr) {
let smoothed = [];
for (let i = 0; i < arr.length - 1; i++) {
let p1 = arr[i];
let p2 = arr[i + 1];
let mid = p5.Vector.lerp(p1, p2, 0.5);
mid.x += random(-0.4, 0.4);
mid.y += random(-0.4, 0.4);
smoothed.push(p1);
smoothed.push(mid);
}
smoothed.push(arr[arr.length - 1]);
return smoothed;
}







