<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;
})
This Pen doesn't use any external CSS resources.