<div id = "stage">
<button id = "go">Animate</button>
 </div>

html, body {
  margin: 0;
  padding: 0;
}

#stage{
  position:absolute;
  z-index: 1;
}

canvas{
  z-index:0;
}
button {
  height: 50px;
  width: 200px;
  background-color: #444;
  color: white;
  font-size: 27px;
  margin-bottom:150px;
  position: absolute; 
}

let angle = 0;
let t =1;
let shapes = [];
let lat, long;
let terminal;
let padding;
let r,h,x,y,z;
let c;
let windowX, windowY;
let v, globalV; 
let flag;
let tamrLight = "rgb(217, 239, 248)";
let tamrDark = "rgb(12, 96, 142)";

responsiveCanvas = () =>{
  windowX = (windowWidth - width) / 2;
  windowY = (windowHeight - height) / 2;
  c.position(windowX, windowY);
    
}

 setup = () => { 
  c = createCanvas(900, 600, WEBGL);
  responsiveCanvas()   
  // noLoop()
  flag = false;
  rotation = 45;
      // let button = createButton("Animate")
   // button.position(100,40)
   // button.mousePressed(transOne)

   // placing the shapes
   let shapeWidth = 40;
   // let shapeR = random(35, shapeWidth)
   let shapeR = 30;
   let shapeH = random(20,60)

   let rowOneY = 100;
   let rowOneX = 0;
  for (var i = 0;i<3;i++){ 
    shapes.push(new Structure(shapeR, shapeH, rowOneX, rowOneY, 0, .5))
    
    rowOneX += shapeWidth*TWO_PI;
   }
   
     let rowTwoY = 300;
   let rowTwoX = 0;
  for (var i = 0;i<3;i++){ 
    shapes.push(new Structure(shapeR, shapeH, rowTwoX, rowTwoY, 0, -3))
    
    rowTwoX += shapeWidth*TWO_PI;
   }
   
     let rowThreeY = 500;
   let rowThreeX = 0;
  for (var i = 0;i<3;i++){ 
    shapes.push(new Structure(shapeR, shapeH, rowThreeX, rowThreeY, 0, -3))
    
    rowThreeX += shapeWidth*TWO_PI;
   }
   
  padding = 200;
  // frameRate(.5);
} 
 
  function transOne(){
   // console.log('working')
   loop()
 flag = true;   
    
 }

 draw = () => {

  // background('#771427')
  background(tamrDark)
     //drag to move the world.
  orbitControl();
   // ortho(600,-600,900,-900/2,0.01,1000)
  translate(-200, -300, 0)

            /* LIGHTS  */
    let v = createVector(300,500, 50)
  v.normalize()
   // light grey
   // ambientLight("rgb(243, 244, 245)")
   // light blue
   // ambientLight("rgb(15, 127, 201)")
   // directionalLight("rgb(15, 127, 201)", v)
   // directionalLight(12,56, 95, v)
   


   
   // pink 
  // pointLight(212,60, 112, -400, -300, 150)
    // yellow
   // pointLight(248, 250, 157, -400, -300, 0)

          /* MATERIAL */
   
  // ambientMaterial("rgba(12,56,95, 1")
   // specularMaterial("rgba(255,30,25, 1")
   //blue 
  // ambientMaterial("rgb(15, 127, 201)")
   // ambientMaterial("white")
     // ambientMaterial("rgba(12,56,95, 1")

   
  // normalMaterial("rgba(12,56,95, 1")
  
           /* MATTER */
   for (var i = 0; i < shapes.length; i++) {
// var force = attractor.calculateAttraction(orbiters[i]); 
     push();
     shapes[i].show();
     pop();
// shapes[i].applyForce(force);
// shapes[i].update();
}
 }
 
       /* CONSTRUCTOR */
 class Structure {
   
   constructor (r, h, x, y, z, rot){
     this.r = r;
     this.h = h;
     this.x = x;
     this.y = y;
     this.z = z;
     this.rot = rot;
     
   }
   move(){
     
   }
   show(){
  // rotateY(angle)
  // rotateZ(angle/HALF_PI)
     let globalV = createVector(-20,-400, -95)
     globalV.normalize
      
 // directionalLight(12,56, 95, v)
 // directionalLight("rgb(141, 173, 201)", globalV)
  directionalLight(12, 56, 95, 0.1, -1, 0, sin(t / 2));

  // directionalLight(217, 239, 248, 0.1, 1, 0, sin(t));
    ambientMaterial(tamrLight)
    
  translate(this.x, this.y, this.z);
     
     if (flag){
          rotation -= .001

     }
  rotateX(rotation)
     
  cylinder(this.r, this.h)
     if (frameCount > 8000){
       noLoop()
     console.log(frameCount)
     
     }
     angle += 0.0007;
   }
}

windowResized = () => {
  // resizeCanvas(windowWidth, windowHeight);
  responsiveCanvas();
  
  // howManyShapes = round(windowWidth/shapeSize)-5;
}

  $('#go').click(function(){
       loop()
 flag = true; 
    
  })