<div id = "stage"> </div>

html, body {
  margin: 0;
  padding: 0;
  background-color: rgba(68, 68, 68, .001);
/*     background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/tiny-squares.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; */
  
}

button {
  height: 75px;
  width: 200px;
  background-color: #444;
  color: white;
  font-size: 27px;
}

let angle = 0;
let t =1;
let shapes = [];
let lat, long;
let terminal;
let padding;
let r,h,x,y,z;
let c;
let flag;
let rotation;
let windowX, windowY;
let v, v1, v2, globalV;
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);
  c = createCanvas(windowWidth, windowHeight, WEBGL);
  
}

 setup = () => { 

   responsiveCanvas() ;
      
     // ortho(-width, width, height, -height/2, 0.1, 100);
   ortho()
   // noLoop()
   // flag = false;
   rotation = -90;
   globalV = createVector(250, -400, -95)
   globalV.normalize
   
   v1 = createVector(300,500, 50);
   v2 = createVector(-300,-500, -50);

 
   // variables for all shapes
   let shapeWidth = 40;
   let perRow = 5;

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

   let rowOneY = 100;
   let rowOneX = 0;
  for (var i = 0;i<perRow;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<perRow;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<perRow;i++){ 
    shapes.push(new Structure(shapeR, shapeH, rowThreeX, rowThreeY, 0, -3))
    
    rowThreeX += shapeWidth*TWO_PI;
   }
  padding = 200;
  // frameRate(.5);
} 
 

 draw = () => {
   
     //drag to move the world.

  rotateX(mouseX)
  v1.normalize()
  v2.normalize()

   translate(-500, -300, 0)
   
   
  // camera(0,0, (height/2)/tan(PI/6), 50, 0, 0, 1, 0, 0)
   // ortho(600,-600,900,-900/2,0.01,1000)
   // ortho(600,-600,900,-900/2,0.01,1000)

  // background('rgba(119, 20, 39,.9)')
  // background("rgba(211, 246, 250, .2)")
      background(tamrDark)

   
     //drag to move the world.
  // orbitControl();

            /* LIGHTS  */

   // light grey
   // ambientLight("rgb(243, 244, 245)")
   // light blue
  // normalMaterial("rgba(12,56,95, 1")
  
   /* active lights and material*/
      // ambientLight("rgbs(15, 127, 201)")
   // directionalLight(12,56, 95, v1)
   
     /* OK SO SETTING AMBIENT COLOR IN DRAW AFFECTS ALL SHAPES PRETTY EQUAL BUT SETTING AN AMBIENT LIGHT ON EACH ELEMENT HAS AN INTERESTING AFFECT */
   
   // red/orange
 // ambientLight("rgb(226, 32, 27)")
   
   // directionalLight("rgb(141, 173, 201)", v2)
 // directionalLight("rgb(226, 32, 27)", globalV)
   
  // ambientMaterial("rgba(12,56,95, 1")
      // ambientMaterial("white")

   
           /* 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(){
     // globalV = createVector(-20,-400, -95)
     // globalV.normalize
    
     
     
     /*Active lights*/

     /* OK SO SETTING AMBIENT COLOR IN DRAW AFFECTS ALL SHAPES PRETTY EQUAL BUT SETTING AN AMBIENT LIGHT ON EACH ELEMENT HAS AN INTERESTING AFFECT */
        // stroke(252)
     let activeColor = "rgb(15, 127, 201)";
     // blue-uncmmenting this des smething very interesting lol
      // ambientLight("rgba(12, 56, 95, 1)")

     
     // alt blue - coming out black--start here why?
     // directionalLight(activeColor, globalV)
       directionalLight(12, 56, 95, 0.1, -1, 0, sin(t / 2));

  // directionalLight(217, 239, 248, 0.1, 1, 0, sin(t));
    ambientMaterial(tamrLight)
     
        // light grey
   // ambientLight("rgb(243, 244, 245)")
     
     
 // directionalLight(12,56, 95, v)
  // rotateY(angle)
  // rotateZ(angle/HALF_PI)
       // translate(this.x, this.y, this.z);
   translate(this.x, this.y, this.z);
  // rotateX(this.rot)
     // rotateZ(10)
     // rotateY(30)
     
     rotateX(rotation)
     cylinder(this.r, this.h)
     // rotation -= .001
//      if (frameCount > 220){
//        noLoop()
//      console.log(frameCount)
     
//      }
    // cylinder(this.r, 0)
     
  // let thing = cylinder(this.r, this.h,20,20)
  
  // let thingTwo = cylinder(this.r, this.h,100,100)
  // rotateX(-90)
     
     
     // angle += 0.0007;
   }
}

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

   // button off- goes back in setup to turn on with function below
   // let button = createButton("Transition 1")
   // button.position(100,40)
   // button.mousePressed(transOne)

function transOne(){
   console.log('working')
 flag = true;   
   loop()
 }