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