Processing Evolved

    function setup() {
        let canvas = createCanvas(600, 600, WEBGL);
        canvas.parent('animation-holder');
    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 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;
                }
            }
        }
        angle += 0.01;
    }