This code simulates a dynamic factory environment, with variable elements including functionality of the factory, speed of the factory, the background factories, and the time of day. The idea for gears came from another class of mine in which we used squares to create interesting compositions. One of mine was created by overlaying two squares to create a “gear” so I knew I wanted to visualize it in motion for this project. I coded the gears to that they appear to work together, and appear to create an output when doing so. The rest stemmed from this “factory” theme.
painting
var angle = 0; //gear turn
var t = 34; //gear translate
var eSize = 10; //ball sizes, center gear
var ballY = 409; //front ball Y position
var recX = 7*t; //top piston X translation
var RecX = 7*t; //bottom piston X tranlation
var recY=10.5*t; //pistons Y translation
var dir = 1; //top piston direction
var direction = 1; //bottom piston direction
var speed = 2; //piston speed
var recSize = 18; //piston length
var BallY = 125; //middle ball Y position
var windowSize = 25; //window size
var Bally = 300; //furthest ball start
var bright = 0;
function setup() {
createCanvas(500, 409);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background (210,146, 6); //orange brown
push();
if(mouseIsPressed){
if(mouseButton == RIGHT){ //if the right button is pressed
background(210-mouseY/2, 146 -mouseY/2, 6- mouseY/2); //gets darker with higher Y
if(mouseY>height/2){ //if the mouse Y is greater half the height
fill(255); //stars
ellipse (100,200,1,1);
ellipse (200,100,5,5);
ellipse (300,100,3,3);
ellipse (300,200,5,5);
ellipse (300,300,3,3);
ellipse (150,50,5,5);
ellipse (420,120,2,2);
ellipse (200,100,5,5);
ellipse (150,150,5,5);
ellipse (180,220,2,2);
ellipse (300,200,1.5,1.5);
ellipse (300,250,1,1);
ellipse (450,100,2,2);
ellipse (100,289,5,5);
ellipse(50,70,2.5,2.5);
ellipse (190,120,2.4,2.4);
ellipse (100,289,5,5);
ellipse(50,70,2.5,2.5);
ellipse (200,60,1.2,1.2);
ellipse(90,90,2,2);
ellipse (230,200,2.4,2.4);
ellipse (460,60,5,5);
ellipse(440,100,2.7,2.7);
ellipse (250,250,2.4,2.4);
ellipse (260,200,3,3);
ellipse(240,220,2.1,2.1);
ellipse(300,110,1.7,1.7);
ellipse (280,190,2.3,2.3);
ellipse (290,140,3.1,3.1);
ellipse(215,210,2,2);
ellipse (400,90,2.3,2.3);
ellipse (410,120,1.5,1.5);
ellipse(420,50,2,2);
}
if(mouseY<height/2){ //if mouse Y is lower than the height
fill(255,255,117);
ellipse(0,mouseY,60,60); //sun
}
}
}
pop();
push();
fill(0,0,0,200);
rectMode(CORNER);
var m = max(min(mouseX, 250), 0);
var size = m * 350.0 / 400.0;
fill(0,0,0,height-mouseY);
rect(10,height/2-recSize*1.5,75,500); //left chimney
rect(0,height/2,size,500); //left building
size = 350-size;
fill(0,0,0,mouseY+50);
rect(110+m*190/400,height/2-recSize*2,size,500); //back building
var ballWidth = max(min(mouseY, 100), 0);
rect(110+m*190/400,height/2-recSize*4,ballWidth,37); //back chimney
if(BallY<0){ //if ball goes past 0
BallY=height/2-recSize*4; //reappear at height of back chimney
}
BallY = BallY-1; //move up by 1 point
ellipse(110+m*190/400+ballWidth/2,BallY,ballWidth,-ballWidth); //middle ball
if(Bally<0){ //if ball goes past 0
Bally=250; //reset ball height to 250
}
Bally = Bally-2 ; //move up by 2 points
fill(0,0,0,mouseX); //opacity changes with mouseX
if(mouseY>200){ //if mouse Y is greater than half the height
fill(210,146, 6); //fill changes to background (disappears)
}
ellipse(380,Bally,height/4 - ballWidth,height/4 - ballWidth); //right ball
fill(0,0,0);
rectMode(CENTER); //rectangles oriented by center point
fill(150);
rect(recX,recY+5,3.2*recSize,1/2*recSize); //top piston still
rect(RecX,recY+25,3.5*recSize,1/2*recSize); //bottom piston still
if(mouseX<1.5*t & mouseY<1.5*t){ //if mouse is in the top left corner
if(recX>width-220 || recX