[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

COVID-19 Story

eddie — Wed, 10 Nov 2021 03:35:32 +0000

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 preload() {                                          //loading sounds
    anxiety = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/Anxiety.wav");
    sing = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/birds.wav");
    doorclose = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/doorclose.m4a");
    alarm = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/clock.wav");
    squish = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/squish.wav")
    drawer = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/drawer.wav")

}

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

        landscape.push(value);      //adds to array
        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

        rock.push(value2);      //adds to array
        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
                quad(30,0,30,3,43,-20,41,-23);    //screen
    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
                ellipse(2,0,29);        //head
                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();
            rotate(radians(-80));       //reaching out to laptop
                rect(-40,5,15,50,15);   //arm
        pop();
            fill(255,220,200);      //beige
                ellipse(47,41,15);      //head

    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
            ellipse(bx,by,12,15);       //head
        fill(138,102,18);       //light brown
            ellipse(bx,by-10,10,10);
        }
    pop();
}

function computerAnxiety(){
    var EamonnHeadX = 295;      //coordinates of my head
    var EamonnHeadY = 160;
    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.turnToward(EamonnHeadX, EamonnHeadY, 80);    //move toward my head
        t2.turnToward(EamonnHeadX, EamonnHeadY, 20);
        t3.turnToward(EamonnHeadX, EamonnHeadY, 50);
        t4.turnToward(EamonnHeadX, EamonnHeadY, 60);
        t5.turnToward(EamonnHeadX, EamonnHeadY, 70);
        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;iwidth - 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);
        rotate(radians(45));
        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
                ellipse(0,0,29);      //head
                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    
                quad(-13,70,12,70,9,130,-10,130);       //leg
            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);
                quad(-13,70,12,70,-5,130,-24,130);      //legs
                quad(-13,70,12,70,25,130,5,130);
            fill(176)
                rect(-8,20,15,50,15);
            fill(255,220,200)
                ellipse(-1,70,15)
            fill(186,186,186);
                rotate(radians(5));     //rotated shoes
                    rect(-15,130,30,10,10);
                rotate(radians(-10));
                    rect(-7,130,30,10,10);
    pop();
}

function arm(){
    push();
        fill(176);
            rotate(radians(-35));
                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
        rect(0,260,width,20);       //road

    removeFlock();
    newFlock();

    removeCar();
    newCar();
                                       //showing and moving objects
    for(var i=0;i 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)            
            rect(0,-7,this.breadth,this.height);        //body of car

        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,
                  breadth:25,
                  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;i110 & 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 rad = radians(this.angle);
    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

eddie — Wed, 10 Nov 2021 03:15:04 +0000

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

            landscape.push(value);      //adds to array
            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
                rect(5,-13-(floorHeight),this.windowBreadth,7);     //window
        }
        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
            rect(0,0, this.breadth, this.height);       //umbrella stand
        fill(this.color);   //random color
        rotate(radians(this.angle));    //turn at different angles
            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
             rect(0, -20,this.breadth,20);      //draw railing markers
    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   
                ellipse(0,-5,5,5);        //head
        rectMode(CENTER);
            fill(this.shirtColor);      //random color
                rect(0,10,this.breadth,this.height);       //body
            fill(this.pantsColor);      //random color
                rect(0,25,this.breadth,this.height);       //legs 
    pop();
}

function showTowel(){

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

                                    //constructors for each object

function makeBoat(startX,startY) {
    var boat = {x: startX,      //where it gets translated to
                y:startY,
                breadth: round(random(20,40)),  //it's width
                windowBreadth: random(5,10),    //window width  
                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,
                breadth: round(random(60,100)),
                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,
                breadth: round(random(2,4)),
                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,
                       breadth: 10,
                       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,
                   breadth:10,
                   speed: -20,
                   move: moveRailing,
                   show: showRailing
            }
    return railing;
}

function makePerson(startX,startY){
      var person = {x: startX,
                    y:startY,
                    breadth: random(5,8),
                    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,
                    breadth: random(10,20),
                    height: random(5,15),
                    towelColor: color(random(0,255), random(0,255),random(0,255)),
                    speed: -5,
                    move: moveTowel,
                    show: showTowel}
   return towel;
}




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
noiseParam+=noiseStep;      //adding step to parameter

push();
    beginShape();
        noStroke();
            fill(227,232,164);        //green
                for (i=0;i



Dynamic Factory
eddie — Wed, 10 Nov 2021 03:04:20 +0000

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.



FactoryEamonnvar 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

	
}

}




Beach
eddie — Thu, 17 Dec 2020 22:16:39 +0000





beachesvar 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

            landscape.push(value);      //adds to array
            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)




Final Project
TaterT — Thu, 17 Dec 2020 05:12:18 +0000

sketch/*
 * Michelle Kim
 * michell4
 * Section B
 */

var count = 0;
var clouds = [];
var opacity = 0;

var hearts;
var hornet;
var blm;
var vote;
var covid;
var crowd;

var alarm;
var yawn;
var shower;
var gettingReady;
var ready;
var cameraShutter;
var hornetSound;
var blmSound;

var hornetX = 600;
var blmX = 600;
var voteX = 600;
var covidX = 600;
var crowdX = 600;

function preload() {
    //preloads all images and sounds
    hearts = loadImage("https://i.imgur.com/WArKv90.gif");
    hornet = loadImage("https://i.imgur.com/WSVUTau.png");
    blm = loadImage("https://i.imgur.com/JAVgfbG.png");
    vote = loadImage("https://i.imgur.com/sRU4uIO.png");
    covid = loadImage("https://i.imgur.com/BY6kaKa.jpg");
    crowd = loadImage("https://i.imgur.com/63dcnGS.png");
    tear = loadImage("https://i.imgur.com/ie45BVh.png");

    alarm = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/alarm.wav");
    yawn = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/yawn-1.wav");
    shower = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/shower.wav");
    gettingReady = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/gettingready.wav");
    ready = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/ready.wav");
    huh = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/huh.wav");
    cameraShutter = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/camerashutter.wav");
    ding = loadSound("hhttps://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/ding.wav");
    hornetSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/hornetsound.wav");
    blmSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/blmsound.wav");
    ehSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/eh.wav");
    cough = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/cough.wav");
    awSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/aw.wav");
}

