box clump ver 2 - OpenProcessing

mySketch
xxxxxxxxxx
 
const colourCodes = ['#73C8A9', '#DEE1B6', '#E1B866', '#BD5532', '#373B44']
​
//Stores data about the shapes we'll draw: 
//  position, size, and colour
const shapesData = [];
​
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL); //3d needs a different "renderer"
  createShapesData(random(10, 100)); //once, only!
}
​
function draw() {
  background(100)
​
  //camera
  orbitControl(5) //adjust camera based on mouse actions
​
  //lights
  ambientLight("gray");
  //colour, and x, y, z of direction
  directionalLight(color(200, 200, 200), 1, 1, -1);
​
  //draw our shapes!
  for (let oneShapeData of shapesData) {
    drawShape(oneShapeData);
  }
}
​
function createShapesData(numShapes) {
  let clumpSpread = 60;
  shapesData.length = 0; //throw away any old shapesData
  for (let i = 0; i < numShapes; i++) {
    shapesData.push(createOneShapeData(clumpSpread));
  }
}
​
function createOneShapeData(clumpSpread) {
  return {
    color: random(colourCodes),
    pos: createRandomPosition(clumpSpread), // {x,y,z}
    size: {
      w: random([40, 80, 160]), //width
      h: random([40, 80, 160]), //height
      d: random([40, 80, 160]), //depth,    
    },
    rotationX: 0, //not in use.
    rotationY: 0
  }
}
​
/** 
Draw a 3d cuboid with position, size, colour specified in the given "oneShapeData" data
*/
function drawShape(oneShapeData) {
  push()
  const pos = oneShapeData.pos;
  translate(pos.x, pos.y, pos.z) //temporarily move origin
  // rotateY(oneShapeData.rotationY)
  // rotateX(oneShapeData.rotationX)
  noStroke();
​
  ambientMaterial(oneShapeData.color);
  const size = oneShapeData.size;
  box(size.w, size.h, size.d) //create a box at the current origin!
  pop()
}
​
​
​
/** 
Called when p5.js notices a key has been pressed.
Global variable "key" will be set (e.g. to "s" or " ")
*/
function keyPressed() {
  if (key === " ") {
    let numShapes = random(10, 100);
    createShapesData(numShapes);
  }
}
​
function createRandomPosition(clumpSpread) {
  //we'll use randomGaussian to give randomness 
  //with a bell-curve distribution around 0
​
  //Alternatively, you can experiment with random()
  return {
    x: randomGaussian(0, clumpSpread * 2),
    y: randomGaussian(0, clumpSpread * 2),
    z: randomGaussian(0, clumpSpread * 2),
  }
}
​
function keyPressed() {
  // this will download the first 5 seconds of the animation!
  if (key === 's') {
    saveGif('921189_boxClump', 5);
  }
}