jumpingboxesp5js

let limitW;
let limitH;
let lim;
let boxSIZE = 25;
let myWIDTH = 700;
let myHEIGHT = 700;

function setup() {
    createCanvas(myWIDTH, myHEIGHT, WEBGL);
    lim=6*boxSIZE;
    limitW=width-lim;
    limitH=height-lim;
}

let speed = 0;

function draw() {
    background('#1C252B');
    ortho(-myWIDTH, myWIDTH, myHEIGHT, -myHEIGHT, 0, myHEIGHT+500);

    rotateX(QUARTER_PI);
    rotateY(atan(1/sqrt(2))*1.2);

    for(let z = 0; z < limitW; z += boxSIZE) {
        for(let x = 0; x < limitH; x += boxSIZE) {
            push();
            let temp = speed + map( dist(x, z, limitH/2, limitW/2),
                                    0,
                                    dist(0, 0, 200, 200),
                                    -PI,
                                    PI );
            let boxHEIGHT = map(sin(temp), -1, 1, 55, 300);
            translate(x - width/2 + lim/2, 0, z - height/2 + lim/2);
            normalMaterial();
            box(boxSIZE-2, boxHEIGHT, boxSIZE-2);
            translate(x - width/2 + lim/2, 10, z - height/2 + lim/2);

            pop();
        }
    }

    for(let i = 0; i<400; i+= boxSIZE) {
        push();
        rotateX(sin(speed/5+i));
        rotateX(sin(speed/5+i));
        translate(width/4 - i, width/2, 0);
        normalMaterial();
        sphere(boxSIZE/2);
        pop();
    }
    speed += 0.08;
}