function setup() {
    createCanvas(600, 600);
    useSound();
    background(220);
    for(var i = 0; i < 3; i++){
        var initialX = random(width);
        var initialY = random(0, 200);
        clouds[i] = makeClouds(initialX, initialY);
    }
    frameRate(3);
}

function soundSetup() {
    alarm.setVolume(0.2);
    yawn.setVolume(0.3);
    shower.setVolume(0.2);
    gettingReady.setVolume(0.2);
    ready.setVolume(0.2);
    huh.setVolume(0.3);
    hornetSound.setVolume(0.3);
    blmSound.setVolume(0.2);
    cameraShutter.setVolume(0.2);
    ding.setVolume(0.3);
    ehSound.setVolume(0.8);
    cough.setVolume(0.2);
    awSound.setVolume(0.2);
}

function draw() {
    background(171, 245, 255);
    //opening scene
    if (count < 10) {
        fill(0);
        square(0, 0, width);
        textSize(30);
        textFont("Helvetica");
        fill(255);
        text("One fine morning...", 150, (height / 2));
    }
    //alarm ringing
    if (count >= 10 & count < 20) {
        clock();
        if (count == 10) {
            alarm.play();
        }
        if (count == 17) {
            yawn.play();
        }
    }
    //character getting ready
    if (count >= 20 & count < 30) {
        fill(0);
        square(0, 0, width);
        if (count == 20) {
            shower.play();
        }
        if (count == 25) {
            shower.stop();
            gettingReady.play();
        }
        if (count == 28) {
            gettingReady.stop();
        }
        if (count == 25) {
            ready.play();
        }
    }
    //boy introduction
    if (count >= 30 & count < 40) {
        boy();
        if (count >= 35 & count < 38) {
            image(hearts, 430, 310, width * 0.1, height * 0.1);
        }
    }
    //clouds
    if (count >= 40) {
        updateClouds();
        removeClouds();
        addClouds();
    }
    //boy on phone
    if (count >= 40 & count < 70) {
        boyWalking();
    }
    //hornet
    if (count >= 40 & count < 105) {
        image(hornet, hornetX, 300, width * 0.05, height * 0.05);
        hornetX -= 10;
        if (count == 40) {
            hornetSound.play();
        }
        if (count >= 55 & count < 60) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 56) {
                huh.play();
            }
        }
    }
    //snap of hornet
    if (count >= 70 & count < 75) {
        phonePicture();
        image(hornet, 240, 250, width * 0.2, height * 0.2);
        if (count == 73) {
            cameraShutter.play();
        }
    }
    //boy walking after hornet
    if (count >= 75 & count < 165) {
        boyWalking();
        if (count >= 80 & count < 100) {
            image(hearts, random(150, 170), random(400, 420),
                  width * 0.2, height * 0.2);
            bubble();
            textSize(40);
            textFont("Helvetica");
            fill(150);
            text("Woah!", 295, 415);
        }
        if (count == 80) {
            ding.play();
        }
    }
    //blm protest
    if (count >= 110 & count <= 220) {
        image(blm, blmX, 200, width, height);
        if (count == 110) {
            blmSound.play();
        }
        if (count == 220) {
            blmSound.stop();
        }
        if (count >= 140 & count < 145) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 141) {
                huh.play();
            }
        }
        blmX -= 10;
        if (count < 165 || count > 170) {
        boyWalking();
        }
    }
    //snap of blm protest
    if (count >= 165 & count < 170) {
        phonePicture();
        image(blm, 175, 250, width * 0.4, height * 0.35);
        if (count == 168) {
            cameraShutter.play();
        }
    }
    //boy walking after blm protest
    if (count >= 220) {
        boyWalking();
    }
    if (count >= 190 & count < 210) {
        image(hearts, random(150, 170), random(400, 420),
              width * 0.2, height * 0.2);
        bubble();
        textSize(30);
        textFont("Helvetica");
        fill(150);
        text("Inspiring!", 290, 410);
        if (count == 190) {
            ding.play();
        }
    }
    //vote sign
    if (count >= 225 & count < 320) {
        noStroke(0);
        fill(0);
        rect(voteX + 140, 400, 20, 400);
        image(vote, voteX, 250, width * 0.5, height * 0.5);
        voteX -= 10;
        if (count < 265 || count > 270) {
        boyWalking();
        }
        if (count >= 250 & count < 255) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 251) {
                huh.play();
            }
        }
        if (count >= 280 & count < 300) {
            image(hearts, random(150, 170), random(400, 420),
                  width * 0.2, height * 0.2);
            bubble();
            textSize(25);
            textFont("Helvetica");
            fill(150);
            text("Awesome!", 290, 410);
            if (count == 280) {
                ding.play();
            }
        }
    }
    //snap of vote sign
    if (count >= 265 & count < 270) {
        phonePicture();
        image(vote, 210, 230, width * 0.3, height * 0.3);
        if (count == 268) {
            cameraShutter.play();
        }
    }
    //covid sign
    if (count >= 325 & count < 420) {
        noStroke();
        fill(0);
        rect(covidX + 50, 200, 5, 400);
        rect(covidX + 250, 200, 5, 400);
        image(covid, covidX, 100, width * 0.5, height * 0.4);
        covidX -= 10;
        boyWalking();
        if (count == 360) {
            ehSound.play();
        }
        if (count >= 345 & count < 350) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 346) {
                huh.play();
            }
        }
    }
    //crowd
    if (count >= 425 & count < 510) {
        tint(255, 50);
        image(crowd, crowdX, 300, width * 1.1, height * 0.8);
        if (count < 490) {
            crowdX -= 10;
        }
        if (count == 495) {
            cough.play();
        }
        boyWalking();
        if (count >= 505 & count < 510) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 506) {
                huh.play();
            }
        }
    }
    //boy sad face
    if (count >= 510 & count < 520) {
        boyFace();
        if (count >= 15 & count < 520) {
            tint(255, 255);
            image(tear, 250, 320, width * 0.03, height * 0.05);
        }
        if (count == 513) {
            awSound.play();
        }
    }
    //end scene
    if (count >= 520) {
        background(0);
        textFont("Helvetica");
        textSize(50);
        fill(255);
        text("Wear a mask.", 150, 300);
        textSize(20);
        text("Spread awareness.", 210, 340);
    }
    count ++;
}

