Processing Evolved

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

    function draw() {
        background(150);
        fill(255, 0, 0);
        let squareSize = map(mouseY, 0, height, 50, 200);
        square(-squareSize / 2, -squareSize / 2, squareSize);
        
        let resolution = map(mouseX, 0, width, 5, 20);
        let spacing = squareSize / resolution;
        
        stroke(0);
        strokeWeight(2);
        
        for (let x = -squareSize / 2; x <= squareSize / 2; x += spacing) {
            for (let y = -squareSize / 2; y <= squareSize / 2; y += spacing) {
                let n = noise((x + frameCount * 0.03) * 0.1, (y + frameCount * 0.03) * 0.1, frameCount * 0.01);
                let size = map(n, 0, 1, spacing * 0.25, spacing * 0.75);
                ellipse(x, y, size, size);
            }
        }
    }