<div id = "stage"> </div>
html, body {
  margin: 0;
  padding: 0;
}

button {
  height: 50px;
  width: 200px;
  background-color: #444;
  color: white;
  font-size: 27px;
  margin-bottom: 100px;
}
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 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 = 90;
   
   let button = createButton("Animate")
   button.position(100,0)
   button.mousePressed(transOne)
 
   /*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);
} 
 
 function transOne(){
   console.log('working')
 flag = true;   
   loop()
 }

 draw = () => {
   
     //drag to move the world.
  let v1 = createVector(300,500, 50);
  let v2 = createVector(-300,-500, -50);
  
  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)
   
     // ortho(-width, width, height, -height/2, 0.1, 100);
   ortho()
  // background('#771427')
  background(tamrDark)

            /* LIGHTS  */

   // light grey
   // ambientLight("rgb(243, 244, 245)")
   // light blue
  // normalMaterial("rgba(12,56,95, 1")
  
   /* active lights and material*/
  //     ambientLight("rgb(15, 127, 201)")
  //  directionalLight(51,51, 51, v2)
  // ambientMaterial("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(){
     
            directionalLight(12, 56, 95, 0.1, -1, 0, sin(t / 2));

  // directionalLight(217, 239, 248, 0.1, 1, 0, sin(t));
    ambientMaterial(tamrLight)
  // 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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js