function clock() {
    background(255);
    stroke(0);
    strokeWeight(20);
    line(180, 180, 200, 200);
    line(400, 200, 420, 180);
    line(290, 125, 310, 125);
    line(300, 125, 300, 150);
    strokeWeight(5);
    //black
    fill(255);
    //bells
    arc(190, 190, 155, 155, radians(140), radians(310), CHORD);
    arc(410, 190, 155, 155, radians(230), radians(40), CHORD);
    fill(0);
    //body
    circle((width / 2), (height / 2), 300);
    //bells
    arc(180, 180, 120, 120, radians(130), radians(320), CHORD);
    arc(420, 180, 120, 120, radians(220), radians(50), CHORD);
    //bells
    circle(132, 132, 30);
    circle(468, 132, 30);
    //legs
    circle(210, 430, 50);
    circle(390, 430, 50);
    //white
    noStroke();
    fill(255);
    //body
    circle((width / 2), (height / 2), 250);
    //black
    stroke(0);
    strokeWeight(5);
    fill(0);
    //inside details
    circle((width / 2), (height / 2), 20);
    line((width / 2), 190, (width / 2), (height / 2));
    line((width / 2), (height / 2), 270, 370);
    //highlights
    stroke(255);
    strokeWeight(5);
    fill(255);
    line(292, 122, 308, 122);
    noFill();
    //bells
    arc(132, 132, 20, 20, radians(150), radians(200));
    arc(468, 132, 20, 20, radians(340), radians(30));
    //body
    arc(290, 280, 250, 230, radians(200), radians(250));
    arc(310, 320, 250, 230, radians(20), radians(70));
    //legs
    arc(210, 430, 30, 30, radians(140), radians(210));
    arc(392, 430, 30, 30, radians(330), radians(40));
}

function boy() {
    background(255);
    stroke(0);
    strokeWeight(3);
    //arms
    fill(255, 245, 215);
    line(180, 380, 220, 390);
    circle(170, 375, 20);
    line(380, 390, 420, 380);
    circle(430, 375, 20);
    //shirt
    fill(174, 255, 242);
    rect(220, 370, 50, 40);
    rect(330, 370, 50, 40);
    quad(270, 330, 330, 330, 360, 470, 240, 470);
    fill(126, 225, 208);
    square(310, 390, 20);
    //face
    fill(255, 245, 215);
    circle(230, (height / 2), 20);
    circle(370, (height / 2), 20);
    circle((width / 2), (height / 2), 140);
    line(300, 215, 300, 230);
    line(290, 220, 300, 230);
    line(310, 220, 300, 230);
    fill(0);
    circle(290, 290, 5);
    circle(310, 290, 5);
    noFill();
    arc(300, 310, 70, 60, 0, radians(180));
    //phone
    fill(0);
    rect(430, 330, 20, 40);
    noFill();
    stroke(255);
    strokeWeight(1);
    rect(432, 332, 16, 30);
    circle(440, 367, 5);
}

function updateClouds() {
    //update clouds
    for (var i = 0; i < clouds.length; i++) {
        clouds[i].move();
        clouds[i].display();
    }
}

function removeClouds() {
    //get rid of clouds
    var keepClouds = [];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x + 50 > 0) {
            keepClouds.push(clouds[i]);
        }
    }
    clouds = keepClouds;
}

function addClouds() {
    //add new clouds
    var newClouds = 0.05;
    if (random(0,1) < newClouds) {
        var y = random(0, 200);
        clouds.push(makeClouds(width, y));
    }
}

function moveClouds() {
    //clouds move to left
    this.x += this.speed;
}

function displayClouds() {
    //cloud drawing
    fill(255);
    noStroke();
    circle(this.x, this.y + 50, 50);
    circle(this.x + 40, this.y + 50, 70);
    circle(this.x + 80, this.y + 70, 40);
    circle(this.x + 90, this.y + 40, 50);
}

function makeClouds(cloudsX, cloudsY) {
    var cloud = {x: cloudsX,
                 y: cloudsY,
                 speed: -4,
                 move: moveClouds,
                 display: displayClouds}
    return cloud;
}

function boyWalking() {
    stroke(0);
    strokeWeight(3);
    //shirt
    fill(174, 255, 242);
    quad(70, 450, 120, 450, 150, height + 2, 60, height + 2);
    quad(90, 520, 110, 520, 115, 550, 85, 550);
    //face
    fill(255, 245, 215);
    circle(100, 420, 140);
    circle(90, 440, 10);
    fill(0);
    circle(150, 430, 5);
    noFill();
    arc(152, 450, 35, 30, radians(90), radians(180));
    line(100, 335, 100, 350);
    line(90, 340, 100, 350);
    line(110, 340, 100, 350);
    //phone
    noStroke();
    fill(209, 250, 255);
    quad(200, 465, 200, 500, 175, 530, 150, 530);
    stroke(0);
    strokeWeight(5);
    line(200, 500, 175, 530);
    //arms
    strokeWeight(3);
    line(100, 550, 100, 570);
    line(100, 570, 170, 540);
    fill(255, 245, 215);
    circle(170, 540, 20);
}

function phonePicture() {
    //phone camera
    stroke(0);
    strokeWeight(20);
    fill(171, 245, 255);
    rect(200, 100, 200, 400);
    strokeWeight(10);
    line(200, 400, 0, height);
    line(400, 400, width, height);
    stroke(255);
    strokeWeight(5);
    line(250, 220, 250, 240);
    line(250, 220, 270, 220);
    line(350, 220, 350, 240);
    line(330, 220, 350, 220);
    line(250, 380, 250, 360);
    line(250, 380, 270, 380);
    line(350, 380, 350, 360);
    line(350, 380, 330, 380);
}

function bubble() {
    //phone comments
    fill(255);
    noStroke();
    ellipse(350, 400, 150, 100);
    triangle(290, 400, 320, 440, 280, 450);
}

