## COVID-19 Story

Final
``````var anxiety;    //sound for computer anxiety
var sing;       //sound for birds singing
var doorclose;      //sound for door closing
var alarm;      //sound for the clock
var squish;     //sound for the virus
var drawer;

}

function soundSetup() {
//setting the volume for each sound
anxiety.setVolume(1);
sing.setVolume(0.2);
doorclose.setVolume(1);
alarm.setVolume(1);
squish.setVolume(1);
drawer.setVolume(1);

}

var virus = [];       //array of "germs"
var painted = [];   //paint on the wall
var x = [];
var y = [];
var reliefBubbles = [];
var landscape = [];     //array that creates hills
var rock = [];      //array that creates rock
var trees = [];     //trees on the close side of the road
var trees2 = [];    //trees on the far side of the road
var cars = [];      //cars on the road
var flocks = [];    //flocks of birds

var bx = 180;       //bird coordinates and
var by = 180;
var bdx = 0;
var bdy= 0;
var textX = 100;    //the scrolling text on the TV
var germShot = -1;      //which germ has been "shot" with the syringe
var r = 40;    //radius of clock
var theta = 0;  // angle of rotation (starting) for clock
var c = 10;     //to move the chart
var count = -10;    //to control where the germs "stop" on the screen
var EamonnX = 100;  //The x location of me as I walk
var opacity = 255;
var size = 10;
var noiseParam = 0;
var noiseStep = 0.03;       //extremity of the slopes

function setup() {
createCanvas(400,300);
background(220);
frameRate(5)
noStroke();

fill(136,238,143);          //first scene background
rect(0,0,400,height);

t1 = makeTurtle(380,200);       //constructing turtles for the computer anxiety
t2 = makeTurtle(380,200);
t3 = makeTurtle(380,200);
t4 = makeTurtle(380,200);
t5 = makeTurtle(380,200);
//setting the color and weight
t1.lowerPen();
t1.setColor(color(0));
t1.setWeight(random(1,3));
t2.lowerPen();
t2.setColor(color(0));
t2.setWeight(random(1,3));
t3.lowerPen();
t3.setColor(color(0));
t3.setWeight(random(1,3));
t4.lowerPen();
t4.setColor(color(0));
t4.setWeight(random(1,3));
t5.lowerPen();
t5.setColor(color(0));
t5.setWeight(random(1,3));

noStroke();

for(var i=0;i<=width/5;i++){        //creating hills
var n= noise(noiseParam);       //picks value 0-1
var value = map(n,0,1,150,250);        //scales it to the canvas size

noiseParam+=noiseStep;      //moves to the right for the next point in the array
}

for(var i=0;i<=width/5;i++){        //creating rocks
var n2= noise(noiseParam);       //picks value 0-1
var value2 = map(n2,0,1,250,300);        //scales it to the canvas size

noiseParam+=noiseStep;      //moves to the right for the next point in the array
}

//plotting the starting objects
for (var i = 0; i < 30; i++){
var Tx = random(width);
var Ty = random(280,height);
trees[i] = makeTree(Tx,Ty);
}
for (var i = 0; i < 30; i++){
var Tx2 = random(width);
var Ty2 = random(240,260);
trees2[i] = makeTree(Tx2,Ty2);
}
for (var i = 0; i < 2; i++){
var Fx = random(width);
var Fy = random(0,200);
flocks[i] = makeFlock(Fx,Fy);
}

for (var i = 0; i < 10; i++){
var Cx = random(width);
cars[i] = makeCar(Cx);
}

useSound();
}

function draw() {
//storyboard for the animation
if(frameCount > 0 & frameCount<=100){
openingScene();
}

if(frameCount>100 & frameCount<=200){
anxiety.stop();
sceneTwo();
}
if(frameCount==100){
squish.play();
}

if(frameCount>200 & frameCount<=380){
sceneThree();
squish.stop();
}
if(frameCount==200){
alarm.play();
}

if(frameCount>380){
alarm.stop();
sing.play();
finalScene();
}

if(frameCount==380){
sing.play();
}

if(frameCount>1000){
sing.stop();
}
}

function openingScene(){
Window(100,50);             //drawing the room
bed(0,200);
chair(270,190);
laptop(350,210);
Eamonn(295,160);

if(frameCount>20){      //initializing the computer anxiety
push();
computerAnxiety();
pop();
}

if(frameCount==20){
anxiety.play();
}

desk(340,210);

bird();
fill(255);       //white
rect(147.5,50,5,150);     //frames
rect(100,122.5,100,5);
}

//functions for the first scene
function Window(x,y){
push();
translate(x,y);
fill(155,245,245);    //light blue
rect(0,0,100,150);      //glass
fill(255);       //white
rect(47.5,0,5,150);     //frames
rect(0,72.5,100,5);
pop();
}

