COVID-19 Story

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

function 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;i<virus.length;i++){        //move and show germs
        virus[i].show();
        virus[i].move();
      }

        count+=1;
    }

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

function showGerm(){        //germ drawing
    push();
        fill(6,158,31);     //dark green
        ellipse(this.x,this.y,this.breadth,this.breadth);       //germ body

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

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

function moveGerm(){

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

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

function syringe(){
    push();
        rectMode(CENTER);
        translate(mouseX,mouseY);
        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<trees2.length;i++){
        trees2[i].show();
    }  
    for(var i=0;i<cars.length;i++){
        cars[i].show();
        cars[i].move();
    }                              
    for(var i=0;i<trees.length;i++){
        trees[i].show();
    }
   for(var i=0;i<flocks.length;i++){
        flocks[i].show();
        flocks[i].move();
    }

 

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

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

}


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

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

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

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

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


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

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

function showCar(){     
    push();
        noStroke();
        translate(this.x, 260);   
        fill(this.color)            
            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;i<this.numBirds;i++){
                    line(0+(2*i)+random(-1,1),0+(2*i),5+(2*i),5+(2*i));     //wings of birds
                    line(5+(2*i),5+(2*i),10+(2*i),0+(2*i)+random(-1,1));
              }
      pop();    
}

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

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

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

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

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

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

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

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

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

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



function Eamonn3(x,y){  
    push();
        translate(x,y);
            fill(255,220,200);        //beige
                ellipse(0,0,40,40);       //head
                rect(-8,12,15,15);        //neck
            fill(242,201,69);     //golden brown
                ellipse(0,-2,38,35);      //hair
            push();
                fill(0);
                rotate(radians(50));      //legs in criss cross
                    rect(63,0,25,70,15);
                rotate(radians(-100));
                    rect(-87,0,25,70,15)
            pop();
                fill(176,58,58);
                    rect(-23,25,45,70,15);
    
    pop();
}


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

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


}
                                        //turtle code, courtesy of Tom Cortina


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

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


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


function turtleForward(p) {
    var 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

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<width/5; i++){
                    var newUmbrellaChance = 0.001;      //frequencies for objects
                    var newPersonChance = 0.003;
                    var newTowelChance = 0.002;
                    var r = random(0,1);     //predictor

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

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

    
}

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


Dynamic Factory

This code simulates a dynamic factory environment, with variable elements including functionality of the factory, speed of the factory, the background factories, and the time of day. The idea for gears came from another class of mine in which we used squares to create interesting compositions. One of mine was created by overlaying two squares to create a “gear” so I knew I wanted to visualize it in motion for this project. I coded the gears to that they appear to work together, and appear to create an output when doing so. The rest stemmed from this “factory” theme.

FactoryEamonn
var angle = 0;		//gear turn
var t = 34;		//gear translate
var eSize = 10;		//ball sizes, center gear
var ballY = 409;		//front ball Y position
var recX = 7*t; 		//top piston X translation
var RecX = 7*t;			//bottom piston X tranlation 
var recY=10.5*t;		//pistons Y translation
var dir = 1; 		//top piston direction
var direction = 1;		//bottom piston direction
var speed = 2;			//piston speed
var recSize =  18;		//piston length
var BallY = 125;		//middle ball Y position
var windowSize = 25;	//window size
var Bally = 300;	//furthest ball start
var bright = 0;