function boyFace() {
    //boy sad face
    background(255);
    strokeWeight(3);
    fill(255, 245, 215);
    circle(100, (height / 2), 50);
    circle(500, (height / 2), 50);
    circle((width / 2), (height / 2), 400);
    line(300, 70, 300, 100);
    line(280, 80, 300, 100);
    line(320, 80, 300, 100);
    fill(0);
    circle(270, 290, 10);
    circle(330, 290, 10);
    noFill();
    arc(300, 420, 140, 120, radians(200), radians(340));
}




For this project, I chose to create a short animation that depicted some of the major events that occurred in 2020. The increasing use of technology and social media platforms has definitely raised awareness for important causes and happenings during this year. For example, one of the biggest contributors for raising awareness and protests was social media and the sharing of information through these platforms.



My inspiration for this project was a typical commercial, one that can be watched through advertisements or on TV. I tried to imitate the basic form of story-like commercial with a message at the end. The main message that I am conveying through this short clip is spread more awareness about the importance of masks. With the currently increasing cases of COVID-19, I decided to focus on this specific theme because unfortunately, masks are still being refused by many people around the world.



If I had more time, I would have liked to add an additional scene that depicted the detrimental effects of contracting COVID-19. I believe that this would have added more of an impact to my “commercial”.



To interact with my program, simply click on the canvas to start the clip. Note: Use volume for sound.



Final Project
aadya — Tue, 15 Dec 2020 20:39:00 +0000

For my project I created a game to raise awareness towards mask wearing so the person is trying to move through covid particles to reach the mask. And basically gets saved if he does so without colliding with a covid body. If you reach the mask, the words, “You were saved show up” while if you collide with a cover particle it says, “You’ve been infected, happy recovery!”
If I had more time I would have implemented multiple levels where the speed of the covid particles begin to vary making it more difficult and instead of a generic score the levels would be how many months you have gone without being infected. Thus, again endorsing mask wearing as a norm.



Instructions use your mouse and YOU DO NOT WANT TO GET COVID SO STAY AWAY FROM THOSE NASTY RED THINGS!!



sketch
//Aadya Bhartia
//Section A 

/* The objective of the game is for the user to reach the mask and to
avoid the covid particles! Once you reach the mask you win the game and if you 
bang into a particle you lose. The purpose of the game is to encourage mask wearing 
*/

var mask;//parameter for object creation
var rad = 40; // for size of covid particle 
//person 
var personX;
var personY;
//array to store covid symbols 
var covidX = [];
var covidY = [];
var dx = [];
var dy = [];
//variables to store images 
var covid;
var person;
var maskImg;

function preload(){
    //preloading images 
	covid = loadImage("https://i.imgur.com/uT2allv.png");
    person = loadImage("https://i.imgur.com/uVjRV7S.png");
    maskImg = loadImage("https://i.imgur.com/1olzsvy.png");
}

function setup() {
    createCanvas(500, 500);
    background(220);
    //storing covid particles random x and position as well as speed 
    for(var i = 0; i<15; i++){
    	covidX[i] = random(width);
        covidY[i] = random(height);
        dx[i] = random(-5,5);
        dy[i] = random(-5,5);
    }
    mask = makeMask();
    //text formatting
    frameRate(10); 
    textAlign(CENTER);
    textFont('New Roman');
    textStyle(BOLD);
}

function draw() {
	//constraining mouse within canvas 
    var x = constrain(mouseX, 0, width-10);
	var y = constrain(mouseY, 0, height-10);
	background(220);
    //displaying mask and checking if person has touched maks 
    mask.show();
    mask.check();

	for(var i = 0; i<10; i++){
        fill(0);
    	image(covid, covidX[i], covidY[i], rad, rad);
        covidX[i] += dx[i];
        covidY[i] += dy[i];
        //to bounce covid particles off the sides 
        if(covidX[i] >= (width) || covidX[i] <= 0){
            dx[i] = -1*dx[i];
        }
        if(covidY[i] >= (height) || covidY[i] <= 0){
            dy[i] = -1*dy[i];
        }
        //when person bangs into covid particle 
        if(covidY[i]> y-15  & covidY[i]< y+15 ){
            if(covidX[i]> x-15  && covidX[i]< x+15 ){
                finishGame();
            }
        }
    }
    //person
    fill(255,0,0);
    //displaying mouse as person
    image(person,x, y, 60,100);

}
//displaying mask
function maskDisplay(){
    image(maskImg, this.x, this.y, 60,60);
}

//game won if person reaches the maks 
function achieved(){
    var d = dist(mouseX, mouseY, this.x, this.y);
    if(d<20){
        wonGame();
    }
}

//constructor
function makeMask(){
    var m = {x : random(30, width-30),
             y : random(30, height-30),
             show : maskDisplay, check : achieved}
    return m;
}
//message for when game has been lost 
function finishGame(){
    fill("black");
    textSize(30);
    text("You've been infected, happy recovery!", width/2, height/2);
    noLoop();
}
//message for when game has been won
function wonGame(){
    fill("black");
    textSize(40);
    text("YOU WERE SAVED!!!", width/2, height/2);
    noLoop();
}






Final Project
eyelash — Mon, 14 Dec 2020 17:35:59 +0000

2020 was full of surprises that shook our world and changed the lives of many. My final project comments on the concept of misfortune and plays with the sense of control that many felt like they didn’t have in the face of a global pandemic, monumental election, civil rights movements, wildfires, and more. The 2020 slot machine presents the user with an attractive and exciting prospect of winning, but ultimately delivers the raw reality of this year.



To play, click and drag down on the lever, then release. The reels will spin and generate your 2020. Observe the effects of a jackpot!



I was inspired to create a slot machine for my final project because when presented with the project theme “2020,” I couldn’t narrow down to one single event that I wanted to focus on. I instead wanted to take a more macro approach and reflect on the year as a whole and satirize it with a classic casino game. With more time, I would add a greater jackpot effect, more buttons, and user interaction opportunities to the slot machine.



Icon Key
sketchDownload//2020 SLOT MACHINE
//Elysha Tsai

