// --- Animation State Constants --- const IDLE = 0; const QUEUED = 1; const ANIMATING = 2; const FINISHED = 3; // --- Animation Properties --- const animationSpeed = 0.01; const triggerDelay = 0.15; // Cube triggers neighbors at 15% of its own animation const resetDelayDuration = 2; // Pause for 2 frames before repeating let resetDelayCounter = 0; const divisions = 7; let cubeStates = []; // An easing function for a smooth start and stop function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - pow(-2 * t + 2, 3) / 2; } function setup() { createCanvas(windowWidth, windowHeight, WEBGL); initializeStates(); } // Sets up the initial state of the animation function initializeStates() { cubeStates = []; for (let i = 0; i < divisions; i++) { cubeStates[i] = []; for (let j = 0; j < divisions; j++) { cubeStates[i][j] = []; for (let k = 0; k < divisions; k++) { cubeStates[i][j][k] = { state: IDLE, progress: 0, triggeredNeighbors: false }; } } } // Kick off the animation at the bottom-front-left corner cubeStates[0][divisions - 1][divisions - 1].state = QUEUED; } function draw() { background(0); // --- Set up the overall perspective --- rotateX(0.7); rotateY(0.6); // --- Define grid and color properties --- let cubeSize = min(width, height) * 0.5; let smallCubeSize = cubeSize / divisions; let bottomColor = color(255, 0, 0); let topColor = color(100, 200, 255); stroke(0); strokeWeight(1); let offset = -cubeSize / 2 + smallCubeSize / 2; let allFinished = true; // --- Main drawing and animation logic loop --- for (let i = 0; i < divisions; i++) { for (let j = 0; j < divisions; j++) { let lerpAmt = j / (divisions - 1); let layerColor = lerpColor(bottomColor, topColor, lerpAmt); fill(layerColor); for (let k = 0; k < divisions; k++) { let cube = cubeStates[i][j][k]; // --- Update state machine for each cube --- if (cube.state !== FINISHED) { allFinished = false; } if (cube.state === QUEUED) { cube.state = ANIMATING; cube.progress = 0; } if (cube.state === ANIMATING) { cube.progress += animationSpeed; if (cube.progress > triggerDelay && !cube.triggeredNeighbors) { triggerNeighbors(i, j, k); cube.triggeredNeighbors = true; } if (cube.progress >= 1.0) { cube.state = FINISHED; cube.progress = 1.0; } } // --- Draw the cube --- let x = offset + i * smallCubeSize; let y = offset + j * smallCubeSize; let z = offset + k * smallCubeSize; push(); translate(x, y, z); let rotation = 0; let size = smallCubeSize; // Default size if (cube.state === ANIMATING || cube.state === FINISHED) { rotation = easeInOutCubic(cube.progress) * TWO_PI; // If animating, also change the size if (cube.state === ANIMATING) { // This formula maps progress (0->1) to a scale (1->0.5->1) let scaleFactor = 0.5 + abs(cube.progress - 0.5); size = smallCubeSize * scaleFactor; } } rotateY(rotation); box(size); pop(); } } } // --- Reset logic --- if (allFinished) { resetDelayCounter++; if (resetDelayCounter >= resetDelayDuration) { resetAnimation(); } } } function resetAnimation() { initializeStates(); resetDelayCounter = 0; } function triggerNeighbors(i, j, k) { const neighbors = [ [-1, 0, 0], [1, 0, 0], [0, -1, 0], [0, 1, 0], [0, 0, -1], [0, 0, 1] ]; for (const offset of neighbors) { const ni = i + offset[0]; const nj = j + offset[1]; const nk = k + offset[2]; if (ni >= 0 && ni < divisions && nk >= 0 && nk < divisions && nj >= 0 && nj < divisions) { if (cubeStates[ni][nj][nk].state === IDLE) { cubeStates[ni][nj][nk].state = QUEUED; } } } } function windowResized() { resizeCanvas(windowWidth, windowHeight); }