function setup() {
    createCanvas(500, 409);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background (210,146, 6);		//orange brown
	push();
	if(mouseIsPressed){
		if(mouseButton == RIGHT){		//if the right button is pressed
			background(210 - mouseY/2, 146 - mouseY/2, 6 - mouseY/2);		//gets darker with higher Y
				if(mouseY > height/2){		//if the mouse Y is greater half the height
			fill(255);		//stars
				ellipse (100,200,1,1);
				ellipse (200,100,5,5);
				ellipse (300,100,3,3);
				ellipse (300,200,5,5);
				ellipse (300,300,3,3);
				ellipse (150,50,5,5);
				ellipse (420,120,2,2);
				ellipse (200,100,5,5);
				ellipse (150,150,5,5);
				ellipse (180,220,2,2);
				ellipse (300,200,1.5,1.5);
				ellipse (300,250,1,1);
				ellipse (450,100,2,2);
				ellipse (100,289,5,5);
				ellipse(50,70,2.5,2.5);
				ellipse (190,120,2.4,2.4);
				ellipse (100,289,5,5);
				ellipse(50,70,2.5,2.5);
				ellipse (200,60,1.2,1.2);
				ellipse(90,90,2,2);
				ellipse (230,200,2.4,2.4);
				ellipse (460,60,5,5);
				ellipse(440,100,2.7,2.7);
				ellipse (250,250,2.4,2.4);
				ellipse (260,200,3,3);
				ellipse(240,220,2.1,2.1);
				ellipse(300,110,1.7,1.7);
				ellipse (280,190,2.3,2.3);
				ellipse (290,140,3.1,3.1);
				ellipse(215,210,2,2);
				ellipse (400,90,2.3,2.3);
				ellipse (410,120,1.5,1.5);
				ellipse(420,50,2,2);
			}
			if(mouseY < height/2){ 		//if mouse Y is lower than the height
				fill(255,255,117);
				ellipse(0,mouseY,60,60);		//sun
			}
		}
	}
pop();
push();
				fill(0,0,0,200);
rectMode(CORNER);
	var m = max(min(mouseX, 250), 0);
	var size = m * 350.0 / 400.0;
				fill(0,0,0,height - mouseY);
	rect(10,height/2-recSize*1.5,75,500);		//left chimney
	rect(0,height/2,size,500);		//left building
size = 350-size;
				fill(0,0,0,mouseY+50);
	rect(110+m*190/400,height/2-recSize*2,size,500);		//back building
		var ballWidth = max(min(mouseY, 100), 0);
	rect(110+m*190/400,height/2-recSize*4,ballWidth,37);		//back chimney
	
	if(BallY < 0){		//if ball goes past 0
		BallY = height/2-recSize*4;		//reappear at height of back chimney
}

	BallY = BallY-1;	//move up by 1 point 
		ellipse(110+m*190/400+ballWidth/2,BallY,ballWidth,-ballWidth);		//middle ball

	if(Bally < 0){		//if ball goes past 0
		Bally = 250;		//reset ball height to 250
}

	Bally = Bally-2	;	//move up by 2 points
			fill(0,0,0,mouseX);		//opacity changes with mouseX
			if(mouseY > 200){			//if mouse Y is greater than half the height
				fill(210,146, 6);		//fill changes to background (disappears)
			}

		ellipse(380,Bally,height / 4 - ballWidth,height / 4 - ballWidth);	//right ball
			fill(0,0,0);


rectMode(CENTER);		//rectangles oriented by center point

			fill(150);
rect(recX,recY + 5,3.2*recSize,1 / 2*recSize);		//top piston still
rect(RecX,recY + 25,3.5*recSize,1 / 2*recSize);		//bottom piston still

if(mouseX < 1.5*t & mouseY < 1.5*t){		//if mouse is in the top left corner
	if(recX > width-220 || recX < width-266){		//piston range
	dir =- dir; 		//top piston bounces
}
	if(RecX > width-220 || RecX < width-266){		//piston range
	direction = -direction;		//bottom piston bounces
}
	fill(150);		//light gray

push();
if(mouseIsPressed){
	if(mouseButton == LEFT){		//if left mouse button pressed
	ballY = ballY-20;		//ball speed up to 20 points 
	speed = 10;		//pistons speed up by factor of 10
	angle += 4;		//angle doubles
}
}
else{
	speed = 2;		//speed reset to 2

}
pop();
	
push();
	recX += dir*speed		//piston move
		rect(recX,recY+5,3.2*recSize,1 / 2*recSize);		//top piston
	RecX += -direction*speed;		//piston move	
		rect(RecX,recY+25,3.5*recSize,1 / 2*recSize);		//bottom piston
}
pop();

push();
	translate (6.7*t, 11*t);		//last piston
if(mouseX < 1.5*t & mouseY < 1.5*t){		//first gear in place
	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

beaches
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)

Beach Landscape

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

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


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

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

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

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

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

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

            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)

