let circles = []; let splitting = []; let spacing; let radius = 30; let splitInterval = 90; let maxCircles; let stage = "expanding"; let iddPoints = []; let iddLetterIndices = []; let coloredIndices = []; let transitionFrame = 0; function setup() { createCanvas(windowWidth, windowHeight); spacing = radius * 2.5; maxCircles = 150; generateIDDPointsFromGrid(); let startX = width / 2; let startY = height / 2; circles.push(new Circle(startX, startY)); // 识别 IDD 字母点索引，用于最终阶段变蓝 for (let i = 0; i < iddPoints.length; i++) { let p = iddPoints[i]; let isI = (p.x > -6 * radius * 2.5 - 10 && p.x < -6 * radius * 2.5 + 10) && abs(p.y) <= 3 * radius * 2.5 + 10; let isD1 = (p.x > -3 * radius * 2.5 - 10 && p.x < 0 + 10) && abs(p.y) <= 3 * radius * 2.5 + 10; let isD2 = (p.x > 1 * radius * 2.5 - 10 && p.x < 3 * radius * 2.5 + 10) && abs(p.y) <= 3 * radius * 2.5 + 10; if (isI || isD1 || isD2) { iddLetterIndices.push(i); } } } function draw() { background('#333535'); if (stage === "expanding") { for (let c of circles) c.display(); for (let s of splitting) { s.update(); s.display(); } splitting = splitting.filter(s => !s.finished); if (frameCount % splitInterval === 0 && circles.length < maxCircles) { let newSplits = []; for (let c of circles) { let dirs = [[spacing, 0], [-spacing, 0], [0, spacing], [0, -spacing]]; for (let [dx, dy] of dirs) { let newX = c.x + dx; let newY = c.y + dy; if (newX - radius < 0 || newX + radius > width || newY - radius < 0 || newY + radius > height) continue; let overlapping = false; for (let other of circles) { if (dist(newX, newY, other.x, other.y) < spacing * 0.9) { overlapping = true; break; } } if (!overlapping) { newSplits.push(new SplitCircle(c.x, c.y, newX, newY)); break; } } } for (let s of newSplits) splitting.push(s); } if (circles.length >= maxCircles && splitting.length === 0) { stage = "transition"; transitionFrame = 0; } } else if (stage === "transition") { transitionFrame++; let progress = min(1, transitionFrame / 120); for (let i = 0; i < circles.length; i++) { let c = circles[i]; if (i < iddPoints.length) { let target = iddPoints[i].copy().add(width / 2, height / 2); c.x = lerp(c.x, target.x, 0.05); c.y = lerp(c.y, target.y, 0.05); } c.c = lerpColor(c.c, color('#e2e2e1'), 0.1); c.display(); } if (progress >= 1) { stage = "final"; coloredIndices = []; } } else if (stage === "final") { // 只显示组成IDD三个字的圆点，逐点变蓝，带微抖动 if (frameCount % 5 === 0) { let remaining = iddLetterIndices.filter(i => !coloredIndices.includes(i)); if (remaining.length > 0) { coloredIndices.push(random(remaining)); } } for (let i of iddLetterIndices) { let c = circles[i]; let jitterX = 0; let jitterY = 0; if (coloredIndices.includes(i)) { c.c = lerpColor(c.c, color('#17499d'), 0.05); jitterX = random(-1, 1); jitterY = random(-1, 1); } else { c.c = lerpColor(c.c, color('#e2e2e1'), 0.05); } c.display(jitterX, jitterY); } } } class Circle { constructor(x, y) { this.x = x; this.y = y; this.r = radius; this.c = color('#e2e2e1'); } display(jitterX = 0, jitterY = 0) { noStroke(); fill(this.c); circle(this.x + jitterX, this.y + jitterY, this.r * 2); } } class SplitCircle { constructor(x1, y1, x2, y2) { this.start = createVector(x1, y1); this.end = createVector(x2, y2); this.current = this.start.copy(); this.progress = 0; this.speed = 0.015; this.finished = false; } update() { this.progress += this.speed; if (this.progress >= 1) { this.finished = true; circles.push(new Circle(this.end.x, this.end.y)); } else { this.current = p5.Vector.lerp(this.start, this.end, this.easeOut(this.progress)); } } easeOut(t) { return 1 - pow(1 - t, 3); } display() { noStroke(); fill('#e2e2e1'); let dir = p5.Vector.sub(this.current, this.start); let len = dir.mag(); let normDir = dir.copy().normalize(); let perp = createVector(-normDir.y, normDir.x); circle(this.start.x, this.start.y, radius * 2); circle(this.current.x, this.current.y, radius * 2); let maxWidth = radius * 1.2; let minWidth = radius * 0.3; let neckWidth = lerp(maxWidth, minWidth, this.progress); let neckCenter = p5.Vector.add(this.start, dir.copy().mult(0.5)); let p1 = p5.Vector.add(this.start, perp.copy().mult(maxWidth * 0.5)); let p4 = p5.Vector.add(this.start, perp.copy().mult(-maxWidth * 0.5)); let p2 = p5.Vector.add(this.current, perp.copy().mult(maxWidth * 0.5)); let p3 = p5.Vector.add(this.current, perp.copy().mult(-maxWidth * 0.5)); let np1 = p5.Vector.add(neckCenter, perp.copy().mult(neckWidth * 0.5)); let np2 = p5.Vector.add(neckCenter, perp.copy().mult(-neckWidth * 0.5)); let cp1 = p5.Vector.add(p1, dir.copy().mult(len * 0.25)); let cp2 = p5.Vector.add(p2, dir.copy().mult(-len * 0.25)); let cp3 = p5.Vector.add(p4, dir.copy().mult(len * 0.25)); let cp4 = p5.Vector.add(p3, dir.copy().mult(-len * 0.25)); beginShape(); vertex(p1.x, p1.y); bezierVertex(cp1.x, cp1.y, np1.x, np1.y, p2.x, p2.y); vertex(p3.x, p3.y); bezierVertex(cp4.x, cp4.y, np2.x, np2.y, p4.x, p4.y); endShape(CLOSE); } } // 生成 IDD 字母的点阵结构 function generateIDDPointsFromGrid() { let iddGrid = [ // I 字母 [-6, -3], [-6, -2], [-6, -1], [-6, 0], [-6, 1], [-6, 2], [-6, 3], // D 字母左半 [-3, -3], [-2, -3], [-1, -2], [-1, -1], [-1, 0], [-1, 1], [-1, 2], [-2, 3], [-3, 3], [-3, 2], [-3, 1], [-3, 0], [-3, -1], [-3, -2], // D 字母右半 [1, -3], [2, -3], [3, -2], [3, -1], [3, 0], [3, 1], [3, 2], [2, 3], [1, 3], [1, 2], [1, 1], [1, 0], [1, -1], [1, -2], ]; let unit = radius * 2.5; iddPoints = iddGrid.map(([gx, gy]) => createVector(gx * unit, gy * unit)); }

> Viscous_Array