![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2021/09/stop-banner.png)
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.
FactoryEamonn
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 < width-266){ //piston range
dir =- dir; //top piston bounces
}
if(RecX > width-220 || RecX < width-266){ //piston range
direction = -direction; //bottom piston bounces
}
fill(150); //light gray
push();
if(mouseIsPressed){
if(mouseButton == LEFT){ //if left mouse button pressed
ballY = ballY-20; //ball speed up to 20 points
speed = 10; //pistons speed up by factor of 10
angle += 4; //angle doubles
}
}
else{
speed = 2; //speed reset to 2
}
pop();
push();
recX += dir*speed //piston move
rect(recX,recY+5,3.2*recSize,1 / 2*recSize); //top piston
RecX += -direction*speed; //piston move
rect(RecX,recY+25,3.5*recSize,1 / 2*recSize); //bottom piston
}
pop();
push();
translate (6.7*t, 11*t); //last piston
if(mouseX < 1.5*t & mouseY < 1.5*t){ //first gear in place
rotate(radians(angle)); //spin rate
}
fill(150);
rect(0,0,50,50); //gear part
quad (t,0,0,t,-t,0,0,-t) //gear part
fill(50); //dark gray
ellipse(0,0, eSize, eSize); //gear center
pop();
push();
translate(t,6.7*t); //first piston
if(mouseX < 1.5*t & mouseY < 1.5*t){
rotate(radians(-angle));
}
fill(150);
rect(0,0,50,50);
quad (t,0,0,t,-t,0,0,-t)
fill(50);
ellipse(0,0, eSize, eSize);
pop();
rectMode(CORNER);
fill(150)
rect(width-220,height-200,220,200); //front building
rect(width-100,height-250,50,100); //front chimney
fill(175,129,3); //gray-orange
rect(width-205,height-180,windowSize, windowSize*2); //top row windows
rect(width-165,height-180,windowSize,windowSize*2);
rect(width-125,height-180,windowSize,windowSize*2);
rect(width-40,height-180,windowSize,windowSize*2);
rect(width-205,height-120,windowSize, windowSize*2); //middle row windows
rect(width-165,height-120,windowSize,windowSize*2);
rect(width-125,height-120,windowSize,windowSize*2);
rect(width-40,height-120,windowSize,windowSize*2);
rect(width-205,height-60,windowSize, windowSize*2); //bottom row windows
rect(width-165,height-60,windowSize,windowSize*2);
rect(width-125,height-60,windowSize,windowSize*2);
rect(width-40,height-60,windowSize,windowSize*2);
push();
angle += 2
fill(150);
translate(mouseX,mouseY); //cursor gear
rotate (radians(angle));
rectMode(CENTER);
noStroke();
rect(0,0,50,50);
quad (t,0,0,t,-t,0,0,-t)
pop();
fill(50);
ellipse(mouseX,mouseY,eSize,eSize); //cursor gear center
fill(150);
rectMode(CENTER);
noStroke();
push();
translate(t,2.9*t); //first gear
if(mouseX < 1.5*t & mouseY < 1.5*t){
rotate(radians(-angle))
}
rect(0,0,50,50);
quad (t,0,0,t,-t,0,0,-t)
fill(50);
ellipse(0,0, eSize, eSize)
pop();
push();
translate(1.5*t,4.8*t); //second gear
if(mouseX < 1.5*t & mouseY < 1.5*t){
rotate(radians(angle))
}
fill(150);
rect(0,0,50,50);
quad (t,0,0,t,-t,0,0,-t)
fill(50);
ellipse(0,0, eSize, eSize)
pop();
push();
translate(1.5*t,8.6*t); //third gear
if(mouseX < 1.5*t & mouseY < 1.5*t){
rotate(radians(angle))
}
fill(150);
rect(0,0,50,50);
quad (t,0,0,t,-t,0,0,-t)
fill(50);
ellipse(0,0, eSize, eSize)
pop();
push();
translate(t,10.5*t); //fourth gear
if(mouseX < 1.5*t & mouseY < 1.5*t){
rotate(radians(-angle))
}
fill(150);
rect(0,0,50,50);
quad (t,0,0,t,-t,0,0,-t)
fill(50);
ellipse(0,0, eSize, eSize)
pop();
push();
translate (2.9*t, 11*t) //fifth gear
if(mouseX < 1.5*t & mouseY < 1.5*t){
rotate(radians(angle))
}
fill(150);
rect(0,0,50,50);
quad (t,0,0,t,-t,0,0,-t)
fill(50);
ellipse(0,0, eSize, eSize)
pop();
push();
translate (4.8*t, 10.5*t) //sixth gear
if(mouseX < 1.5*t & mouseY < 1.5*t){
rotate(radians(-angle))
}
fill(150);
rect(0,0,50,50);
quad (t,0,0,t,-t,0,0,-t)
fill(50);
ellipse(0,0, eSize, eSize)
pop();
push();
fill(125);
if(mouseX<1.5*t & mouseY<1.5*t){
if(ballY<0){
ballY = 409;
}
ballY = ballY-2; //moves up by 2 points
fill(150);
ellipse(width-75,ballY,eSize*3,eSize*3) //front ball
}
}