function bed(x,y){
push();
translate(x,y);
fill(10,95,193);      //dark blue
rect(0,0,100,height,10);      //beds
rect(200,0,200,height,10);
pop();
}

function chair(x,y){
push();
translate(x,y);
fill(255);        //white
rect(0,0,8,110);      //chair
rect(0,55,55,8);
rect(55,55,8,60);
pop();
}

function desk(x,y){
push();
translate(x,y);
fill(236,188,75);     //yellow-brown
rect(0,0,75,100);
fill(131,92,3);     //dark brown
rect(-227,0,75,100)
fill(166,123,21);   //light brown
rect(-220,10,60,30);
fill(131,92,3);     //dark brown
ellipse(-190,25,10,10);       //knob

if(mouseX>110 & mouseX<180 && mouseY>220 && mouseY<250 && mouseIsPressed){       //if mouse is pressed on drawer, open it
fill(0);        //black
rect(-217,10,54,30);     //inside of drawer
fill(166,123,21);
rect(-220,20,60,30);
fill(131,92,3);
ellipse(-190,35,10,10);      //knob
}
pop();
}

function laptop(x,y){
push();
translate(x,y);
fill(150);    //gray
rect(1,-2,30,3);               //laptop keyboard
pop();
}

function Eamonn(x,y){
push();
translate(x,y);
fill(0);      //black
rect(-10,65,65,20,10);      //legs
rect(35,65,20,75,10);
fill(186);  //gray
rect(32,130,30,10,10);      //shoe
fill(255,220,200);      //beige
rect(-2,0,8,20);        //neck
fill(242,201,69);       //golden brown
ellipse(-6,0,13,27);        //hair
ellipse(4,-10,27,10);
fill(176,58,58);        //maroon
rect(-13,20,30,60,15);      //shirt
fill(176);      //gray
push();
rect(-40,5,15,50,15);   //arm
pop();
fill(255,220,200);      //beige

pop();

}

function bird(){
push();
if(mouseX>90 &mouseX<190 &&mouseY>50 &&mouseY<190){      //is mouse is on window, show bird
bdx = mouseX-bx;        //"easing" the bird
bdy= mouseY-by;
bx = bx + 0.1*bdx;
by = by + 0.1*bdy;
fill(138,102,18);       //dark brown
triangle(bx,by-5,bx,by+5,bx+20,by+random(-5,5));        //wings
triangle(bx,by-5,bx,by+5,bx-20,by+random(-5,5));
fill(213,99,12);        //red brown
triangle(bx+1,by-13,bx+1,by-8,bx+11,by-10);     //beak
fill(182,139,54);       //dark brown
fill(138,102,18);       //light brown
ellipse(bx,by-10,10,10);
}
pop();
}

function computerAnxiety(){
t1.forward(random(1,3));    //move at varying speeds
t2.forward(random(1,3));
t3.forward(random(1,3));
t4.forward(random(1,3));
t5.forward(random(1,3));

t1.left(random(-1, 1));     //to make the movement erratic
t2.left(random(-1, 1));
t3.left(random(-1, 1));
t4.left(random(-1, 1));
t5.left(random(-1, 1));
}

function sceneTwo(){
fill(255,200,104);      //orange
rect(0,0,width,height);     //background
Television(70,50);
fill(161,105,9);        //brown
rect(45,235,300,100);     //desk
chart(135,65);
TVAnxiety();
syringe();

if (mouseIsPressed & (germShot > -1)) {       //if mouse is pressed on germ, remove it from array
virus.splice(germShot,1);
}
}

function Television(x,y){
push();
translate(x,y);
stroke(0);
strokeWeight(10);
fill(166,250,255);        //light blue
rect(0,0,250,150);        //screen
rect(115,150,10,20);      //stand (stroke color)
rect(25,175,200,5);       //stand
fill(252,49,49);      //red
noStroke();
rect(5,115,240,15);       //news banner
textSize(10);
fill(255);      //white
text("CORONAVIRUS RISING IN US",textX,127);
textX-=5;        //move text
if(textX<5){        //reset text if reaches end of TV
textX = 100;
}

pop();
}

function chart(x,y){
push();
translate(x,y);
fill(255);        //white
strokeWeight(2);
stroke(0);
rect(0,0,120,90);     //chart background
line(10,20,10,80);        //axis
line(10,80,100,80);
fill(255,0,0);     //red
textSize(20);
text("CASES", 30,20);
strokeWeight(5);
var ttl = makeTurtle(12,78);       //create a turtle
ttl.setWeight(5);
ttl.setColor(color(255,0,0));      //red
ttl.left(45);      //making graph line
ttl.forward(30);
ttl.right(90);
ttl.forward(15);
ttl.left(90);
ttl.forward(c);
c+=2       //chart is going up
pop();
}

