Processing Evolved

    function setup() {
        let canvas = createCanvas(600, 600, WEBGL);
        canvas.parent('animation-holder');
    resizeAnimation();
    resizeAnimation();
    resizeAnimation();
    resizeAnimation();
    frameRate(10); // Slow down the frame rate
    }

    let shapes = [];

    function draw() {
        background(150);
        
        for (let i = 0; i < shapes.length; i++) {
            let shape = shapes[i];
            shape.y += shape.speed;
            shape.speed += 0.1; // Gravity
            
            push();
            translate(shape.x, shape.y);
            scale(shape.scaleX, shape.scaleY);
            fill(shape.color);
            if (shape.type === 'square') {
                square(-50, -50, 100);
            } else {
                triangle(-50, 50, 50, 50, 0, -50);
            }
            pop();
            
            if (shape.y > height / 2) {
                shape.y = -height / 2;
                shape.speed = 0;
            }
        }
        
        if (random(1) < 0.1) {
            let scaleX = random(0.5, 1.5);
            let scaleY = random(0.5, 1.5);
            let color = [random(255), random(255), random(255)];
            let type = random(1) < 0.5 ? 'square' : 'triangle';
            shapes.push({
                x: random(-width / 2, width / 2),
                y: -height / 2,
                scaleX: scaleX,
                scaleY: scaleY,
                color: color,
                type: type,
                speed: 0
            });
        }
    }