//All illustrated assets made by me
var bg;
var symbolLinks = [
    "https://i.imgur.com/gj4Ztah.png", //COVID
    "https://i.imgur.com/a8qsuTb.png", //AUSTRALIAN BUSHFIRES
    "https://i.imgur.com/TLZnWQ9.png", //BLM
    "https://i.imgur.com/1tdvXwb.png", //ELECTION
    "https://i.imgur.com/SsV7YIF.png", //2020
    "https://i.imgur.com/EHQEMEP.png", //MURDER HORNETS
]
var textLinks = [
    "https://i.imgur.com/qBgKflt.png", //COVID
    "https://i.imgur.com/jTMJxU5.png", //AUSTRALIAN BUSHFIRES
    "https://i.imgur.com/L47KJMN.png", //BLM
    "https://i.imgur.com/IAmvG2D.png", //ELECTION
    "https://i.imgur.com/051k4xi.png", //2020
    "https://i.imgur.com/sRj9Ipi.png", //MURDER HORNETS
]

var maxlinks = 6;

//assign links to 3 separate reels
var reelA;
var reelB;
var reelC;

var reelimages=[];
var reeltext=[];
var reelAindex=0
var defaultText;
var textimage;
var jackpotWin;

var count =0;
var doneReel=0;
var jackpotindex=0;

//light object variables
var light =[];
var x; //position of light
var speed;

var leverpull;
//var jackpotwin;
var ball;
var slotmachine;
var chair;

function preload() {

  //IMAGES
  bg= loadImage("https://i.imgur.com/Mt81CeD.jpg"); //green gradient background
  ball= loadImage("https://i.imgur.com/5UZk7nN.png"); //lever ball
  slotmachine= loadImage("https://i.imgur.com/3OioKHj.png");
  chair= loadImage("https://i.imgur.com/KXMlSo1.png");

  defaultText= loadImage("https://i.imgur.com/dcfoYh5.png");
  jackpotWin= loadImage("https://i.imgur.com/ih2wbgn.png");

  for (var i=0; i 330 && mouseX < 370){

    var x1 = 350; //base x
    var y1 = 293; //base y
    var x2 = constrain(mouseX, 350, 350);//lever only moves vertically
    var y2 = constrain(mouseY, 191, 333);

    
  //stick
    strokeWeight(8);
    stroke(248, 230, 194); //cream
    strokeCap(ROUND);
    line(x1, y1 + (y2/40), x2, y2);
  //ball handle
    push();
    imageMode(CENTER)
    image(ball, x2, y2, 25, 25);
    pop();

    var d = dist(x1, y1, x2, y2); //line length determined by distance from base and handle
    
    }else{ //default lever state
  
  //stick
    strokeWeight(8);
    stroke(248, 230, 194);
    strokeCap(ROUND);
    line(350, 293, 350, 191);
  
  //ball handle
    push();
    imageMode(CENTER)
    image(ball, 350, 191, 25, 25); 
    pop();
      

    }
  }
  
// sleep time expects milliseconds
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}
// based on https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep

// actual wait time based on clock
function waittime(milliseconds) {   
  const date = Date.now(); 
  let currentDate = null; 
  do {     
    currentDate = Date.now(); 
  } while (currentDate - date < milliseconds); 
} 

function mouseReleased(){

  if (mouseX> 330 & mouseX < 370){   //end position of lever

    reelA=reelimages[int(random(0,maxlinks))];
    reelB=reelimages[int(random(0,maxlinks))];
    reelC=reelimages[int(random(0,maxlinks))]; 
    
    doneReel=0 // start reel turning, not done yet

    //randomize symbol display with lever push
    // for each reel sleep for a random time between 0 and 200ms then show image
    // left to right
    for (var i =0; i<20; i++){
      
      sleep(50).then (()=> {
        reelAindex=int(random(0,maxlinks));
        reelA=reelimages[reelAindex];
          sleep(50).then(()=> {
          reelB=reelimages[int(random(0,maxlinks))];
            sleep(50).then(()=> {
            reelC=reelimages[int(random(0,maxlinks))]; 
          });
        });
      })
      
      waittime(int(random(0,50))) // wait random time up to 100ms before changing 
    }  
    // wait some time for all reels to settle before calling it done
    sleep(500).then(()=> {
      doneReel=1
    })
  }
}

//lightstrip functions

  function varLight(basex){
    var light ={lighty:20,
                x: basex,
                lightw:4,
                display: createLight,
                move: movestrip,
                speed: 4.0,
                }
    return light;
  }

  function createLight(){
    strokeWeight(1.5);
    stroke(227, 88, 158);//pink outline
    fill(248, 230, 194); //cream
    ellipse(this.x, this.lighty, this.lightw, this.lightw);
  }

  function movestrip(){
    this.x -= this.speed
  }
/*
function displayText(){
  push();
  imageMode(CENTER);
  image(reeltext[jackpotindex], 200, 148);
  pop();

}
/*
/*
function mousePressed(){
  if (mouseX>330 & mouseX<370 &&){
    jackpotwin.stop();
    leverpull.play();
  }
}
*/



FINAL PROJECT
Tak — Mon, 14 Dec 2020 11:51:55 +0000

I was inspired by digital interactive infographics and how they are able to relay important information to educate the audience in a very effective and engaging way. I thought it was important to show the visuals in order to help visual learners better understand and connect the information to the real world. I feel that 2020 was a rough year for many things but the current world has always been harsh to the environment. I had my infographic focused on the environment because I didn’t want people to forget about the horrible things happening to the environment because of the pandemic. I had my birds turn to grayscale to show the decrease in biodiversity due to the accelerating extinction of birds. I intended for the hills to turn to a dimmer color in order to fit the final image where the clouds and sky look gloomy with trees on fire and stone like birds flying across the page. However, I originally intended it to show how satellite images showed that the Amazon Forest is slowly becoming less green and less efficient at processing carbon dioxide due to the pollution. I am pretty happy with how the project turned out and I think I learned a lot during the debugging process and problem solving!