Yael Braha

Eamonn Burke

This is Yael Braha’s “Tree of Changes”, an interactive sculpture which utilizes metalwork, voice recognition and algorithms, LED lights, and a custom Max/MSP software. It allows a user to speak a “wish” into a microphone, watch it travel up the tree, and become a glowing leaf on the branches.

What I really admire about this project is interactivity, and especially how intimate that interactivity is. It shows the power of computational design as a way to connect to people and make them feel special. Not only is a user able to alter the sculpture, but they are able to do it in a way that feels personal to them, which is the epitome of user experience design. In addition to this, the tree itself looks very elegant despite being made from metal, which is quite a feat.

Yael Braha studied Graphic Design at the European Institute of Design in Rome. She then immigrated to the US to study film at San Francisco State University. She now works in Canada, and works mainly with large computational and architectural installations, but also creates fine hand art such as jewelry and ceramics.

Alien Abduction

This story began as an idea to create a city environment using ambient noise. Then I thought about making some kind of event occur to break that ambience, which ended up being an alien abduction. From there I developed the idea to create some kind of resolution, which became the superhero who flies off after the UFO. My sound effects were the city noise, ufo slowing down, ufo beam, ufo flying, singe scream, crowd scream, single shout, crowd cheer, and an outro theme.

Alien Abduction
var city;      
var scream;
var ufoSlow;
var ufoBeam;
var ufoFly;
var crowdscream;
var yell;
var cheer;

function preload (){
    city = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/busycity.wav");       //city noise
    scream = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/screams.mp3")       //abductee scream
    crowdscream = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/crowdscream.wav");       //crowd screaming
    ufoSlow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/ufoslow.wav");       //ufo slowing down
    ufoFly = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/ufowave.wav");       //ufo flying away
    ufoBeam = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/ufowave.wav");       //ufo capture beam noise
    yell = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/hey.wav");        //superhero yell
    cheer = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/cheer.wav");       //crowd cheering noise
    outro = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/outro.wav");       //outro music
}

function soundSetup(){

    city.setVolume(0.3);        //setting the volume for each noise
    scream.setVolume(1);
    ufoslow.setVolume(0.5);
    ufoBeam.setVolume(0.7);
    ufoFly.setVolume(2);
    crowdscream.setVolume(.3);
    yell.setVolume(1.5);
    cheer.setVolume(1);
    outro.setVolume(1);
}


var x = [];       //x position of given person
var y = [];       //y position of given person
var dx = [];        //speed of given person
var cx = [];        //x position of given car
var cy = [];        //y position of given car
var cdx = [];       //speed of given car
var skin = [];        //skin color of given person       
var shirt= [];        //shirt color
var pants = [];       //pants color
var carW = [];        //width of car
var carH = [];        //height of car
var h = [];           //height of person
var w = [];           //width of person
var ufoY = 0;         //y position of ufo
var ufoX = 0;         //x position of ufo
var aY = 300;         //abductee y position
var sX = 0;           //superhero x position
var sY = 170;          //superhero y position


function setup() {
    createCanvas(400, 300);
   
    for (var i = 0; i < 20; i++) {
        x[i] = random(25, width-25);
        y[i] = height-25
        dx[i] = random(-3, 3);
        shirt[i] = color(random(0,255), random(0,255),random(0,255))
        skin[i] = color(random(200,250),random(100,150),random(20,100))
        pants[i] = color(random(0,255), random(0,255),random(0,255))
        h[i] = random(15,20);
        w[i] = random(5,8);
        frameRate(10);
    }
     for (var c = 0; c < 5; c++) {
        cx[c] = random(25, width-25);
        cy[c] = height-15
        carW[c] = random(20,40);
        carH[c] = random(15,20);
        cdx[c] = random(-5, 5);
    }
}