function TVAnxiety(){
if(frameCount % 4 == 0){       //every 4 frames, make new germ
virus.push(makeGerm(200,150));
}

for(var i=0;i<virus.length;i++){        //move and show germs
virus[i].show();
virus[i].move();
}

count+=1;
}

function makeGerm(startX,startY){               //germ constructor
var germ = {x: startX,
y:startY,
dx: random(-10,10),     //speeds
dy:random(-10,10),
color:color(0),
moving:true,
show: showGerm,
move: moveGerm
}
return germ;
}

function showGerm(){        //germ drawing
push();
fill(6,158,31);     //dark green

var t=makeTurtle(this.x,this.y)     //make a turtle for each germ
t.setWeight(5);
t.setColor(color(6,158,31));        //dark green

for(var i=0;i<7;i++){               //creating the "spikes"
t.raisePen();
t.back(this.breadth-5);     //going back to center, turning
t.right(60);
t.lowerPen();
}
pop();
}

function moveGerm(){

if(this.moving==true){      //move germ diagonally
this.x += this.dx;
this.y += this.dy;
}

if(this.x>width - count || this.x<0+count || this.y>height-count || this.y<0+count){      //if it hits a boundary, defined by a count
this.moving=false;
}
}

function syringe(){
push();
rectMode(CENTER);
translate(mouseX,mouseY);
fill(220);      //light gray
rect(0,0,20,50);        //bottle
rectMode(CORNER);
rect(-5,25,10,5);       //cap
rect(-10,25,20,2);
fill(247,131,236);      //pink
rect(-10,0,20,25);      //syringe liquid
strokeWeight(2);
stroke(220);        //gray
line(0,-25,0,-50);      //needle
pop();
}

function sceneThree(){
fill(250,240,191);      //beige
rect(0,0,width,height);        //background
paint();
clock(300,100);
fill(164,115,1);        //brown
rect(0,250,width,height);     //floor
fill(245,217,152);        //white-beige
rect(width-20,0,20,height);       //wall
table(180,160);
fill(121,61,2);     //dark brown
rect(375,115,5,155);        //door(closed)

push();
frameRate(20)

if(frameCount<=320){        //animating me walking
if(frameCount%4 ==0){       //alternating animations
EamonnWalk(EamonnX,130);
}else{
EamonnStand(EamonnX,130);
}
EamonnX+=2      //moving me
}

if(frameCount>=320 & frameCount<340){      //reaching out to the door
arm();
EamonnStand(335,130);
}

if(frameCount>330 & frameCount<360){
fill(121,61,2);     //dark brown
rect(315,115,60,155);       //door(open)
fill(232,219,108);      //gold
ellipse(325,200,9,9);       //knob
}

if(frameCount==310){
doorclose.play();
}

pop();
}
//functions for scene three
function EamonnStand(x,y){
push();
translate(x,y);
fill(255,220,200);        //beige
rect(-4,0,8,20);      //neck
fill(242,201,69);       //golden brown
ellipse(-6,0,13,27);        //hair
ellipse(4,-10,27,10);
fill(176,58,58);        //maroon
rect(-13,20,25,60,15);      //shirt
fill(0);        //black
fill(176);      //gray
rect(-8,20,15,50,15);       //arm
fill(255,220,200);      //beige
ellipse(-1,70,15);      //hand
fill(186);      //gray
rect(-13,130,30,10,10);     //shoe
pop();
}

function EamonnWalk(x,y){
push();
translate(x,y);
fill(255,220,200);
ellipse(0,0,29);
rect(-4,0,8,20);
fill(242,201,69);
ellipse(-6,0,13,27);
ellipse(4,-10,27,10);
fill(176,58,58);
rect(-13,20,25,60,15);
fill(0);
fill(176)
rect(-8,20,15,50,15);
fill(255,220,200)
ellipse(-1,70,15)
fill(186,186,186);
rect(-15,130,30,10,10);
rect(-7,130,30,10,10);
pop();
}

function arm(){
push();
fill(176);
rect(180,320,15,50,15);     //arm reaching out to door
pop();

fill(255,220,200);       //beige
ellipse(366,196,15);     //hand
}

function clock(x,y){
push();
translate(x,y);
var shake = random(-3,3);       //to shake the clock
fill(0);
ellipse(0+shake,0+shake,50,50);     //clock
fill(255);
ellipse(0+shake,0+shake,r,r);
frameRate(20);
var clockX = r/2 * cos(radians(theta));
var clockY = r/2 * sin(radians(theta));
stroke(0);
line(0+shake, 0+shake, clockX, clockY);       //clock hand
theta +=10;     //turn the hand
pop();
}

