let cubeMedium = [];

let cubeSmall = [];

let ground = 0;

let ground2 = 0;

​

function setup() {

  createCanvas(600, 600, WEBGL);

  // createCanvas(windowWidth, windowHeight, WEBGL);

  angleMode(DEGREES);

  colorMode(HSB);

  noCursor();

​

  for (let z = -height; z < height - 200; z = z + 200) {

    for (let x = -width; x < width; x = x + 200) {

      cubeLarge.push(new RotatingCube(x, //x

        1, //y

        z, //z

        75, //width

        75, //height

        75, //depth

        0.5, //xSpeed

        0.5, //ySpeed

        0.5, //zSpeed

        0.1, //rSpeed

        random(-1, 1))); //waveSpeed);

    }

  }

​

  for (let z = -height; z < height - 200; z = z + 150) {

    for (let x = -width; x < width; x = x + 150) {

      cubeMedium.push(new RotatingCube(x, //x

        2, //y

        z, //z

        35, //width

        35, //height

        35, //depth

        0.5, //xSpeed

        0.5, //ySpeed

        0.5, //zSpeed

        0.1, //rSpeed

        random(-1, 1))); //waveSpeed);

    }

  }

​

  for (let z = -height; z < height; z = z + 100) {

    for (let x = -width; x < width; x = x + 100) {

      cubeSmall.push(new RotatingCube(x, //x

        2, //y

        z, //z

        10, //width

        10, //height

        10, //depth

        0.5, //xSpeed

        0.5, //ySpeed

        0.5, //zSpeed

        0.1, //rSpeed

        random(-1, 1))); //waveSpeed);

    }

  }

​

​

  ground = new Ground(0, //x

    400, //y

    0, //z

    1000, //width

    100000, //height

    270, //angle

    0, //hue

    0, //saturation

    0); //brightness

​

  ground2 = new Ground(0, //x

    400, //y

    -4000, //z

    1000, //width

    100000, //height

    0, //angle

    0, //hue

    100, //saturation

    100); //brightness

​

}

​

function draw() {

  background(0, 0, 0);

​

  //lighting

  directionalLight(0, 0, 100, 500, 500, 50);

  directionalLight(0, 0, 100, -500, -500, -50);

  // pointLight(0, 100, 100, 50, 50, 50);

  ambientLight(0, 0, 35);

​

  //material

  specularMaterial(0, 0, 75);

​

  //control

  //orbitControl();

​

  //camera

  if(frameCount<1080){camera(0, 0, 600 + (20 * sin(frameCount * 0.5) * 10), 0, 0, -2000, 0, 1, 0);}

  else{camera(0, 0, 600 + (20 * sin(frameCount * -0.5) * 10), 0, 0, -2000, 0, 1, 0);}

​

  //class objects

​

​

  for (let i = 0; i < cubeLarge.length; i++) {

    cubeLarge[i].update();

  }

​

  for (let i = 0; i < cubeMedium.length; i++) {

    cubeMedium[i].update();

  }

​

  for (let i = 0; i < cubeSmall.length; i++) {

    cubeSmall[i].update();

  }

​

  //ground.update();

  //ground2.update();

​

}

​

class RotatingCube {

  constructor(x, y, z, w, h, d, xSpeed, ySpeed, zSpeed, rSpeed, waveSpeed) {

    this.x = x;

    this.y = y;

    this.z = z;

    this.w = w;

    this.h = h;

    this.d = d;

    this.xSpeed = xSpeed;

    this.ySpeed = ySpeed;

    this.zSpeed = zSpeed;

    this.rSpeed = rSpeed;

    this.r = 0; //start angle of rotation at 0

    this.waveAngle = 0;

    this.waveSpeed = waveSpeed;

​

  }

​

​

  update() {

    push();

​

    translate(this.x, (150 * (this.y * sin(this.waveAngle))), this.z);

    // noStroke();

    strokeWeight(1);

    stroke(mouseX / 5, 100, 100, (sin(this.waveAngle/5)));

​

    rotateX(this.r);

    rotateY(this.r);

    rotateZ(this.r);

​

    specularMaterial(0, 0, 75,(sin(10)));

​

    box(this.w, this.h, this.d);

​

    this.r = this.r + this.rSpeed;

​

    this.waveAngle = this.waveAngle + this.waveSpeed;

    if(mouseX>width){this.x = this.x + map(mouseX,0,width/2,0,10);}

    else{this.y = this.x + map(mouseX,0,width/2,0,10);}

​

​

    // this.x = this.x + this.xSpeed;

    // this.y = this.y + this.ySpeed;

    // this.z = this.z + this.zSpeed;

​

    pop();

  }

}

​

​

​

​

class Ground {

  constructor(x, y, z, w, h, a, hue, sat, b) {

    this.x = x;

    this.y = y;

    this.z = z;

    this.w = w;

    this.h = h;

    this.a = a;

    this.hue = hue;

    this.sat = sat;

    this.b = b;

  }

​

  update() {

    push();

    noStroke();

    translate(this.x, this.y, this.z);

    rotateX(this.a);

​

    specularMaterial(200 * (sin(frameCount * 0.5)), this.sat, this.b);

​

    plane(this.w, this.h);

​

    pop();

​

  }

}

​

​

// "found simple code that equips the mouseClicked function with the save function 

// https://github.com/processing/p5.js/issues/1280

​

​

// function mouseClicked(){

//   save('myCanvas.png');

// }