3D Cubes

3D Cubes.markdown

3D Cubes

Testing out ES6's classes AND p5.js 3d capabilities

A Pen by Reed Silverstein on CodePen.

License.

script.js

var cubes = [];
const numStartingCubes = 25;

function setup() {
  createCanvas(window.innerWidth, window.innerHeight, WEBGL);
  background(200);
  makeCubes();
}

function makeCubes() {
  cubes = _.times(numStartingCubes, () => new RotatingCube());
}

function draw() {
  background(200);
  
  _.each(cubes, cube => cube.drawCube())
}

class RotatingCube {
  constructor() {
    this.dimensions = _.range(3).map(d => _.random(0, 100));
    this.translations = _.range(3).map(t => _.random(-250, 250));
    this.rotations = _.range(3).map(r => _.random(-100, 100));
  }

  drawCube() {
    push();
      translate.apply(null, this.translations);
      this.rotateCube(...this.rotations);
      box.apply(null, this.dimensions);
    pop();
  }

  rotateCube(x, y, z) {
    rotateX(x + (frameCount / 100.0));
    rotateY(y + (frameCount / 103.0));
    rotateZ(z + (frameCount / 105.0));
  }
}

// On window resize this method will be called automagically 
function windowResized() {
  resizeCanvas(window.innerWidth, window.innerHeight);
  background(0);
}

function mouseClicked() {
  cubes.push(new RotatingCube());
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.21/p5.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>

style.css

body {
	padding: 0; 
  margin: 0;
  overflow: hidden;
}