function table(x,y){
push();
translate(x,y);
fill(121,61,2);     //brown
rect(0,0,60,70);        //body
rect(0,70,10,30);       //legs
rect(50,70,10,30);
pop();
}

function paint(){           //draw function for paint object

push();
x.push(mouseX);     //draw  a line to where the mouse is
y.push(mouseY);

for (var i=0; i < x.length-1; i++) {
strokeWeight(map(mouseY,0,height,0,10));        //chamge stroke weight with y position
stroke(color(random(255),random(255),random(255)));     //change color randomly
line(x[i],y[i],x[i+1],y[i+1]);      //draw line from one position to next (mouse positions)
}
pop();
}

//functions for the final scene
function finalScene(){
sunset(2);
fill(255,252,229);      //white-yellow
ellipse(200,200,50,50);     //sun
hills();
fill(189);      //gray

removeFlock();
newFlock();

removeCar();
newCar();
//showing and moving objects
for(var i=0;i<trees2.length;i++){
trees2[i].show();
}
for(var i=0;i<cars.length;i++){
cars[i].show();
cars[i].move();
}
for(var i=0;i<trees.length;i++){
trees[i].show();
}
for(var i=0;i<flocks.length;i++){
flocks[i].show();
flocks[i].move();
}

fill(240,221,159,60);    //opaque orange
rect(0,0,width,height);   //create haze

rocks();
relief();
Eamonn3(260,200);
textSize(20);
fill(0,0,255);
text("THE END",300,100);

}

function sunset(size) {
var green=215;
var blue=238;
var red=141

for (var y = size/2; y < height + 50; y += size) {      //nested loop for grid
for (var x = size/2; x < width + 50; x += size) {
fill(red,green,blue);
rect(x, y, size, size);
}
green +=(100/(height/size));
blue -=(50/(height/size));
}
}

function makeTree(startX,startY){      //tree constructor
var tree = {x: startX,
y:startY,
color: color(random(130,200),random(100,150),0),
show: showTree
}
return tree;
}

function showTree(){
push();
translate(this.x, this.y);        //appear at width,280
fill(121,90,5);     //gray
fill(this.color);
ellipse(2,-30,20,20);      //leaves
pop();
}

function removeCar(){               //remove car from  array once out of sight
var carsToKeep = [];
for (var i = 0; i < cars.length; i++){
if (cars[i].x > 0) {
carsToKeep.push(cars[i]);
}
}
cars = carsToKeep;
}

function newCar() {     //create a new car at a given probability
var newCarChance = 0.05;
if (random(0,1) < newCarChance) {
cars.push(makeCar(width));      //create new car at the edge
}
}

function moveCar(){
this.x += this.speed;   //mpve cars
}

function showCar(){
push();
noStroke();
translate(this.x, 260);
fill(this.color)

if(this.speed>0){
rect(25,0,10,10);        //car facing right
}else{
rect(-10,0,10,10);        //car facing left
}

fill(0);       //black
ellipse(5,10,10,10);       //wheels
ellipse(25,10,10,10);
pop();

}

function makeCar(startX){
var car = {x: startX,
height:random(15,20),
speed: random(-5,5),
color: color(random(0,255),random(0,255),random(0,255)),
move: moveCar,
show: showCar
}
return car;
}

function moveFlock(){
this.x += this.speed;       //move horizontally
this.y -= this.speed/2;
}

function removeFlock(){
var flocksToKeep = [];
for (var i = 0; i < flocks.length; i++){
if (flocks[i].x > 0) {
flocksToKeep.push(flocks[i]);
}
}
flocks = flocksToKeep;
}

function newFlock() {
var newFlockChance = 0.01;
if (random(0,1) < newFlockChance) {
flocks.push(makeFlock(0,random(0,200)));
}
}

function showFlock(){
push();
stroke(0);
translate(this.x,this.y);
for(var i=0;i<this.numBirds;i++){
line(0+(2*i)+random(-1,1),0+(2*i),5+(2*i),5+(2*i));     //wings of birds
line(5+(2*i),5+(2*i),10+(2*i),0+(2*i)+random(-1,1));
}
pop();
}

function makeFlock(startX,startY){
var flock = {x: startX,
y: startY,
numBirds: random(3,7),
speed:2,
move: moveFlock,
show: showFlock
}
return flock;
}

function hills(){
beginShape();
noStroke();
fill(60,131,67);        //green
for (i=0;i<width/5; i++){
curveVertex(i*5,landscape[i])       //creates slopes by connecting two points
curveVertex((i+1)*5,landscape[i+1]);

}

curveVertex(width,height);      //stable values that create the green fill
curveVertex(0,height);
endShape(CLOSE);        //end shape and fill it
}

