let circles = []; let splitting = []; let spacing; let radius = 30; let splitInterval = 90; let maxCircles; let stage = "expanding"; let iddPoints = []; let iddLetterIndices = []; function preload() { // 生成iddPoints点阵，模拟logo点阵 for (let y = -6; y <= 6; y++) { for (let x = -20; x <= 20; x++) { if (dist(x, y, 0, 0) < 14 && (x + y) % 4 === 0) { iddPoints.push(createVector(x * radius * 0.9, y * radius * 0.9)); } } } } function setup() { createCanvas(windowWidth, windowHeight); spacing = radius * 2.5; maxCircles = 150; 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]; // “I” 字母区间（左侧） let isI = (p.x > -19 * radius * 0.9 && p.x < -14 * radius * 0.9) && abs(p.y) <= 5 * radius * 0.9; // “D” 字母左半区 let isD1 = (p.x > -8 * radius * 0.9 && p.x < 0) && abs(p.y) <= 6 * radius * 0.9; // “D” 字母右半区 let isD2 = (p.x > 8 * radius * 0.9 && p.x < 16 * radius * 0.9) && abs(p.y) <= 6 * radius * 0.9; 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"; frameCount = 0; } } else if (stage === "transition") { let progress = min(1, frameCount / 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"; } } else if (stage === "final") { for (let i = 0; i < circles.length; i++) { let c = circles[i]; if (iddLetterIndices.includes(i)) { c.c = lerpColor(c.c, color(0, 102, 204), 0.1); // 蓝色高亮 } else { c.c = lerpColor(c.c, color('#e2e2e1'), 0.05); // 灰白 } c.display(); } } } class Circle { constructor(x, y) { this.x = x; this.y = y; this.r = radius; this.c = color('#e2e2e1'); // 默认淡灰白 } display() { noStroke(); fill(this.c); circle(this.x, this.y, 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); } }

> Viscous_Array