​

let cubeLarge = [];

let cubeMedium = [];

let cubeSmall = [];

​

​

//text editing

let textString = ''; //changing text global variable

let oswald; //font

let sizeText = 600;

let startPrompt = 'PRESS ENTER';

let textOpacity = 0.025;

​

​

//input sequencing

let spaceSequence = [];

​

//background

let bgHue = 0;

let bgBrightness = 0;

let bgSat = 0;

​

//sound controls

let songSpeed = 0.75;

​

function preload() {

  soundFormats('mp3', 'ogg', 'wav');

  mySound = loadSound('/KanyeWest_AllDay.mp3');

  oswald = loadFont('/Oswald.ttf');

}

​

function setup() {

  createCanvas(600, 600, WEBGL);

  // createCanvas(windowWidth, windowHeight, WEBGL);

  angleMode(DEGREES);

  colorMode(HSB);

  noCursor();

​

​

  mySound.setVolume(0.5+(frameCount/10));

  mySound.playMode('restart');

​

​

​

​

  for (let i = 0; i < 1; i = i + 0.2) {

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

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

        cubeLarge.push(new RotatingCube(

          x, //x

          1 - i, //y

          z, //z

          75, //width

          75, //height

          75, //depth

          0.5, //xSpeed

          0.5, //ySpeed

          0.5, //zSpeed

          0.5, //rSpeed

          1, //waveSpeed

          10, //strokeHue

          i + 0.2)) //opacity

      }

    }

​

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

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

        cubeMedium.push(new RotatingCube(

          x, //x

          2 - i, //y

          z, //z

          35, //width

          35, //height

          35, //depth

          0.5, //xSpeed

          0.5, //ySpeed

          0.5, //zSpeed

          0.5, //rSpeed

          1, //waveSpeed

          10, //strokeHue

          i + 0.2)) //opacity

      }

    }

​

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

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

        cubeSmall.push(new RotatingCube(

          x, //x

          3 - i, //y

          z, //z

          10, //width

          10, //height

          10, //depth

          0.5, //xSpeed

          0.5, //ySpeed

          0.5, //zSpeed

          0.5, //rSpeed

          1, //waveSpeed

          10, //strokeHue

          i + 0.2)) //opacity

      }

    }

​

  }

}

​

function draw() {

    //background

  background(bgHue, bgSat, bgBrightness);

  //text

​

  textFont(oswald);

  textSize(sizeText);

  fill(0, 0, (100 * (sin(frameCount * 0.5))));

  text(textString, 0, -100);

  textAlign(CENTER, CENTER);

  push();

  translate(0,-1000,-4000);

  textSize(6000);

  fill(0, 0, 100, 0.025);

  text(spaceSequence.length,0,0)

  pop();

  push();

  translate(0,1900,-4000);

  textSize(750);

  fill(0, 0, 100, textOpacity);

  text(startPrompt,0,0)

  pop();

​

  //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);

​

  //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);

  // }

  //orbitControl();

​

​

  //class objects update

​

  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();

  }

  //controls

  //a key

​

  if (keyIsDown(65)) {

​

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

      // cubeLarge.splice(i,1);

      cubeLarge[i].x = cubeLarge[i].x + 1;

    }

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

      // cubeLarge.splice(i,1);

      cubeMedium[i].x = cubeMedium[i].x + 1;

    }

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

      // cubeLarge.splice(i,1);

      cubeSmall[i].x = cubeSmall[i].x + 1;

    }

​

  }

​

  //d key

​

  if (keyIsDown(68)) {

​

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

      // cubeLarge.splice(i,1);

      cubeLarge[i].x = cubeLarge[i].x - 1;

    }

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

      // cubeLarge.splice(i,1);

      cubeMedium[i].x = cubeMedium[i].x - 1;

    }

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

      // cubeLarge.splice(i,1);

      cubeSmall[i].x = cubeSmall[i].x - 1;

    }

​

  }

​

}

​

function keyPressed() {

  //controls - http://keycode.info/

  //keyCode 32 = Space Button

​

  if (keyCode === 32) {

    startPrompt = ''

​

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

      // cubeLarge.splice(i,1);

      cubeLarge[i].rSpeed = cubeLarge[i].rSpeed - 1;

    }

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

      // cubeLarge.splice(i,1);

      cubeMedium[i].rSpeed = cubeMedium[i].rSpeed - 2;

    }

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

      // cubeLarge.splice(i,1);

      cubeSmall[i].rSpeed = cubeSmall[i].rSpeed - 5;

    }

    textString = ''

    spaceSequence.push(1);

    if (spaceSequence.length >= 20){

    textString = 'STOP';

    bgBrightness = 100;

    bgHue = 360;

    bgSat = 0;

    sizeText = (width/3);

    songSpeed = 1;

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

      // cubeLarge.splice(i,1);

      cubeSmall[i].waveSpeed = 10;

    }

​

    }

    if (spaceSequence.length >= 30){

    textString = 'TURN BACK';

    bgBrightness = 100;

    bgHue = 360;

    bgSat = 100;

    sizeText = (width/4);  

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

      // cubeLarge.splice(i,1);

      cubeMedium[i].waveSpeed = 10;

    }

​

    }

    if (spaceSequence.length >= 50){

    textString = '37,144,530';

    sizeText = (width/6);

    bgBrightness = 100;

    bgHue = 360;

    bgSat = 100;

    songSpeed = 1;

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

      // cubeLarge.splice(i,1);

      cubeLarge[i].waveSpeed = 15;

    }

    startPrompt = 'PRESS B'

    textOpacity = 1;