function rocks(){
beginShape();
noStroke();
fill(129);        //gray
for (i=0;i<width/5; i++){
curveVertex(i*5,rock[i])       //creates slopes by connecting two points
curveVertex((i+1)*5,rock[i+1]);

}

curveVertex(width,height);      //stable values that create the gray fill
curveVertex(0,height);
endShape(CLOSE);        //end shape and fill it
}

function relief(){
if(frameCount % 10 == 0){       //every 4 frames, make new Bubble
reliefBubbles.push(makeBubble(260,200));
}

for(var i=0;i<reliefBubbles.length;i++){        //move and show Bubbles
reliefBubbles[i].show();
reliefBubbles[i].move();
}
}

function makeBubble(startX,startY){     //bubble constructor
var bubble = {x: startX,
y:startY,
opacity:255,
size:10,
show: showBubble,
move: moveBubble
}
return bubble;
}

function showBubble(){
push();
fill(220,this.opacity);     //light gray
ellipse(this.x,this.y,this.size,this.size);       //germ body
pop();
}

function moveBubble(){
this.size+=1;       //grow bubbles
}

function Eamonn3(x,y){
push();
translate(x,y);
fill(255,220,200);        //beige
rect(-8,12,15,15);        //neck
fill(242,201,69);     //golden brown
ellipse(0,-2,38,35);      //hair
push();
fill(0);
rect(63,0,25,70,15);
rect(-87,0,25,70,15)
pop();
fill(176,58,58);
rect(-23,25,45,70,15);

pop();
}

function mousePressed(){
if(frameCount<100){                     //play drawer sound if mouse is pressed on drawer
if(mouseX>110 & mouseX<180 && mouseY>220 && mouseY<250){
drawer.play();
}
}

germShot = -1;
for (var i = 0; i < virus.length; i++) {
var d = dist(mouseX, mouseY,
virus[i].x, virus[i].y)
if (d < virus[i].breadth) {     //if clicked within a given germ
germShot = i;       //pass this index to the splice function
}
}

}
//turtle code, courtesy of Tom Cortina

function makeTurtle(tx, ty) {
var turtle = {x: tx, y: ty,
angle: 0.0,
penDown: true,
color: color(128),
weight: 1,
left: turtleLeft, right: turtleRight,
forward: turtleForward, back: turtleBack,
lowerPen: turtleLowerPen, raisePen: turtleRaisePen,
goto: turtleGoTo, angleto: turtleAngleTo,
turnToward: turtleTurnToward,
distanceTo: turtleDistTo, angleTo: turtleAngleTo,
setColor: turtleSetColor, setWeight: turtleSetWeight,
face: turtleFace};
return turtle;
}

function turtleLeft(d) {
this.angle -= d;
}

function turtleRight(d) {
this.angle += d;
}

function turtleForward(p) {
var newx = this.x + cos(rad) * p;
var newy = this.y + sin(rad) * p;
this.goto(newx, newy);
}

function turtleBack(p) {
this.forward(-p);
}

function turtleLowerPen() {
this.penDown = true;
}

function turtleRaisePen() {
this.penDown = false;
}

function turtleGoTo(newx, newy) {
if (this.penDown) {
stroke(this.color);
strokeWeight(this.weight);
line(this.x, this.y, newx, newy);
}
this.x = newx;
this.y = newy;
}

function turtleDistTo(x, y) {
return sqrt(sq(this.x - x) + sq(this.y - y));
}

function turtleAngleTo(x, y) {
var absAngle = degrees(atan2(y - this.y, x - this.x));
var angle = ((absAngle - this.angle) + 360) % 360.0;
return angle;
}

function turtleTurnToward(x, y, d) {
var angle = this.angleTo(x, y);
if (angle < 180) {
this.angle += d;
} else {
this.angle -= d;
}
}

function turtleSetColor(c) {
this.color = c;
}

function turtleSetWeight(w) {
this.weight = w;
}

function turtleFace(angle) {
this.angle = angle;
this.angle %= 360;
}
``````

## Generative Beach Landscape

When I saw the prompt for the project this week, I immediately thought of doing something with a noise function. I felt as though mountains wouldn’t allow for enough variability, so I decided to do a beach. I laid out the very basic sand, water, and sky, and then added embellishing elements to try to create a drive by beach scene.

Beach
``````var boats = [];     //arrays to hold respective objects
var clouds = [];
var umbrellas = [];
var planes = [];
var buildings = [];
var railings = [];
var people = [];
var towels = [];
var landscape = [];     //array that creates slope of shoreline
var noiseParam = 0;
var noiseStep = 0.005;      //defines extremity of shoreline slope