function draw() {

  if(frameCount<100){
    city.play();    //play city sound until UFO comes
    }
  
  background(43,226,232);       //light blue

  push();
      rectMode(CORNER);
      fill(169,169,169,150);    //gray
          rect(width/2,height-height/4,100,height/4);       //buildings
          rect(width/6,height-height/4.5,75,height/4.5);
          rect(width/6-25,height-height/7,25,height/5);
  pop();

    for (var c = 0; c < 5; c++) {
        car(cx[c], cy[c],carW[c],carH[c],cdx[c],shirt[c]);        //call car function
            cx[c] += cdx[c];        //move car horizontally
                if (cx[c] > width-25 || cx[c] < 25){        //turn around if hits edge
                    cdx[c] = -cdx[c];
        }
    }

    for (var i = 0; i < 20; i++) {
        person(x[i], y[i], dx[i], skin[i],shirt[i],pants[i],h[i],w[i]);       //call person function
            x[i] += dx[i];
                if(frameCount>100){
                    x[i] += 2*dx[i];       //speed up in panic when UFO comes
    }
        if (x[i] > width-25 || x[i] < 25) {       //turn around if hit edge
            dx[i] = -dx[i];
        }
    }
   
  push();
      rectMode(CORNER);
      fill(169,169,169);    //gray
          rect(0,height/2,50,height/2);       //back buildings
          rect(width-75,height-height/3,75,height/3);
  pop();


   if(frameCount>50){
    push();
         translate(ufoX,ufoY);        //translate ufo shape
                 UFO(width/2,-300);     //call ufo function to draw 
         
    pop();

    ufoSlow.play();         //play ufo slow noise      
   }
    if(frameCount>100){
        city.stop();        //stop city noise
        scream.play();        //start scream   
        ufoBeam.play();       //start beam noise
                   
   }
   if(frameCount>100 & frameCount<115){
       fill(21,249,36,150)        //light green
            triangle(width/2,height/2,width/2-50,height,width/2+50,height)        //ufo beam
                abductee(width/2,aY);       //call function to draw person
         aY-=11;        //move abductee upwards
           
    }
   
   ufoY+=4;        //move ufo down

   if(frameCount>85){
       ufoY-=4;        //stop ufo
       ufoSlow.stop();        //stop ufo sound

    }

   if(frameCount>115){
       ufoY-=3;       //move ufo up and right
       ufoX+=10;
       ufoBeam.stop();       //stop beam noise
       scream.stop();       //stopscream noise
       ufoFly.play();       //play ufo sound
       crowdscream.play();        //play crowd scream noise
    }

   if(frameCount>135){
       ufoFly.stop();       //stop ufo sound
    }

   if(frameCount>150){
       push();
           rotate(radians(50));       //turn diagonally
               superhero(sX,sY);        //call superhero function to draw
       pop();

           sX += 15        //move superhero diagonally(adjusted for rotation)
           sY -=20
    }

   if(frameCount>152){
       crowdscream.stop()
    }

   if(frameCount>152 & frameCount<154){    //as superhero flies he yells
       yell.play();
    }

   if(frameCount>160){        //as superhero flies by, people cheer
       cheer.play();       //play cheering
    }

   if(frameCount>200){
       outro.play();       //play song
       cheer.stop();       //stop cheering

       push();
           rectMode(CORNER);
           fill(255,0,0);       //red
               rect(0,0,400,300);        //red background
           textSize(50);
       fill(0);        //black
           text("THE END",100,150);

    }
   if(frameCount>500){
       outro.stop();       //end song    
    }       

}

function person(x,y,dx,skin,shirt,pants,h,w) {
 
    fill(skin);       
        ellipse(x,y-5,5, 5);        //head
    rectMode(CENTER);
    fill(shirt);
        rect(x,y+10,w,h);       //body
    fill(pants);
        rect(x,y+25,w,h);       //legs
   
}

function abductee(x,y){

    fill(219,150,30);       //beige
        ellipse(x,y-5,5,5);       //head
    rectMode(CENTER);
    fill(0,255,0);        //green
        rect(x,y+10,5,15);        //shirt
    fill(0,0,255);        //blue
        rect(x,y+25,5,15);        //pants
}


function car(cx,cy,carW,carH,cdx,shirt){
    fill(shirt);        //same as shirt, so just to save a variable
        rect(cx,cy,carW,carH);        //body of car
    noStroke();
    
     if (cdx < 0) {         //if car turns around  
        rect(cx-17,cy+4,10,10);        //front of car on left
    } else {
        rect(cx+17,cy+4,10,10);        //front of car on right
    }

    fill(0);       //black
        ellipse(cx-10,cy+10,10,10);       //wheels
        ellipse(cx+10,cy+10,10,10);
    
}


