// Exercise 1

//

// READ FIRST

// in the comments below look for  

// !!! Make-changes-here

// to make changes and to customise 

// your polygon.

// Ask for help if unsure or stuck.

​

​

​

​

​

​

// general variables used to display 

// and control 3D objects

let polygon;

let renderer;

let font;

let isDragged;

let rx = 0;

let nrx = -0.5;

let ry = 0;

let nry = -0.5;

let zoom = 1;

let controls = {};

​

​

// !!! Make-changes-here

// these are the coordinates for the custom 3D-object

// each coordinate is made of 3 numbers (x,y,z axis)

// a coordinate with its 3 numbers is stored inside

// an array eg [100,100,-100], all coordinates are 

// store inside one main array.

// things to change:

// - numbers

// - add new coordinates

​

let custom = [

 [-100, 100, 100],

  [100, 100, 100],

  [100, 100, -100],

  [-100, 100, -100],

  [0, -80, 0],

  [50,50,150],

  [-100,100,-230],

  [150,60,40],

  [80,-30,70],

  [-100,-30,50],

  [50,50,-250],

  [-170,0,-80]

];

​

​

​

function preload() {

  font = loadFont(

    "https://raw.githubusercontent.com/adobe-fonts/source-code-pro/release/OTF/SourceCodePro-Medium.otf"

  );

}

​

function setup() {

  renderer = createCanvas(windowWidth, windowHeight, WEBGL);

  setAttributes('antialias', true);

  textFont(font);

  textSize(8);

  textAlign(CENTER)

​

  // initialise controls and 3D-object

  createControls();

  // !!! Make-changes-here

  // by default the object is a cube, change

  // argument from cube to custom to start with

  // an object resulting from coordinates defined

  // inside arrat custom

  calculateFromArray(custom);

​

}

​

function draw() {

​

  // !!! Make-changes-here

  // background

  // change the background color which by

  // default is a dark gray, but change the 

  // number to eg. 240 so that the background

  // becomes lighter.

  background(40);

​

​

  // lighting

  // determines the colors of 3D-objects

  ambientLight(150);

  specularMaterial(250, 250, 250);

  shininess(5);

​

  let locX = mouseX - width / 2;

  let locY = mouseY - height / 2;

  spotLight(0, 0, 255, locX, locY, 10000, 0, 0, -1, Math.PI / 16);

​

  let dirX = (mouseX / width - 0.5) * 2;

  let dirY = (mouseY / height - 0.5) * 2;

  directionalLight(10, 70, 250, -dirX, -dirY, -1);

​

  // Now lets display 

  // our 3D object

  push();

  // position object

  scale(zoom);

  rotateY(rx);

  rotateX(ry);

​

  // render object with all its 

  // components (which can be turned on/off

  // with the toggles in the UI at the top)

  renderPolygon();

  renderPoints();

  renderWireframe();

  renderCoordinates();

  renderFloor();

  // conclude rendering 

  plane(0);

​

  // continuous updates

  // for smooth rotation and zoom

  rx += (nrx - rx) * 0.04;

  ry += (nry - ry) * 0.04;

  zoom += (controls.slider1.value() - zoom) * 0.04;

​

}

​

// Filled Polygon

function renderPolygon() {

  if (controls.toggle3.value()) {

    polygon.draw();

  }

}

​

// End-Points

function renderPoints() {

  if (controls.toggle5.value()) {

    push();

    specularMaterial(255, 255, 255);

    noStroke();

    beginShape();

    polygon.points.forEach(v => {

      push();

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

      box(10);

      pop();

    });

    endShape();

    pop();

  }

}

​

  // Wireframe

function renderWireframe() {

  let arr = polygon.mesh.geometry.attributes.position.array;

  let n = arr.length;

  if (controls.toggle2.value()) {

    push();

    specularMaterial(255, 255, 255);

    noFill();

    stroke(255);

    beginShape(TRIANGLES);

    for (let i = 0; i < n; i += 3) {

      vertex(arr[i], arr[i + 1], arr[i + 2]);

    }

    endShape();

    pop();

  }

}

