//  webgl
// James Brink, 6/23/2020
let can, can2, can3, can4,can5, can6, can7;
let p5Can;



function setup() {
  can = createCanvasClass(100, 100, WEBGL);
  can2 = createCanvasClass(100, 100, WEBGL);
  can3 = createCanvasClass(100, 100, WEBGL);
  can4 = createCanvasClass(100, 100, WEBGL);
  can5 = createCanvasClass(100, 100, WEBGL);
  can6 = createCanvasClass(100, 100, WEBGL);
  can7 = createCanvasClass(710, 400, WEBGL);
  
  can.normalMaterial();
  can7.normalMaterial();
  detailY6 = createSlider(1, 16, 3);  //for torus
  detailY6.position(610, 280);  // position slider
  detailY6.style('width', '80px');  // set width of slider
  
  btn = createButton("next");
  btn.mouseClicked(clicked);
}

function draw() {

  print(rotationX, " " , rotationY + "  " + rotationZ);
  can.background(200);
  can.rotateX(frameCount * 0.01);
  can.rotateY(frameCount * 0.01);
  can.box(50);
  
  can2.background(200, 200, 200);
  can2.rotateX(frameCount * 0.01);
  can2.rotateZ(frameCount * 0.01);
  can2.cone(40, 70);
  
  can3.background(200, 200, 200);
  can3.plane(50, 50);
  
  can4.background(105, 105, 194);
  can4.rotateX(frameCount * 0.01);
  can4.rotateZ(frameCount * 0.01);
  can4.cylinder(20, 50);
  
  can5.background(205, 102, 94);
  can5.sphere(40);
  
  can6.background(205, 102, 94);
  can6.rotateY(millis() / 1000);
  can6.torus(30, 15, 16, detailY6.value());
  
  can7.background(150); 

  can7.push();
  can7.translate(-240, -100, 0);
  can7.rotateZ(frameCount * 0.01);
  can7.rotateX(frameCount * 0.01);
  can7.rotateY(frameCount * 0.01);
  can7.plane(70);
  can7.pop();

  can7.push();
  can7.translate(0, -100, 0);
  can7.rotateZ(frameCount * 0.01);
  can7.rotateX(frameCount * 0.01);
  can7.rotateY(frameCount * 0.01);
  can7.box(70, 70, 70);
  can7.pop();

  can7.push();
  can7.translate(240, -100, 0);
  can7.rotateZ(frameCount * 0.01);
  can7.rotateX(frameCount * 0.01);
  can7.rotateY(frameCount * 0.01);
  can7.cylinder(70, 70);
  can7.pop();

  can7.push();
  can7.translate(-240, 100, 0);
  can7.rotateZ(frameCount * 0.01);
  can7.rotateX(frameCount * 0.01);
  can7.rotateY(frameCount * 0.01);
  can7.cone(70, 70);
  can7.pop();

  can7.push();
  can7.translate(0, 100, 0);
  can7.rotateZ(frameCount * 0.01);
  can7.rotateX(frameCount * 0.01);
  can7.rotateY(frameCount * 0.01);
  can7.torus(70, 20);
  can7.pop();

  can7.push();
  can7.translate(240, 100, 0);
  can7.rotateZ(frameCount * 0.01);
  can7.rotateX(frameCount * 0.01);
  can7.rotateY(frameCount * 0.01);
  can7.sphere(70);
  can7.pop();
  noLoop();
}

function clicked() {
  loop()
}