function setup() {
createCanvas(480,300);

for (var i = 0; i < 3; i++){        //make a certain amount of (object) to start out, at random locations within a constraint
var rx = random(width);
var ry = random(80,150)
boats[i] = makeBoat(rx,ry);
}

for (var i = 0; i < 3; i++){
var Cx = random(width);
var Cy = random(0,60)
clouds[i] = makeCloud(Cx,Cy);
}

for (var i = 0; i < people.length; i++){
var Tx = random(width);
var Ty = random(250,300)
towels[i] = makeTowel(Tx,Ty);
}
for (var i = 0; i < people.length; i++){
var Px = random(width);
var Py = random(250,300)
people[i] = makePerson(Px,Py);
}

for (var i = 0; i < 5; i++){
var Ux = random(width);
var Uy = random(250,300)
umbrellas[i] = makeUmbrella(Ux,Uy);
}

for (var i = 0; i < 15; i++){
var Bx = random(width);
buildings[i] = makeBuilding(Bx);
}

for (var i = 0; i < 0.9; i++){
var Px = random(width);
var Py = random(0,20)
planes[i] = makePlane(Px,Py);
}

for(var i = 0;i <= width / 5;i++){
var n = noise(noiseParam);       //picks value 0-1
var value = map(n,0,1,50,height);        //scales it to the canvas size

noiseParam += noiseStep;      //moves to the right for the next point in the array
}

frameRate(5);
}

function draw() {
background(3,220,245);

fill(13,66,212,230);    //dark blue
rect(0,height / 4,width,height);      //body of water
fill(227,232,164,175);  //pale beige
rect(0,height / 4-7,width,7);    //distant shoreline

//call the functions to spawn and despawn respective obejcts
removeBoat();
newBoat();

removeCloud();
newCloud();

removeUmbrella();

removePlane();
newPlane();

removeBuilding();
newBuilding();

removeRailing();
newRailing();

removePerson();

removeTowel();

//call the move and show functions to continually draw and redraw objects after updated coordinates
for (var i = 0; i < clouds.length; i++){
clouds[i].move();
clouds[i].show();
}

for (var i = 0; i < buildings.length; i++){
buildings[i].move();
buildings[i].show();
}

for (var i = 0; i < boats.length; i++){
boats[i].move();
boats[i].show();
}

displayHorizon();

for (var i = 0; i < towels.length; i++){
towels[i].move();
towels[i].show();
}

for (var i = 0; i < people.length; i++){
people[i].move();
people[i].show();
}

for (var i = 0; i < umbrellas.length; i++){
umbrellas[i].move();
umbrellas[i].show();
}

for (var i = 0; i < planes.length; i++){
planes[i].move();
planes[i].show();
}

fill(159,159,159);
rect(0,height-50,width,40);
fill(110,110,110);
rect(0,height-45,width,30);

for (var i = 0; i < railings.length; i++){
railings[i].move();
railings[i].show();
}
}

//functions to remove an object from a displayed array once "out of sight"
function removeBoat(){

var boatsToKeep = [];    //the boats that should still be displayed
for (var i = 0; i < boats.length; i++){
if (boats[i].x + boats[i].breadth > 0) {    //if the boat is closer than it's width to the edge
boatsToKeep.push(boats[i]);     //add this boat to the boats that will be displayed
}
}
boats = boatsToKeep; // only display the baots currently being kept
}

function removeCloud(){
var cloudsToKeep = [];
for (var i = 0; i < clouds.length; i++){
if (clouds[i].x + clouds[i].breadth > 0) {
cloudsToKeep.push(clouds[i]);
}
}
clouds = cloudsToKeep;
}

function removeUmbrella(){
var umbrellasToKeep = [];
for (var i = 0; i < umbrellas.length; i++){
if (umbrellas[i].x + umbrellas[i].breadth > 0) {
umbrellasToKeep.push(umbrellas[i]);
}
}
umbrellas = umbrellasToKeep;
}

function removePlane(){
var planesToKeep = [];
for (var i = 0; i < planes.length; i++){
if (planes[i].x + 150 > 0) {
planesToKeep.push(planes[i]);
}
}
planes = planesToKeep;
}

function removeBuilding(){
var buildingsToKeep = [];
for (var i = 0; i < buildings.length; i++){
if (buildings[i].x > 0) {
buildingsToKeep.push(buildings[i]);
}
}
buildings = buildingsToKeep;
}

function removeRailing(){
var railingsToKeep = [];
for (var i = 0; i < railings.length; i++){
if (railings[i].x > 0) {
railingsToKeep.push(railings[i]);
}
}
railings = railingsToKeep;
}

function removePerson(){
var peopleToKeep = [];
for (var i = 0; i < people.length; i++){
if (people[i].x > 0) {
peopleToKeep.push(people[i]);
}
}
people = peopleToKeep;
}