​

// Coordinates

function renderCoordinates() {

  let arr = polygon.mesh.geometry.attributes.position.array;

  let n = arr.length;

  if (controls.toggle4.value()) {

    push();

    specularMaterial(255, 255, 255);

    noFill();

    fill(255);

    for (let i = 0; i < n; i += 3) {

      let x = arr[i];

      let y = arr[i + 1];

      let z = arr[i + 2];

      push();

      translate(x, y, z * 1.01);

      text(x.toFixed(0) + "," + y.toFixed(0) + "," + z.toFixed(0), 0, -7);

      pop();

    }

    pop();

  }

}

​

// Floor

function renderFloor() {

  if (controls.toggle1.value()) {

    push();

    noStroke();

    translate(0, 101, 0)

    rotateX(HALF_PI);

    specularMaterial(20, 20, 250, 40);

    plane(600);

    specularMaterial(250, 250, 250, 80);

    translate(0, 0, 2);

    plane(220);

    translate(0, 0, -3);

    plane(220);

    pop();

  }

  pop();

}

​

​

function mousePressed() {

  isDragged = (mouseY > 200) ? true : false;

}

​

function mouseReleased() {

  isDragged = false;

}

​

function mouseDragged() {

  if (isDragged) {

    nrx -= (pmouseX - mouseX) * 0.01;

    nry += (pmouseY - mouseY) * 0.01;

  }

}

​

function doubleClicked() {

  if (mouseY > 200) {

    nrx = -0.5;

    nry = -0.5;

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

​

function createControls() {

  // create a simple ui, elements stored in

  // the associative array controls.

​

  let exportFn = () => saveToSTL(polygon, "polygon.stl");

  let randomFn = () => calculateFromArray(randomPoints());

  let cubeFn = () => calculateFromArray(cube);

  let pyramidFn = () => calculateFromArray(pyramid);

  let customFn = () => calculateFromArray(custom);

​

  // create our sliders to adjust graph position

  controls.back = createBackgroundAt(10, 10, 560, 160);

  controls.slider1 = createSliderAt("zoom", 30, 40, 0.2, 5, 1);

  // controls.slider2 = createSliderAt("world", 30, 80, 0, 1, 0.2);

​

  controls.button2 = createButtonAt("cube", 30, 120, 80, cubeFn);

  controls.button3 = createButtonAt("pyramid", 120, 120, 80, pyramidFn);

  controls.button1 = createButtonAt("random", 210, 120, 80, randomFn);

  controls.button4 = createButtonAt("custom", 300, 120, 80, customFn);

  controls.button4 = createButtonAt("export", 450, 120, 100, exportFn);

​

  controls.toggle1 = createToggleAt("Floor", 300, 20, () => {}, true);

  controls.toggle2 = createToggleAt("Wireframe", 300, 40, () => {}, false);

  controls.toggle3 = createToggleAt("Filled", 300, 60, () => {}, true);

  controls.toggle4 = createToggleAt("Coordinates", 420, 20, () => {}, false);

  controls.toggle5 = createToggleAt("Points", 420, 40, () => {}, false);

}

​

​

function calculateFromArray(theArray) {

  polygon = calculatePolygonFor(renderer, theArray);

}

​

function randomPoints(theMaxPoints = 12) {

  let points = [];

  let num = int(random(5, theMaxPoints));

  let len = 100;

  for (let i = 0; i < num; i++) {

    points.push([random(-len, len), random(-len, len), random(-len, len)])

  }

  return points;

}

​

​

let cube = [

  [-100, -100, 100],

  [100, -100, 100],

  [100, 100, 100],

  [-100, 100, 100],

  [-100, 100, -100],

  [-100, -100, -100],

  [100, -100, -100],

  [100, 100, -100]

];

​

let pyramid = [

  [-100, 100, 100],

  [100, 100, 100],

  [100, 100, -100],

  [-100, 100, -100],

  [0, -100, 0]

];