​

    }

​

  }

​

  //37 - arrow left

​

  if (keyCode === 37) {

​

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

      // cubeLarge.splice(i,1);

      cubeLarge[i].w = cubeLarge[i].w + 25;

    }

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

      // cubeLarge.splice(i,1);

      cubeMedium[i].w = cubeMedium[i].w + 25;

    }

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

      // cubeLarge.splice(i,1);

      cubeSmall[i].w = cubeSmall[i].w + 25;

    }

​

  }

​

  //39 - arrow right

  if (keyCode === 39) {

​

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

      // cubeLarge.splice(i,1);

      cubeLarge[i].h = cubeLarge[i].h + 25;

    }

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

      // cubeLarge.splice(i,1);

      cubeMedium[i].h = cubeMedium[i].h + 25;

    }

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

      // cubeLarge.splice(i,1);

      cubeSmall[i].h = cubeSmall[i].h + 25;

    }

​

  }

​

​

  //38 - arrow up

  if (keyCode === 38) {

​

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

      // cubeLarge.splice(i,1);

      cubeLarge[i].waveSpeed = cubeLarge[i].waveSpeed + 5;

    }

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

      // cubeLarge.splice(i,1);

      cubeMedium[i].waveSpeed = cubeMedium[i].waveSpeed + 5;

    }

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

      // cubeLarge.splice(i,1);

      cubeSmall[i].waveSpeed = cubeSmall[i].waveSpeed + 5;

    }

​

  }

​

  //40 - arrow down

​

  if (keyCode === 40) {

​

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

      // cubeLarge.splice(i,1);

      cubeLarge[i].waveSpeed = cubeLarge[i].waveSpeed - 5;

    }

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

      // cubeLarge.splice(i,1);

      cubeMedium[i].waveSpeed = cubeMedium[i].waveSpeed - 5;

    }

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

      // cubeLarge.splice(i,1);

      cubeSmall[i].waveSpeed = cubeSmall[i].waveSpeed - 5;

    }

​

  }

​

​

  //13 - enter key

​

  if (keyCode === 13) {

​

    mySound.play();

    textString = 'III'

    startPrompt = 'PRESS SPACE'

    mySound.loop();

    mySound.rate(songSpeed);

​

  }

​

​

  //82 - r key

  //reset

​

  if (keyCode === 82) {

​

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

      // cubeLarge.splice(i,1);

      cubeLarge[i].rSpeed = 0.5;

      cubeLarge[i].h = 75;

      cubeLarge[i].w = 75;

      cubeLarge[i].d = 75;

      cubeLarge[i].waveSpeed = 1;

    }

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

      // cubeLarge.splice(i,1);

      cubeMedium[i].rSpeed = 0.5;

      cubeMedium[i].h = 35;

      cubeMedium[i].w = 35;

      cubeMedium[i].d = 35;

      cubeMedium[i].waveSpeed = 1;

    }

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

      // cubeLarge.splice(i,1);

      cubeSmall[i].rSpeed = 0.5;

      cubeSmall[i].h = 10;

      cubeSmall[i].w = 10;

      cubeSmall[i].d = 10;

      cubeSmall[i].waveSpeed = 1;

    }

​

  }

​

  //66 - b key

  //break

​

  if (keyCode === 66) {

    songSpeed = 0.5;

    mySound.rate(songSpeed);

​

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

      // cubeLarge.splice(i,1);

      cubeLarge[i].rSpeed = 0.5;

      cubeLarge[i].h = 75;

      cubeLarge[i].w = 75;

      cubeLarge[i].d = 75;

      cubeLarge[i].waveSpeed = random(-1, 1);

    }

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

      // cubeLarge.splice(i,1);

      cubeMedium[i].rSpeed = 0.5;

      cubeMedium[i].h = 35;

      cubeMedium[i].w = 35;

      cubeMedium[i].d = 35;

      cubeMedium[i].waveSpeed = random(-1, 1);

    }

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

      // cubeLarge.splice(i,1);

      cubeSmall[i].rSpeed = 0.5;

      cubeSmall[i].h = 10;

      cubeSmall[i].w = 10;

      cubeSmall[i].d = 10;

      cubeSmall[i].waveSpeed = random(-1, 1);

    }

    textString = 'I'

    startPrompt = ''

    sizeText = (width);

​

  }

​

​

​

​

}

​

//2D to 3D disorientation/perspective

​

//sliders

​

//user control vs performance art X data visualization

​

class RotatingCube {

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

    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;

    this.strokeHue = strokeHue;

    this.strokeOpacity = 1;

    this.opacity = opacity;

​

  }

​

​

  update() {

    push();

​

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

    noStroke();

    strokeWeight((5 * (sin(frameCount * 0.5))));

    stroke(0, 100, (100 * (sin(frameCount * 0.5))), this.opacity);

​

    //     this.strokeOpacity = this.strokeOpacity + 0.0001;

​

    rotateX(this.r);

    rotateY(this.r);

    rotateZ(this.r);

​

    specularMaterial(0, 100, 0, this.opacity);

    // normalMaterial();

​

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

​

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

​

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

​

    // if (mouseX > width / 2 && mouseX < width) {

    //   this.x = this.x + 0.5

    // }

    // if (mouseX < width / 2 && mouseX > 10) {

    //   this.x = this.x - 0.5

    // }

​

    //     this.h = this.h + 2 * sin(frameCount);

​

​

​

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

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

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

​

    pop();

  }

}