sketchvar trees = [];
var bird = [];
var cloud = [];
var hillVar= 0.009
var r = 188
var g = 219
var b = 245
var tr =14
var tg = 99
var tb = 42
var sky = 0
var newTreeLikelihood = 0.03; 
var newBirdLikelihood= 0.2;
var newCloudLikelihood=0.04;
var textShown = 1
var hillCondition = 0
var clickCondition = 0
var fire = 0
var fx = []
var fy = []
var birdcolor = 0
var birdDiv = ["https://i.imgur.com/L7k89AJ.png",
               "https://i.imgur.com/dnY7u7s.png",
               "https://i.imgur.com/a1m3PWp.png"]

function preload() {
  img = loadImage("https://i.imgur.com/W9zRul7.png");
  brd = loadImage(random(birdDiv));
  brdgray = loadImage("https://i.imgur.com/ile7nc8.png")
  //crackling = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/414767__samarobryn__crackling-fire.wav')
}

function soundSetup(){
    crackling.setVolume(7)
}

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of buildings


    for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(10, 50);
        trees[i] = makeTree(rx);
        bird[i] = makeBird(rx);
        for(var f = 0; f< 8; f++){

          fx[f] = trees[i].x-trees[i].breadth*2-350//random(trees[i].x-1,trees[i].x+1);
          fy[f] = -trees[i].nFloors*20//random(trees[i].nFloors*20,-90)
      }
}
frameRate(10);
    }
    

    


function draw() {
    background(r, g, b);
    if (sky == 0) {
    r = 188
    g = 219
    b = 245
  }
  else if (sky==1) {
    r = 177
    g = 194
    b = 199
  } else if (sky == 2) {
    r = 167
    g = 169
    b = 171
  } 



    drawHill() 

    updateAndDisplayCloud();
    removeCloud();
    addNewCloud()


    

    displayHorizon();

    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability(); 

    updateAndDisplayBird();
    removeBird();
    addNewBird()

    instructionbox()

}

function makeclouds(birthLocationX) {
  var k ={x: birthLocationX,
    y:round(random(10,180)),
    sizer:round(random(25,30)),
    speed:-3,
    move:cloudMove,
    display:cloudDisplay,
    click:cloudClick,
    }
    return k 
  //noStroke()
}

function cloudClick(cx,cy) {
  push()

  let dc = dist(cx,cy,this.x+20,this.y);

  if (dc < 30 ) {
      newCloudLikelihood += 0.1
      this.sizer += 3
      textShown = 4
  }
  pop()
}

function cloudMove() {
  this.x += this.speed;
  this.y += random(-3,3);
}

function cloudDisplay() {
  push();
  noStroke();
  fill(r-20,g-20,b-20);
  ellipse(this.x,this.y,this.sizer,this.sizer)
  ellipse(this.x+10,this.y+10,this.sizer,this.sizer)
  ellipse(this.x+30,this.y+10,this.sizer,this.sizer)
  ellipse(this.x+30,this.y-10,this.sizer,this.sizer)
  ellipse(this.x+20,this.y-10,this.sizer,this.sizer)
  ellipse(this.x+40,this.y,this.sizer,this.sizer)

  
  pop()
}

function updateAndDisplayCloud(){
  for (var i = 0; i 0){
      cloudToKeep.push(cloud[i])
    }
  }
  cloud = cloudToKeep
}

function addNewCloud(){
  
  if(random(0,1)2){
    r -= 10
    g -= 10
    b -= 10
  }

  clickCondition = 1 

  for (var i = 0; i 0){
      birdToKeep.push(bird[i])
    }
  }
  bird = birdToKeep
}

function addNewBird(){
  var newBirdLikelihood=0.1;
  if(random(0,1)=72 && tg <=87 && tb >=77){
    tr = 72
    tg = 87
    tb = 77
  }  


  pop()

  vertex(480,480);
  vertex(0,480)
  endShape()
  pop()
}

function updateAndDisplayTrees(){
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}


function removeTreesThatHaveSlippedOutOfView(){
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; 
}


function addNewTreesWithSomeRandomProbability() {
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}



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


function treeDisplay() {
  push()
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(74, 21, 22);  
    push();
    translate(this.x, height - 170);
    rect(0, -bHeight, this.breadth, bHeight);
    noStroke()

    for (var i = 0; i < this.nFloors; i++) {
      fill(2, 61, 21)
      noStroke()

      triangle(this.breadth/2,0-(i * floorHeight)-60,-20,20-(i * floorHeight)-40,this.breadth+20,20-(i * floorHeight)-40);
    }

    var fireSize = random(10,80)

    if( fire == 1){
      for(var f = 0; f < 8; f++){
        image(img,fx[f],fy[f],fireSize,fireSize)
      }
    }

    strokeWeight(3)
    pop();
}



function makeTree(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 15,
                speed: -3.0,
                nFloors: round(random(2,8)),
                move: treeMove,
                click: treeClick,
                display: treeDisplay}
    return bldg;
}

