Owen's 3D 2.1.2 - Interface

mySketch
xxxxxxxxxx
 
const colourPalette = [
  "#5c323e",
  "#a82743",
  "#e15e32",
  "#c0d23e",
  "#e5f04c",
  "#ff4e50",
  "#fc913a",
  "#f9d423",
  "#ede574",
  "#e1f5c4"
]
​
let shapes = [];
let far = 2000
​
var settings = QuickSettings.create(0, 110, "Control Panel")
    .addButton("Reset Sketch        ", function(value) { reset() })  //output("Save", "clicked")})
    .addButton("Add More Objects ", function(value) { addobj() })    //output("Save", "clicked")})
    .addButton("Send To Origin      ", function(value) { origin() }) //output("Save", "clicked")})
    .addButton("Change Dest         ", function(value) { change() }) //output("Save", "clicked")})
    .addButton("Zoom In                 ", function(value) { zoomin() }) //output("Save", "clicked")})
    .addButton("Zoom Out              ", function(value) { zoomout() })  //output("Save", "clicked")})
    .addButton("Make Small Cubes", function(value) { smallcubes() }) //output("Save", "clicked")})
    /*.addButton("Form a Sphere      ", function(value) { msphere() }) //output("Save", "clicked")})*/
    .addButton("Alter Target Sizes  ", function(value) { altarget() })  //output("Save", "clicked")})
    .addButton("Save Screenshot   ", function(value) { saver() })    //output("Save", "clicked")})
;
​
function setup() {
  createCanvas(1112, 844, WEBGL);
  setupCamera();
  createRandomBoxes(random(75, 150))
  //setupInstructions();
}
​
function draw() {
  background("#5cacc4");
  myCamera.setPosition(50, -100, far);
  orbitControl(5, 5, 0.1);
  directionalLight(color(150, 100, 0), createVector(-0.8, -0.5, -0.2));
  ambientLight(150, 100, 100);
​
  shapes.forEach((x) => drawBox(x))
  shapes.forEach((x) => updateBox(x))
  myCamera.setPosition
}
​
function saver(){
  save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() + ".jpg");
}
​
function setupInstructions() {
  let instructions = createDiv(`Instructions: <br>
    z = Add more objects <br>
    x = Reset Sketch <br>
    c = Send all objects to origin <br>
    v = Change target destination of all objects <br>
    w = Zoom in <br>
    a = Zoom out <br>
    n = Make all objects small cubes <br>
    m = Change target size of all objects <br>
    s = save screenshot
    
    `);
  instructions.position(45, 10)
  instructions.style("color", "#ffffff");
}
​
function setupCamera() {
  myCamera = createCamera();
  myCamera.setPosition(50, -100, far);
  myCamera.lookAt(0, 0, 0);
}
​
//function creates box objects and pushes them to the array
const createRandomBoxes = (numberOfShapes) => {
  for (i = 0; i < numberOfShapes; i++) {
    const boxSpecs = {
      color: random(colourPalette),
      pos: randomWorldPosition(),
      posTarget: randomWorldPosition(),
      box: randomDimensions(),
      boxTarget: randomDimensions(),
      rotation: p5.Vector.random3D(),
      rotationTarget: p5.Vector.random3D(),
      rotationRate: random(0.01, 0.1)
    }
    shapes.push(boxSpecs)
  }
}
​
//function for drawing boxes from objects
const drawBox = (shape) => {
  push()
  noStroke();
  ambientMaterial(color(shape.color))
  translate(shape.pos) //translate can take a vector
  rotateX(shape.rotation.x);
  rotateY(shape.rotation.y);
  rotateZ(shape.rotation.z);
  box(shape.box.x, shape.box.y, shape.box.z)
  pop()
}
​
//function to update box movement
const updateBox = (shape) => {
  shape.pos.lerp(shape.posTarget, 0.005)
  shape.box.lerp(shape.boxTarget, 0.005)
  shape.rotation.lerp(shape.rotationTarget, shape.rotationRate)
}
​
//function to pull objects to origin
const setPosTargetToOrigin = (shape) => {
  shape.posTarget = createVector(0, 0, 0)
}
​
//function to redirect objects
const setPosTargetToRandomInWorld = (shape) => {
  shape.posTarget = randomWorldPosition()
}
​
//function to send objects to form a sphere
const setPosTargetToRandomOnShell = (shape) => {
  shape.posTarget = p5.Vector.random3D().mult(600)
}
​
//function to make each object a small cube
const setBoxTargetToCube = (shape) => {
  shape.boxTarget = createVector(50, 50, 50)
}
​
//function to alter object size mutation
const setBoxTargetToRandom = (shape) => {
  shape.boxTarget = randomDimensions()
}
const setRotationTargetToRandom = (shape) => {
  shape.rotationTarget = createVector(
    random([0, 1, 2, 3]) * PI / 2,
    random([0, 1, 2, 3]) * PI / 2,
    random([0, 1, 2, 3]) * PI / 2);
}
​
function randomDimensions() {
  return createVector(random(50, 250), random(50, 250), random(50, 250))
}
​
function randomWorldPosition() {
  return p5.Vector.random3D().mult(random(300, 2000));
}
​
function reset(){ 
      shapes = []
      createRandomBoxes(random(75, 150))
      far = 2000
}
​
function addobj(){ createRandomBoxes(random(10, 50));}
​
function origin() {shapes.forEach((s) => setPosTargetToOrigin(s))}
​
function change() {shapes.forEach((s) => setPosTargetToRandomInWorld(s))}
​
function zoomin() {far -= 100}
​
function zoomout() {far += 100}
​
function smallcubes() {shapes.forEach((s) => setBoxTargetToCube(s))}
​
function altarget() {shapes.boxTarget = randomDimensions();}
​
/*
​
    case "x":
      
      break;
    case "c":
      shapes.forEach((s) => setPosTargetToOrigin(s))
      break;
    case "v":
      shapes.forEach((s) => setPosTargetToRandomInWorld(s))
      break;
    case "w":
      far -= 100
      break;
    case "a":
      far += 100
      break;
    case "b":
      shapes.forEach((s) => setPosTargetToRandomOnShell(s))
      break;
    case "n":
      shapes.forEach((s) => setBoxTargetToCube(s))
      break;
    case "m":
      shapes.forEach((s) => setBoxTargetToRandom(s))
      break;
    case "s":
      save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() + ".jpg");
      break;
    case ",":
      shapes.forEach((s) => setRotationTargetToRandom(s))
      break;
    default:
      break;
      // do nothing - unrecognised key
​
  }
}*/