function UFO(x,y){

    push();
        translate(x,y);
        scale(2);
        fill(152,152,152);  //gray
            ellipse(0,50,40,15);    //ufo body
            quad (-5,52,-15,60,-14,61,-4,53)    //left landing leg
            rect (-2,52,1.5,10)     //middle landing leg
            quad (1,52,11,61,12,60,4,53)    //right landing leg
        fill(175,238,170,200);  //opaque green-blue
            ellipse(0,45,25,15);    //window dome
        fill(255,0,0);      //red
            circle(-12,52,3);   //left light
            circle(12,52,3);    //right light
        fill(255,255,0);    //yellow
            circle(0,54.5,3);   //middle light

    pop();
}

function superhero(x,y){
    fill(255,0,0);        //red
        quad(x+5,y+2,x-5,y+2,x-15,y+30,x+15,y+30);        //cape
    fill(219,150,30);       //beige
        ellipse(x,y-5,10,10);       //head
    rectMode(CENTER);
    fill(0,0,255);        //blue
        rect(x,y+10,10,20);       //body
    fill(0,0,255)
        rect(x,y+25,10,20);       //legs
        quad(x+2,y+5,x+8,y-10,x+10,y-8,x+5,y+6);        //right arm
        quad(x-2,y+2,x-8,y+17,x-10,y+15,x-5,y+4);       //leftarm
    fill(255,0,0);        //red
        rect(x,y+35,10,5);        //boots
}

Looking Outwards 10 – Aphex Twin

https://www.bing.com/videos/search?q=aphex+twin+4&docid=608012986934038317&mid=85290F2AD34FFDF7115B85290F2AD34FFDF7115B&view=detail&FORM=VRAASM&ru=%2Fvideos%2Fsearch%3Fq%3Daphex%2Btwin%2B4%26qpvt%3Daphex%2Btwin%2B4%26FORM%3DVDRE

Aphex Twin – “4”

Eamonn Burke

This is one of my favorite electronic songs, because it seems to blur the line between repetition and randomness in rhythm.
The beat is entrancing to me, but the changes in frequency in speed also keep your attention as you listen, as well as the pauses
and extra sound effects.

There seems to be an oscillation in the background that ranges from a very high frequency to a middle range one. One top of this,
there are notes playing at a high but varying speed, which appear to slightly oscillate in amplitude themselves. The last layer is
the beat, which repeats at a high tempo, and at certain parts of the song it speeds up greatly, creating a sort of “stutter” effect.

As I said before, I think that Aphex Twin’s creative sensibilities come in using these tools to create a high energy and spontaneous
track that commands your attention and sounds different every time you hear it, because of the unpredictability of the changes in the
melodies and rhythm.

Portrait – Painting

Painting

var strokeX = 7		//horizontal size of dots
var strokeY = 7		//vertical size of dots
var size = 7		//space between dots
var portrait;		//my image
var painted = [];		//the painted 
var erased = [];		//the erased area
var erasing;		//boolen for whether or not erasing has been activated
var brushSize = 20		//defines what is "near mouse"

function preload(){
	portrait = loadImage("https://i.imgur.com/iJq4Jtv.jpg")		//loading imgur image into variable
}

function paint(){			//draw function for paint object
    fill(portrait.get(this.x,this.y))		//calling the color at the certain image coordinate
		ellipse(this.x,this.y,strokeX,strokeY)		//drawing an ellipse at that coordinate
}

function erase(){
	fill(255,241,175)
		ellipse(this.x,this.y,strokeX,strokeY)
}

function makePaint(px,py){		//constructor for paint object
p = {x:px,y:py,		
	drawfunction:paint
}
return p;
}

function makeErase(ex,ey){		//constructor for erase objecg
e = {x:ex,y:ey,
	drawfunction:erase
}
return e;
}


function setup() {

createCanvas(300, 400);
   background(255,241,175);		//beige
   noStroke();
   ellipseMode(CORNER);		//ellipses defined by "corner"

}


