let infoField = []; let visualVariantID; let timelineStart; const STEP = 42; const FIELD_COLS = 50; const FIELD_ROWS = 38; let totalNodes = FIELD_COLS * FIELD_ROWS; function setup() { createCanvas(windowWidth, windowHeight); if (typeof displayDensity === 'function') pixelDensity(displayDensity()); visualVariantID = floor(random(100, 999)); timelineStart = millis(); for (let i = 0; i < totalNodes; i++) { let c = (i % FIELD_COLS) - floor(FIELD_COLS / 2); let r = floor(i / FIELD_COLS) - floor(FIELD_ROWS / 2); let gX = c * STEP; let gY = r * STEP; let roleRand = noise(i * 0.15 + 7777); let targetSize = 3.0; if (roleRand > 0.84) targetSize = random(12, 16); else if (roleRand > 0.58) targetSize = random(6.0, 8.5); else targetSize = random(2.8, 4.2); let trueZ = map(noise(i * 0.05 + 1234), 0, 1, -400, 420); infoField.push({ id: i, col: c, row: r, gridX: gX, gridY: gY, gridSize: (i % 79 === 0) ? 9.5 : (i % 31 === 0) ? 5.8 : 3.0, noiseSize: targetSize, noiseZ: trueZ, seedX: random(20000), seedY: random(20000), seedZ: random(20000), driftSpeed: random(0.0008, 0.0018), alphaOffset: random(1000) }); } } function draw() { background(255); let t = (millis() - timelineStart) / 1000.0; const LOOP_END = 46.0; if (t >= LOOP_END) { timelineStart = millis(); t = 0; visualVariantID = floor(random(100, 999)); } // Camera zoom control let camZoom = 1.0; if (t >= 7.0 && t < 10.0) { camZoom = map(easeInOutCubic((t - 7.0) / 3.0), 0, 1, 1.0, 0.52); } else if (t >= 10.0 && t < 43.0) { camZoom = 0.52; } else if (t >= 43.0 && t < 46.0) { let zoomProgress = (t - 43.0) / 3.0; camZoom = map(easeInOutQuad(constrain(zoomProgress, 0, 1)), 0, 1, 0.52, 1.0); } if (t === 0 || t >= 45.98) camZoom = 1.0; // Matrix deformation & 3D flow positioning for (let i = 0; i < totalNodes; i++) { let n = infoField[i]; let curGridX = n.gridX; let curGridY = n.gridY; if (t >= 10.0) { let hProgress = (t >= 15.0) ? 1.0 : easeInOutCubic((t - 10.0) / 5.0); curGridX += (n.row % 2 === 0) ? hProgress * 90 : -hProgress * 90; } if (t >= 15.0) { let dProgress = (t >= 20.0) ? 1.0 : easeInOutCubic((t - 15.0) / 5.0); let diag = dProgress * 100; if ((n.col + n.row) % 2 === 0) { curGridX += diag; curGridY += diag; } else { curGridX -= diag; curGridY -= diag; } } let noiseTime = frameCount * n.driftSpeed; let trueNoiseX = n.gridX + (noise(n.seedX + noiseTime) - 0.5) * 650; let trueNoiseY = n.gridY + (noise(n.seedY + noiseTime) - 0.5) * 650; let trueNoiseZ = n.noiseZ + (noise(n.seedZ + noiseTime * 0.5) - 0.5) * 150; let nodeAlpha = 255; if (n.gridSize < 6.0) { nodeAlpha = map(noise(frameCount * 0.01 + n.alphaOffset), 0, 1, 150, 255); } // Space state interpolation let finalX, finalY, finalZ, finalSize, finalAlpha; if (t < 20.0) { finalX = curGridX; finalY = curGridY; finalZ = 0; finalSize = n.gridSize; finalAlpha = 230; } else if (t >= 20.0 && t < 22.0) { let blendProgress = easeInOutCubic((t - 20.0) / 2.0); finalX = lerp(curGridX, trueNoiseX, blendProgress); finalY = lerp(curGridY, trueNoiseY, blendProgress); finalZ = lerp(0, trueNoiseZ, blendProgress); finalSize = lerp(n.gridSize, n.noiseSize, blendProgress); finalAlpha = lerp(230, nodeAlpha, blendProgress); } else if (t >= 22.0 && t < 40.0) { finalX = trueNoiseX; finalY = trueNoiseY; finalZ = trueNoiseZ; finalSize = n.noiseSize; finalAlpha = nodeAlpha; } else { let returnProgress = (t < 43.0) ? easeInOutCubic((t - 40.0) / 3.0) : 1.0; finalX = lerp(trueNoiseX, n.gridX, returnProgress); finalY = lerp(trueNoiseY, n.gridY, returnProgress); finalZ = lerp(trueNoiseZ, 0, returnProgress); finalSize = lerp(n.noiseSize, n.gridSize, returnProgress); finalAlpha = lerp(nodeAlpha, 230, returnProgress); } if (t === 0 || t >= 45.98) { finalX = n.gridX; finalY = n.gridY; finalZ = 0; finalSize = n.gridSize; finalAlpha = 230; } // Perspective projection let focalLength = 500; let perspectiveScale = focalLength / (focalLength + finalZ); if (perspectiveScale > 4.5) perspectiveScale = 4.5; n.projX = width / 2 + finalX * camZoom * perspectiveScale; n.projY = height / 2 + finalY * camZoom * perspectiveScale; n.renderSize = finalSize * camZoom * perspectiveScale; n.renderAlpha = finalAlpha; if (finalZ < -150 && t >= 20.0 && t < 40.0) { n.renderAlpha *= map(finalZ, -150, -400, 0.9, 0.45); } } // Render pure lines drawTrue3DLineNetwork(t, camZoom); // Render nodes for (let i = 0; i < totalNodes; i++) { let n = infoField[i]; if (n.projX < -50 || n.projX > width + 50 || n.projY < -50 || n.projY > height + 50) continue; noStroke(); fill(0, n.renderAlpha); ellipse(n.projX, n.projY, n.renderSize); } // Render typographic UI layout drawPosterLayoutUI(t); } // True 3D topology line engine function drawTrue3DLineNetwork(t, camZoom) { if (t < 7.0) { let lineAlpha = 1.0; if (t >= 5.0 && t < 7.0) lineAlpha = map(t, 5.0, 7.0, 1.0, 0.0); stroke(228, lineAlpha * 255); strokeWeight(0.4); let hW = width / 2; let hH = height / 2; for (let c = -25; c <= 25; c++) { let x = hW + c * STEP; line(x, 0, x, height); } for (let r = -25; r <= 25; r++) { let y = hH + r * STEP; line(0, y, width, y); } } else if (t >= 20.0 && t < 40.0) { let maxDistance = 145; let fluidAlphaFactor = 1.0; if (t < 22.0) { fluidAlphaFactor = easeInOutCubic((t - 20.0) / 2.0); maxDistance *= fluidAlphaFactor; } for (let i = 0; i < totalNodes - 24; i += 2) { let n1 = infoField[i]; let n2 = infoField[i + 2]; let n3 = infoField[i + 6]; let n4 = infoField[i + 11]; let d1 = dist(n1.projX, n1.projY, n2.projX, n2.projY); let d2 = dist(n2.projX, n2.projY, n3.projX, n3.projY); let d3 = dist(n3.projX, n3.projY, n4.projX, n4.projY); if (d1 < maxDistance && d2 < maxDistance && d3 < maxDistance) { let avgDist = (d1 + d2 + d3) / 3.0; let lineAlpha = map(avgDist, 0, maxDistance, 185, 0) * fluidAlphaFactor; stroke(120, lineAlpha); strokeWeight(0.6); line(n1.projX, n1.projY, n2.projX, n2.projY); line(n2.projX, n2.projY, n3.projX, n3.projY); line(n3.projX, n3.projY, n4.projX, n4.projY); } } } else if (t >= 40.0) { let fadeProgress = constrain((t - 40.0) / 3.0, 0, 1); let maxDistance = 145 * (1.0 - fadeProgress); if (maxDistance > 5) { for (let i = 0; i < totalNodes - 24; i += 2) { let n1 = infoField[i]; let n2 = infoField[i+2]; let d = dist(n1.projX, n1.projY, n2.projX, n2.projY); if (d < maxDistance) { stroke(120, map(d, 0, maxDistance, 140, 0) * (1.0 - fadeProgress)); strokeWeight(0.5); line(n1.projX, n1.projY, n2.projX, n2.projY); } } } let gridAlpha = (t < 43.0) ? (t - 40.0) / 3.0 : 1.0; if (t >= 45.95) gridAlpha = 1.0; stroke(228, gridAlpha * 255); strokeWeight(0.4); let hW = width / 2; let hH = height / 2; for (let c = -25; c <= 25; c++) { let x = hW + c * STEP * camZoom; line(x, 0, x, height); } for (let r = -25; r <= 25; r++) { let y = hH + r * STEP * camZoom; line(0, y, width, y); } } } // Poster layout typography function drawPosterLayoutUI(t) { textFont('Helvetica, Arial, sans-serif'); noStroke(); fill(0); // TOP LEFT: Tamabi & Dept info textAlign(LEFT, TOP); textSize(14); textStyle(BOLD); text("TAMABI", 35, 35); textSize(9); textStyle(NORMAL); fill(120); text("DEPARTMENT OF INFORMATION DESIGN", 35, 54); // TOP RIGHT: Year info textAlign(RIGHT, TOP); textSize(14); textStyle(BOLD); fill(0); text("2026", width - 35, 35); // BOTTOM LEFT: Design concept & Status textAlign(LEFT, BOTTOM); textSize(12); textStyle(BOLD); text("DESIGN", 35, height - 52); let textStatus = ""; if (t < 7.0) textStatus = "PHASE_01 // GRID_BIRTH"; else if (t < 10.0) textStatus = "PHASE_02 // MIC_RETREAT"; else if (t < 20.0) textStatus = "PHASE_03 // DECONSTRUCTION"; else if (t < 40.0) textStatus = "PHASE_04 // 3D_LINE_FLOW"; else textStatus = "PHASE_05 // SYNC_RESET"; textSize(9); textStyle(NORMAL); fill(120); text(`SYSTEM_STATUS // ${textStatus}`, 35, height - 35); // BOTTOM RIGHT: Loop timescale textAlign(RIGHT, BOTTOM); textSize(9); textStyle(NORMAL); fill(120); text(`LOOP_TIMESCALE: ${nf(t, 1, 2)}s / 46.00s`, width - 35, height - 35); } function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; } function easeInOutQuad(t) { return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; } function windowResized() { resizeCanvas(windowWidth, windowHeight); }

node and link