<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);
}

 setup = () => { 
  c = createCanvas(1000, 700, WEBGL);
   responsiveCanvas() ;
      
   ortho()
     // camera(0,0, (height/2)/tan(PI/6), 50, 0, 0, 1, 0, 0)
     // ortho(-width, width, height, -height/2, 0.1, 100);
   // ortho(600,-600,900,-900/2,0.01,1000)
   // noLoop()
     // noStroke()
  // noFill
   flag = false;
   rotation = 390;
   padding = 150;
   globalV = createVector(-60, 0, 0)
   globalV.normalize
   
   v1 = createVector(0, -550, 50);
   v2 = createVector(-300,-500, 0);
   v1.normalize()
   v2.normalize()
 
   // 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)
   
 

  for (var i = 0;i<8;i++){ 
    shapes.push(new TAMR(18, 36, 8, 150))
    shapes.push(new TAMR(18, 36, 8, 90))
    
    
   }
  // frameRate(.5);
} 
 

 draw = () => {
  let mouseMapper = map(mouseX, 0, width, 0, 360)
  rotateX(mouseMapper)

  // TAMR BG
   background(tamrDark)
   
   //soft blue
  // background("rgba(211, 246, 250, .2)")
   
   
   // Orbit control allows the camera to orbit around a target.
  orbitControl();
   // translate(0, -200, 0)
      translate(-600, -300, 0)
   
     // let activeColor = "rgb(12, 56, 95)";
  // TAMR Light Blue
   let currentColor = "rgb(217, 239, 248)";
         
 // og light scheme   
   // ambientLight(currentColor)
   //   directionalLight(currentColor, globalV)
   //  ambientMaterial(currentColor)
   
    let activeColor = "rgb(15, 127, 201)";
     // blue
//      directionalLight("blue", v1)
     // ambientLight(255, 0, 0);
     // ambientLight(217, 239, 238)
  
   
  directionalLight(12, 56, 95, 0.1, -1, 0, sin(t / 2));

  directionalLight(217, 239, 248, 0.1, 1, 0, sin(t));
     // alt blue - coming out black--start here why?
     // directionalLight(activeColor, globalV)
     
    push()
      translate(windowWidth/2+padding, windowHeight/3)
   ambientMaterial(tamrLight)

  // normalMaterial("rgba(12,56,95, 1")
   
    rotateX(rotation)
   // shapes.push(new TAMR(45, 36, 1, 80))
    cylinder(45, 76)
   pop()
   // placeholder center circle-needs too be creacted 3d
   //    fill("rgb(217, 239, 248)")
  // ellipse(485, 330, 150, 150)

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

            /* LIGHTS  */

   // light grey
   // ambientLight("rgb(243, 244, 245)")
   // light blue
  
   /* 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(shapes[i]); 
     push();
     shapes[i].getInFormation();
     pop();
// shapes[i].applyForce(force);
// shapes[i].update();
}
   
   
 }
 /* END DRAW*/
 
 /* NON-CONSTRUCTOR */
 
 class TAMR {
   constructor(howWide,  howTall, howManyShapes, radius){
     this.r =  howWide;
     this.tall = howTall;
     this.howManyShapes =howManyShapes;
     this.radius = radius;
     this.circleByCircles = 360 / this.howManyShapes;
     
     
   }
   getInFormation(){
   
   
    push()
   
     translate(windowWidth/2+padding, windowHeight/3)

  // let activeColor = "rgb(12, 56, 95)";
  // TAMR Light Blue
     
   let activeColor = "rgb(217, 239, 248)";
     let accentColor = "rgb(12, 56, 95)"

     // pointLight("white", v2)
 
         // ambientLight("blue")
     // alt blue - coming out black--start here why?
    // ambientMaterial("white")
     
     
     
    ambientMaterial(activeColor)
     
  for(var i = 0; i <this.howManyShapes; i++){
    
      let y = sin((this.circleByCircles * i) * (PI / 180)) * (this.radius*HALF_PI);
        let x = cos((this.circleByCircles * i) * (PI / 180)) * (this.radius * HALF_PI);
    
    push();
    // rotate(PI)
        translate(x,y)
     rotateX(rotation)
    
    cylinder(this.r, this.tall)
    // ellipse(x, y, radius)

    
    pop();
    // Set each circle apart by twice its size  
    // x *= HALF_PI;
    // y /= HALF_PI;
    
    // Extra credit
    //   ellipse(200 + sin(frameCount/10) * 20, 100+(i*50), 40, 40);
}
  
   pop()
 }
}
       /* 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(){
     
   }
   
//    getInFormation(){
     
//    }
   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)
     // blue
      ambientLight("rgba(12, 56, 95, 1)")
     // alt blue - coming out black--start here why?
     // directionalLight(activeColor, globalV)
     
    ambientMaterial("rgba(12,56,95, 1")
     
        // 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()
 }