function removeTowel(){
var towelsToKeep = [];
for (var i = 0; i < towels.length; i++){
if (towels[i].x > 0) {
towelsToKeep.push(towels[i]);
}
}
towels = towelsToKeep;
}

//functions to create new objects that come into sight

function newBoat() {

var newBoatChance = 0.009;      //the chance that a new boat will appear
if (random(0,1) < newBoatChance) {      //activate probability
boats.push(makeBoat(width,random(100,150)));        //add a new boat if the porbability condition is met
}
}
function newCloud() {

var newCloudChance = 0.001;
if (random(0,1) < newCloudChance) {
clouds.push(makeCloud(width,random(0,60)));
}
}

function newPlane() {

var newPlaneChance = 0.003;
if (random(0,1) < newPlaneChance) {
planes.push(makePlane(width, random(0,50)));
}
}

function newBuilding() {

var newBuildingChance = 0.1;
if (random(0,1) < newBuildingChance) {
buildings.push(makeBuilding(width));
}
}

function newRailing() {

var newRailingChance = 0.8;
if (frameCount % 2 == 0 & random(0,1) < newRailingChance) {    //spawn every two frames, if probability condition is met
railings.push(makeRailing(width));
}
}

//functions to move the objects across the screen
function moveBoat() {
this.x += this.speed;       //add a speed value to the the x position to chance it every frame
}

function moveCloud(){
this.x += this.speed;
}

function moveUmbrella(){
this.x += this.speed;
}

function movePlane(){
this.x += this.speed;
}

function moveBuilding(){
this.x += this.speed;
}

function moveRailing(){
this.x += this.speed;
}

function movePerson(){
this.x += this.Xspeed;
this.y += this.Yspeed/3;       //move very slightly in Y direction
}

function moveTowel(){
this.x += this.speed;
}

//functions to show (object) by drawing it at the requested coordinates
function showBoat() {

var floorHeight = 10;
push();
translate(this.x, this.y);      //plot the drawing at the the coordinates given
noStroke();
for (var i = 0; i < this.nFloors; i++) {
fill(this.color,this.y*2);  //random color, with varying opacity based on y value (distance from viewer)
rect(0, -15 - (i * floorHeight), this.breadth-10*i, 10);        //the boat levels
if(this.nFloors == 3){
fill(255,this.y*2);     //white, varying opacity
rect(3,-15-(i*floorHeight), this.breadth-12*i,7)        //to make a "yacht"
}
if(this.nFloors == 2){
fill(161,227,238,this.y*2);     //light blue, varying opacity
}
if(this.nFloors == 1){
strokeWeight(5);
stroke(this.color,this.y*2);        //rnadom color of boat, varying opacity
line(7,0-(floorHeight),-6,-15-(floorHeight));   //fishing gig
strokeWeight(2);
line(-6,-15-(floorHeight),random(-12,-16),5-(floorHeight));     //fishing line
}

}
pop();
}

function showCloud(){

var cloudHeight = 10;       //height of a cloud
var cHeight = this.nClouds * cloudHeight;       //height dpends on how many clouds
fill(255,200);      //pale white
noStroke();
push();
translate(this.x, this.y);      //appear at width, and random y in a constraint
for (var i = 0; i < this.nClouds; i++) {
ellipse(0, -15 - (i * cHeight), this.breadth-10, 30);      //draw cloud
}
pop();

}

function showUmbrella(){

var umbrellaHeight = 10;
noStroke();
push();
translate(this.x, this.y+15);       //appear at width, random y between shoreline and height(adjusted to ensure no umbrellas in water)
noStroke();
fill(255);      //white
fill(this.color);   //random color
arc(0,10,40,40,180,TWO_PI);     //umbrella dome
pop();
}

function showPlane(){

push();
translate(this.x, this.y);      //appear at width, random y within constraint
noStroke();
scale(this.scale);      //scale randomly
fill(220,this.scale*400);       //opacity deoends on size
ellipse(50,42.5,10,30);     //plane body and wings
ellipse(50,50,50,15);
ellipse(50,60,10,30);
fill(50,this.scale*400);     //dark gray, varying opacity
ellipse(33,47,4,4);     //cockpit window

for(var x=39;x < 55;x+=4)     //plane windows
ellipse(x,50,4,4);

strokeWeight(1);
stroke(0,this.scale*400);      //black
line(55,57.5,110,57.5);     //flag ropes
line(55,42.5,110,42.5);
fill(this.color);   //random color
noStroke();
rect(110,37.5,45+random(-2,2),25);  //flag, moving
pop();
}

function showBuilding(){

// var floorHeight = 2;        //height of a floor
//var buildingHeight = this.nFloors * floorHeight;        //building height depends on how many floors
fill(this.color);

push();
noStroke();
translate(this.x, 70);      //appear at width,70 (far shoreline)
rect(0, -10, this.breadth, this.height*2);         //draw building
pop();

}