function treeClick(tx,ty) {
  var floorHeight = 20;
  var bHeight = this.nFloors * floorHeight;
  let dtx = dist( tx, height-170, this.x+this.breadth/2, height-170)
  let dty = dist( this.x , ty, this.x, -bHeight/2+height-170 )
  if (dtx<20+this.breadth/2 & dty




Final Project – Responsive Wearables
Isabel Xu — Mon, 14 Dec 2020 11:44:08 +0000

In 2020, one of the biggest treasure is to experience the time in outdoor. In the time when we need to carefully think about distancing to other people and gearing up ourselves with masks, gloves and sanitizer, I design this interactive game to explore with the idea of using garments as an responsive exterior shell to protect ourselves and create personal boundaries.




By moving the mouse, the character is able to wondering in this projected scenery with colorful reference object. For the design of the character, there are two mode in response to two situations. The character begins with wearing a normal scale clothes. When the player pressed the mouse, the character switch to the inflatables garment set with an “alert” sign.




One of the biggest challenge I encountered with when programming this game is making paneling affect on the canvas. The canvas visually works as a camera frame that shifting with the location of the mouse. If I further develop this program, I hope to have the alert character setting on when the character intersect with every bubble in the arrays.




sketchDownload//Isabel Xu
//Section A
//Final Project

var cX = 0;
var cY = 0;
var cdx = 0;
var cdy = 0;
var start_locationX = 300;
var start_locationY = 200;
var cir_X = [];
var cir_Y = [];
var cir_c = [];
var animGreen = [];


function preload(){
    //green character image arrays
    let green1 = loadImage("https://i.imgur.com/OXFFPY7.png");
    let green2 = loadImage("https://i.imgur.com/gIvd44d.png");
    let green3 = loadImage("https://i.imgur.com/p7dyFj3.png");
    animGreen = [green1, green2, green3];

    //red character image
    redAlert = loadImage("https://i.imgur.com/BhCQ0FG.png");

}

function setup() {
    createCanvas(600,400);
    frameRate(20);

    //create level of randomness to the bubble
    for (var i = 0; i < 7000; i++) {
        cir_X[i] = random(-5000, width+5000);
        cir_Y[i] = random(-4000, height+4000);
        cir_c[i] = color(235, random(255), random(255));
    }
    imageMode(CENTER);
}

function draw() {
    background(235, 218, 199);
    //movement of the bubble inversely to the character
    let cir_dx = ((mouseX)-300)/20*-1;
    let cir_dy = ((mouseY)-200)/20*-1;
    //create colorful bubble background for visual reference
    for (var i = 0; i < 7000; i++) {
        noStroke();
        drawShape(cir_X[i], cir_Y[i], cir_c[i]);
    
        cir_X[i] += cir_dx;
        cir_Y[i] += cir_dy;

    }

    drawFigure(cir_X[i], cir_Y[i]);
    
}

function drawShape(cir_X, cir_Y, cir_c) {
    fill(cir_c);
    ellipse(cir_X, cir_Y, 30, 15);
}

function drawFigure(){
    if (mouseIsPressed) {
        drawRedCharacter();
    }else{
        drawGreenCharacter();
    }
}
function drawGreenCharacter(){
    //limit the character movement 
    cX = constrain(mouseX,250,350);
    cY = constrain(mouseY,175,225);
    
    //shadow
    fill(110);
    ellipse(start_locationX+5,start_locationY+80,130,40)

    //draw green character
    //create animation effect with multiple image 
    let randomGreen = random(animGreen);
    image(randomGreen,start_locationX,start_locationY,150,180);

    //speed is inversely proportional to the mouse distance
    cdx = (cX - start_locationX)/20;
    cdy = (cY - start_locationY)/20;

    start_locationX += cdx;
    start_locationY += cdy;

}
function drawRedCharacter (){
    cX = constrain(mouseX,250,350);
    cY = constrain(mouseY,175,225);
    
    fill(255,0,0);
    image(redAlert,start_locationX,start_locationY,200,250);
    cdx = (cX - start_locationX)/20;
    cdy = (cY - start_locationY)/20;

    start_locationX += cdx;
    start_locationY += cdy;

}







Final Project
tian — Mon, 14 Dec 2020 08:04:57 +0000

For my final project, I wanted to address something we have all been doing a lot
of during quarantine, which is impulsive online shopping. Seeing all the
devastating climate crisis we’ve experienced this year I wanted to do a little
research on how the actual cost of fast fashion and its damage to the environment. It’s easy to purchase a cute shirt when they’re 15 dollars even if
you didn’t need it, but in reality, it’s contributing to so many problems that
we are actually paying for: forest fires, unpaid labor, toxic waste, etc..
The program is very simple, you hover over with your mouse to see the environmental cost of each of these clothing items, and when you click on them it will be placed into your shopping bag.  A certain number of the three symbols will pop up on the screen to show you how much you’ve spent. When you’ve used up around 50,000 litres of water (which doesn’t take a lot to achieve), the end screen will pop up. If I had more time I would make the symbols pop up in a more organized manner and add more levels of interactions. 



sketchDownload//keep track of number of runs
var count = 0;
//used for locating each item of clothing
var item;
//array for textbox, textbox is t
var t = [];
var textInfo = [
    'COTTON T-SHIRT:\n2,700 litres of water\n15kg of CO2\n200+ years to\ndecompose', 
    'JEANS:\n7000 litres of water\n33kg of CO2\n50 years to decompose',
    'SNEAKERS:\n8500 litres of water\n10kg of CO2\n40 years to decompose'
];
var textY = [30, 165, 355];
var textColor = ["lavender", "DarkSlateBlue"];

function preload(){
    rack = loadImage('https://i.imgur.com/YpMqJ3Z.png');
    shirt = loadImage('https://i.imgur.com/54EAgyC.png');
    jeans = loadImage('https://i.imgur.com/qzkFSXI.png');
    shoes = loadImage('https://i.imgur.com/D7paBLS.png');
    bag = loadImage('https://i.imgur.com/Xyv6IGe.png');
    water = loadImage('https://i.imgur.com/3ONgfhP.png');
    co2 = loadImage('https://i.imgur.com/me0Lg0A.png');
    clock = loadImage('https://i.imgur.com/gw7QVpQ.png');
}



//draw water
function drawWater() {
    image(water, this.x, this.y, 20, 20);
}

//draw co2
function drawCarbon(cx, cy) {
    image(co2, this.x, this.y, 20, 20);
}

//draw clock
function drawClock(clx, cly) {
    image(clock, this.x, this.y, 20, 20);
}

//create new water bucket object with position
function makeWater(wx, wy) {
    w = {x: wx, y: wy, 
         drawFunction: drawWater
        }
    return w;
}

//create new co2 object with position
function makeCarbon(cx, cy) {
    c = {x: cx, y: cy, 
         drawFunction: drawCarbon
        }
    return c;
}

//create new clock object with position
function makeClock(clx, cly) {
    cl = {x: clx, y: cly, 
         drawFunction: drawClock
        }
    return cl;
}

//arrays to store new symbol
var waters = [];
var carbons = [];
var clocks = [];
    
function setup() {
    createCanvas(400, 500);
    background("lightsteelblue");
    //set up the base rack
    image(rack, 200, 0, 200, 500);
    imageMode(CENTER);
    image(shirt, 300, 80, 120, 100);
    image(jeans, 300, 250, 80, 150);
    image(shoes, 300, 450, 100, 60);
    //create array of objects of the three info textboxes
    for (var i = 0; i < 3; i ++) {
        t[i] = new Object();
        t[i].info = textInfo[i];
        t[i].x = 170;
        t[i].y = textY[i];
        t[i].w = 110;
        t[i].h = 70;
        t[i].size = 10;
        t[i].c = textColor[i];
        t[i].font = 'verdana';
        t[i].stroke = "thistle"
        t[i].sWeight = 5;
    }

    //make a water bucket
    for (var i = 0; i < 20; i ++) {
        var w = makeWater(random(100), random(20, 100));
        waters.push(w);
    }
    //make a co2
    for (var i = 0; i < 20; i ++) {
        var w = makeCarbon(random(100), random(100, 200));
        carbons.push(c);
    }    
    //make a clock
    for (var i = 0; i < 20; i ++) {
        var cl = makeClock(random(50), random(200, 300));
        clocks.push(cl);
    }    
}


function draw() {
    //instruction
    textSize(20);
    fill("white");
    textFont(t[0].font);
    text('click to shop, hover to see price!', 20, 18);
    //draw textbox 
    if(mouseX >= 200 & mouseX <= 400) {
        if(mouseY >= 3 && mouseY <= 120) {
                stroke(t[0].stroke);
                strokeWeight(t[0].sWeight);
                fill(t[0].c);
                rect(t[0].x-5, t[0].y-5, t[0].w+10, t[0].h+10);
                noStroke();
                textSize(t[0].size);
                fill(t[1].c);
                text(t[0].info, t[0].x, t[0].y, t[0].w, t[0].h);
                item = 1;

        }
        else if(mouseY >= 150 & mouseY <= 300) {
            stroke(t[0].stroke);
            strokeWeight(t[0].sWeight);
            fill(t[0].c);
            rect(t[1].x-5, t[1].y-5, t[1].w+10, t[1].h+10);
            noStroke();
            textSize(t[0].size);
            fill(t[1].c);
            text(t[1].info, t[1].x, t[1].y, t[0].w, t[0].h);
            item = 2;

        }
        else if(mouseY >= 330 & mouseY <= 480) {
            stroke(t[0].stroke);
            strokeWeight(t[0].sWeight);
            fill(t[0].c);
            rect(t[2].x-5, t[2].y-5, t[2].w+10, t[2].h+10);
            noStroke();
            textSize(t[0].size);
            fill(t[1].c);
            text(t[2].info, t[2].x, t[2].y, t[2].w, t[2].h);
            item = 3;
        }
    }
    //place shopping bag
    shoppingBag();

    //place key
    drawKey(0, 400);

    //if 50 buckets of water used, display end page
    if(count >= 50) {
        endPage();
    }  
}
function mousePressed() {

    //when clicked into each area, item goes to shopping bag
    if(item == 1) {
        buyShirt(120, 450);

        //3 water buckets
        push();
        for (var i = 0; i < 3; i ++) {
            var w = waters[i];
            w.drawFunction();
            translate(random(10, 15), random(10, 15));  
        }
        pop();

        //3 co2
        push();
        for (var i = 0; i < 3; i ++) {
            var c = carbons[i];
            c.drawFunction();
            translate(random(10, 15), random(10, 15));  
        }
        pop();

        //20 clocks
        push();
        for (var i = 0; i < 20; i ++) {
            var cl = clocks[i];
            cl.drawFunction();
            translate(random(5, 10), random(5, 10));  
        }
        pop();      
        //add 3 to overall count
        count += 3;
    } 
    else if(item == 2) {
        buyJeans(120, 470);

        //7 water buckets
        push();
        for (var i = 0; i < 7; i ++) {
            var w = waters[i];
            w.drawFunction();
            translate(random(10, 15), random(10, 15));
        }
        pop();
        //6 co2
        push();
        for (var i = 0; i < 6; i ++) {
            var c = carbons[i];
            c.drawFunction();
            translate(random(10, 15), random(10, 15));  
        }
        pop();

        //5 clocks
        push();
        for (var i = 0; i < 5; i ++) {
            var cl = clocks[i];
            cl.drawFunction();
            translate(random(5, 10), random(5, 10));  
        }
        pop();   
        //add 7 to overall count
        count += 7;
    }
    else {
        buyShoes(120, 450);

        //8 water buckets
        push();
        for (var i = 0; i < 8; i ++) {
            var w = waters[i];
            w.drawFunction();
            translate(random(10, 15), random(10, 15));
        }
        pop();

        //2 co2
        push();
        for (var i = 0; i < 2; i ++) {
            var c = carbons[i];
            c.drawFunction();
            translate(random(10, 15), random(10, 15));  
        }
        pop();

        //4 clocks
        push();
        for (var i = 0; i < 4; i ++) {
            var cl = clocks[i];
            cl.drawFunction();
            translate(random(5, 10), random(5, 10));  
        }
        pop();  
        //add 8 to overall count
        count += 8;
    }

}

function shoppingBag() {
    image(bag, 120, 470, 170, 170);
    fill("white");
    textSize(20);
    text('your bag', 75, 480);
}

function drawKey(x, y) {
    //key box
    stroke("thistle");
    strokeWeight(5);
    fill("lavender");
    rect(x, y, 70, 80);
    //symbols
    image(water, x+15, y+20, 20, 20);
    image(co2, x+15, y+45, 20, 20);
    image(clock, x+15, y+65, 20, 20);
    //text 
    textSize(7);
    fill("black");
    noStroke();
    text('1000L water\n\n5kg co2\n\n10 years', x+30, y+15, 40, 80);
    stroke("thistle");
}


//clothing item goes into shopping bag
function buyShirt(x, y) {
    push();
    rotate(radians(random(-2, 2)));
    image(shirt, x, y, 120, 100);
    pop();
    }

function buyJeans(x, y) {
    push();
    rotate(radians(random(-2, 2)));
    image(jeans, x, y, 80, 150);
    pop();
}

function buyShoes(x, y) {
    push();
    rotate(radians(random(-2, 2)));
    image(shoes, x, y, 100, 60);
    pop();
}

function endPage() {
        background("steelblue");
        fill("lavender");
        noStroke();
        textSize(30);
        text('Sorry,\nYou have used up \n50 years worth of \ndrinking water.\n\nRefresh to shop again',
            50, 100)
    
}