function draw() {

	background(255,241,175)		//beige

	for(i=0;i<painted.length;i++){		//display function for paint object
		painted[i].drawfunction()		//calling the draw function for the array of objects
}


if(mouseIsPressed){
	 for(x=0;x<=width;x+=size){		//for loop to set up dots
		for(y=0;y<=height;y+=size){
			if (nearMouse(x,y) == true){
				if(erasing == false){
					var p = makePaint(x,y)
			        	painted.push(p)
			        brush(mouseX,mouseY)
			    }
			        if(erasing == true){
			        	var e = makeErase(x,y)
			        		painted.push(e)
			        	eraser(mouseX,mouseY)
			    }
			}
		}
	}
}


	fill(128,88,43);	//brown
		rect(0,0,width,20);		//drawing the border
		rect(0,0,20,height);
		rect(0,380,width,20);
		rect(280,0,20,height)

	fill(255);		
		textSize(7);
		text('Press P and Drag to Paint',20,13);		//instructions
		text('Press E and Drag to Erase', 195,13);
		text('Press A to paint abstractly',20,391);
		text('Press R to paint realistically',190,391);
		text('b for smaller brush',120,8);
		text("B for bigger brush", 120,15);
}

function nearMouse(x,y){
	if (dist(x,y,mouseX,mouseY)<brushSize){		//if the mouse is within "brush size" of given x and y coordinates
		return true;
	}
	return false;
}

function brush(x,y){		//drawing the paintbrush
	
	push();
		rectMode(CENTER);
			fill(222,184,142);		//light brown
				rect(x,y+20,15,70);		//the handle
		ellipseMode(CENTER);
			
	if(mouseIsPressed){
		fill(portrait.get(x,y))		//fill with color of image coordinate that it is above
		}else{
			fill(0)		//fill black is not pressing
}
		ellipse(x,y-5,20,12)		//the brush
		triangle(x,y-25,x-10,y-5,x+10,y-5)
	pop();
}

function eraser(x,y){
	
	push();
		rectMode(CENTER);
			fill(245,116,240)		//pink
				rect(x,y,30,40)		//eraser shape
	pop();
}

function keyPressed (){

	if(key=="a"){
		strokeX = random(5,100)		//pick random shape of the dots, and random seperation
		strokeY = random(5,100)
		size = random(0,5)
	}

	if(key=="r"){		//shrink the dots and space between
		strokeX = 2
		strokeY = 2
		size = 2
	}

	if(key == "B"){
		brushSize +=5		//increase the brush size (more dots included in nearmouse function)
	}

	if(key == "b"){			//decrease brush size (less dots included)
		brushSize -=5
	}

	if(key == "p"){
		erasing = false		//not erasing (painting)
	}

	if(key =="e"){
		erasing = true		//erasing (not painting)
	}
}




LO – Digital Grotesque

As a fellow studier of architecture, I also admired this piece’s structural qualities. However, it seems my peer and I are taking two different scopes when admiring the project. He remarked on the delicate ornate detailing, while I find myself inspired differently. To me this project ponders a larger idea, that at one point in our future not only products, but entire environments will be digitally fabricated. I agree with my peer that the intricate detail is astounding and impressive, but I would disagree that it is the “main idea” of the work. I think that it’s actually the opposite: I see this project as attempting to ponder a massive, and extremely scary question: can an environment be digitally manufactured with a level of detail that actually makes it impossible to distinguish from a “natural environment”. Like a simulation, the detail is there not to draw attention, but to dismiss attention that might expose the environment as “fake”. For example, someone standing in an empty room knows it’s man made, because no natural environment really looks like it. In the middle of a forest, however, we don’t even consider that the environment is fake, because of the sheer amount of detail.

https://www.bing.com/videos/search?q=digital+grotesque+vimeo&&view=detail&mid=87EF57FBFB7556D6E77787EF57FBFB7556D6E777&&FORM=VRDGAR&ru=%2Fvideos%2Fsearch%3Fq%3Ddigital%2Bgrotesque%2Bvimeo%26FORM%3DHDRSC4