//  rotation
// James Brink, 7/12/2020
let can2, can3, can4;


let sketch = function(p) {
  let x = 0;
  let y = 0;

  p.setup = function() {
    cnv = p.createCanvas(150, 150, WEBGL);
    cnv.parent("c5");
    p.normalMaterial();
  };

  p.draw = function() {
    p.background(160);
    p.rotateX(frameCount * 0.01);
    p.rotateY(frameCount * 0.01);
    p.box(50);
  };
};

let myp5 = new p5(sketch);

function setup() {
  let can1 = createCanvas(150, 150, WEBGL);
  can1.parent("c1");
  normalMaterial();

  can2 = createCanvasClass(150, 150, WEBGL);
  can2.parent("c2");
  can2.rotateZ(PI/4);
  can2.rotateX(PI/3);
  can2.rotateY(PI/5);
  can2.normalMaterial();
  
  can3 = createCanvasClass(150, 150, WEBGL);
  can3.parent("c3");
  can3.normalMaterial();

  can4 = createCanvasClass(150, 150, WEBGL);
  can4.parent("c4");
  can4.normalMaterial();

} // setup


function draw() {
  background(180);
  rotateZ(PI/4);
  rotateX(PI/3);
  rotateY(PI/5);
  box(50);
 
  can2.background(200);
  can2.box(50);
  
  can3.background(220);
  can3.rotateZ(PI/4);
  can3.rotateX(PI/3);
  can3.rotateY(PI/5);
  can3.box(50);
  can3.rotateY(-PI/5);
  can3.rotateX(-PI/3);
  can3.rotateZ(-PI/4);
  
  can4.background(240);
  let a = frameCount * 0.01;
  can4.rotateZ(a);
//  can4.rotateX(a);
//  can4.rotateY(a);
  can4.box(50);
//  can4.rotateY(-a);
//  can4.rotateX(-a);
  can4.rotateZ(-a);

 

}  // draw