Processing Evolved

    function setup() {
        let canvas = createCanvas(600, 600, WEBGL);
        canvas.parent('animation-holder');
    resizeAnimation();
    resizeAnimation();
    resizeAnimation();
    }

    let angle = 0;
    let squares = [
        { x: -50, y: -50, size: 100, color: [255, 0, 0], expanding: true },
        { x: 0, y: 0, size: 100, color: [0, 255, 0], expanding: true },
        { x: 50, y: 50, size: 100, color: [0, 0, 255], expanding: true }
    ];

    function draw() {
        background(150);
        rotateX(angle);
        rotateY(angle * 0.5);
        rotateZ(angle * 0.25);
        for (let i = 0; i < 5; i++) {
            push();
            translate(0, i * 120 - 240);
            for (let square of squares) {
                push();
                translate(square.x, square.y);
                fill(square.color);
                box(square.size);
                pop();
                if (square.expanding) {
                    square.size += 2;
                    if (square.size > 200) {
                        square.expanding = false;
                    }
                } else {
                    square.size -= 2;
                    if (square.size < 10) {
                        let newSquares = [];
                        for (let i = 0; i < 4; i++) {
                            let x = square.x + (i % 2 === 0 ? -square.size / 4 : square.size / 4);
                            let y = square.y + (i < 2 ? -square.size / 4 : square.size / 4);
                            newSquares.push({ x, y, size: square.size / 2, color: square.color, expanding: true });
                        }
                        squares = squares.concat(newSquares);
                        square.size = 10;
                        square.expanding = true;
                    }
                }
            }
            pop();
        }
        angle += 0.01;
    }