function showRailing(){

push();
translate(this.x, 280);        //appear at width,280
fill(200,200,200);     //gray
stroke(0);     //black
pop();

}

function showPerson(){

push();
translate(this.x, this.y+20);       //appear at width, and a random heught between shoreline and bottom of canvas(adjusted to ensure nobody in the water)
fill(this.skinColor);    //random brown tone
rectMode(CENTER);
fill(this.shirtColor);      //random color
fill(this.pantsColor);      //random color
pop();
}

function showTowel(){

push();
translate(this.x, this.y+30);        //appear at width, random y between shoreline and height
fill(this.towelColor);       //random color
pop();
}

//constructors for each object

function makeBoat(startX,startY) {
var boat = {x: startX,      //where it gets translated to
y:startY,
speed: random(-2,-0.1),     //how fast it moves across canvas
nFloors: round(random(1,3)),    //how many floors there are
color: random(150,255),     //color of boat
move: moveBoat,     //functions to move and show the boat
show: showBoat}
return boat;
}

function makeCloud(startX,startY){
var cloud = {x: startX,
y:startY,
speed: random(-0.7,-0.3),
nClouds: round(random(1,3)),
move: moveCloud,
show: showCloud}
return cloud;
}

function makeUmbrella(startX,startY){
var umbrella = {x: startX,
y:startY,
speed: round(random(-5,-4.99)),
height: random(25,30),
color: color(random(0,255),random(0,255),random(0,255)),       //color of hood
angle: random(-20,20),      //angle of hood rotation
move: moveUmbrella,
show: showUmbrella
}
return umbrella;
}

function makePlane(startX,startY){
var plane = {x: startX,
y:startY,
scale: random(1 / 4,1),       //size of plane
speed: random(-7,-5),
color: color(random(0,255),random(0,255),random(0,255)),
move: movePlane,
show: showPlane
}
return plane;
}

function makeBuilding(startX){
var building = {x: startX,
height:10,
speed: -1.0,
color: random(50,200),
//distance: random(100,200),
//nFloors: round(random(2,8)),
move: moveBuilding,
show: showBuilding
}
return building;
}

function makeRailing(startX){
var railing = {x: startX,
speed: -20,
move: moveRailing,
show: showRailing
}
return railing;
}

function makePerson(startX,startY){
var person = {x: startX,
y:startY,
height: random(14,17),
skinColor: color(random(200,250),random(100,150),random(20,100)),
shirtColor: color(random(0,255), random(0,255),random(0,255)),
pantsColor: color(random(0,255), random(0,255),random(0,255)),
Xspeed: random(-7,-4),
Yspeed: random(-0.5,0.5),
move: movePerson,
show: showPerson}
return person;
}

function makeTowel(startX,startY){
var towel = {x: startX,
y:startY,
height: random(5,15),
towelColor: color(random(0,255), random(0,255),random(0,255)),
speed: -5,
move: moveTowel,
show: showTowel}
}

function displayHorizon(){
landscape.shift();      //removes the first array element

n = noise(noiseParam);       //selecting a noise value
value = map(n,0,1,50,height);       //plotting it onto the canvas by mapping

landscape.push(value);      //adding it to the lanscape array

push();
beginShape();
noStroke();
fill(227,232,164);        //green
for (i=0;i<width/5; i++){
var newUmbrellaChance = 0.001;      //frequencies for objects
var newPersonChance = 0.003;
var newTowelChance = 0.002;
var r = random(0,1);     //predictor

if (r < newUmbrellaChance){
umbrellas.push(makeUmbrella(width,random(landscape[i],height)));                //construct an object between slope line and the bottom of the canvas
}
if(r<newPersonChance){
people.push(makePerson(width,random(landscape[i],height)));
}
if(r<newTowelChance){
towels.push(makeTowel(width,random(landscape[i],height)));
}

curveVertex(i*5,landscape[i])       //creates slopes by connecting two points
curveVertex((i+1)*5,landscape[i+1])

}

curveVertex(width,height+50);      //stable values that create the green fill
curveVertex(0,height+50);
endShape(CLOSE);        //end shape and fill it
pop();
}

``````

## Dynamic Factory

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
}
fill(150);
rect(0,0,50,50);		//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){
}
fill(150);
rect(0,0,50,50);
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
rectMode(CENTER);
noStroke();
rect(0,0,50,50);
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){
}
rect(0,0,50,50);
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){
}
fill(150);
rect(0,0,50,50);
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){
}
fill(150);
rect(0,0,50,50);
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){
}
fill(150);
rect(0,0,50,50);
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){
}
fill(150);
rect(0,0,50,50);
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){
}
fill(150);
rect(0,0,50,50);
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

}

}
``````