rkondrup_enwandu_Final_Project

For the final project we created a code which draws four floor plans designed by Mies Van Der Rohe. Using keys, the program draws the farnsworth house (f), crown hall (c), brick country house (b), or barcelona pavilion (p). By pressing the mouse, the canvas is reset and the new selected building plan is drawn with white lines in a soothing animation. The program uses if statements and turtle graphics to animate the lines.

sketch

// ryu kondrup
//emmanuel nwandu
// rkondrup@andrew.cmu.edu
//enwandu@andrew.cmu.edu
// sectionD
// Final_Project

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 turtlePenDown() {
    this.penIsDown = true;
}


function turtlePenUp() {
    this.penIsDown = false;
}


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


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;
}


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









var bdis = 1;
//distance line travels per frame, barcelona pavilion
var fdis = 1;
//distance line travels per frame, farnsworth house
var BrVd = 1;
var BrHd = 1;

var CVd = 1;
var CHd = 1;


function setup() {
    createCanvas(480, 400);
    background(77, 125, 135);


    //vertical lines from left to right
    bv = makeTurtle(28, 83);
    //bv = barcelona pavilion vertical lines
    bh = makeTurtle(28, 83);
    //bh = barcelona pavilion horizontal lines
    // bgv = makeTurtle(width/2, height/2);
    // //bgv = barcelona pavilion grid vertical
    // bgh = makeTurtle(0, 0);
    // //bgh = barcelona pavilion grid horizontal

    fv = makeTurtle(31, 197);
    //fv = farnsworth house vertical lines
    fh = makeTurtle(122, 75);
    //fh = farnsworth house horizontal lines


    //formatting color and weight for barcelona pavilion lines
    bv.setColor(255);
    bv.setWeight(3);

    bh.setColor(255);
    bh.setWeight(3);

    fv.setColor(255);
    fv.setWeight(2);

    fh.setColor(255);
    fh.setWeight(2);
    // bgv.setColor(255);
    // bgv.setWeight(1);
    //
    // bgh.setColor(255);
    // bgh.setWeight(1);

    CV = makeTurtle(185, 94);
    CV.setWeight(3);
    CV.setColor(255);
    // Controls Building geometry oriented along the x-axis of the canvas
    CH = makeTurtle(185, 110);
    CH.setWeight(3);
    CH.setColor(255);

    // Building Geometry
    // Controls Building Geometry oriented along the y-axis of the canvas for Brick Country House
    BrV = makeTurtle(199, 148);
    BrV.setColor(255);
    BrV.setWeight(1);
    BrH = makeTurtle(199, 210);
    BrH.setColor(255);
    BrH.setWeight(1);


}


// function draw() {
//     // if (mouseIsPressed() & mouseX < width/2 && mouseY < height/2) {
//       if (mouseX < width/2 && mouseY < height/2) {
//           drawBarcelonaPavilion();
//       }
//       if (mouseX > width/2 & mouseY < height/2) {
//           drawCrownHall();
//       }
//       if (mouseX < width/2 & mouseY > height/2) {
//           drawBrickCountryHouse();
//
//       }
//       if (mouseX > width/2 & mouseY > height/2) {
//           drawFarnsworthHouse();
//       }
//       if (mouseIsPressed) {
//           background(77, 125, 135);
//       }
//
// }

function draw() {
    // if (mouseIsPressed() & mouseX < width/2 && mouseY < height/2) {
      if (key == 'P') {
          var bdis = 1;
          //distance line travels per frame, barcelona pavilion
          drawBarcelonaPavilion();
      }
      if (key == 'C') {
          CVd = 1;
          CHd = 1;
          drawCrownHall();
      }
      if (key =='B') {
          BrVd = 1;
          BrHd = 1;
          drawBrickCountryHouse();
      }
      if (key == 'F') {
          fdis = 1;
          drawFarnsworthHouse();
      }
      if (mouseIsPressed) {
          bdis = 0;
          //distance line travels per frame, barcelona pavilion
          fdis = 0;
          //distance line travels per frame, farnsworth house
          BrVd = 0;
          BrHd = 0;
          CVd = 0;
          CHd = 0;
          background(77, 125, 135);


      }

}


// function draw() {
//     function keyPressed() {
//         if (keyCode === 66) {
//             drawBarcelonaPavilion();
//         }
//         if (keyCode === 13) {
//             drawFarnsworthHouse();
//         }
//         if (key === 27) {
//             drawCrownHall();
//         }
//         if (key === 42) {
//             drawBrickCountryHouse()
//         }
//     }
// }


function drawBarcelonaPavilion() {

//TO DRAW ALL VERTICAL LINES LEFT TO RIGHT

    //to turn right at starting point
    if (bv.x == 28 & bv.y == 83) {
        bv.right(90);
    }
    // FIRST LINE (left wall)

    //move to line before first vertical door
    if (bv.x == 28 & bv.y == 260) {
        bv.penUp()
        bv.goto(63, 83);
        bv.penDown();
        bv.setWeight(2);

    }
    //SECOND LINE

    //move to after first door from left
    if (bv.x == 63 & bv.y == 101) {
        bv.penUp();
        bv.goto(63, 108);
        bv.penDown();
    }
    //THIRD LINE

    //move to top of second vertical door)
    if (bv.x == 63 & bv.y == 127) {
        bv.penUp();
        bv.goto(80, 83);
        bv.penDown();

    }
    //FOURTH LINE

    //move to bottom of vertical door
    if (bv.x == 80 & bv.y == 85) {
        bv.penUp();
        bv.goto(80, 93);
        bv.penDown();

    }
    //FIFTH LINE

    //move to top of third vertical wall
    if (bv.x == 80 & bv.y == 96) {
        bv.penUp();
        bv.goto(98, 83);
        bv.penDown();
        bv.setWeight(3);


    }
    //SIXTH LINE

    //move to bottom segment of third vertical wall
    if (bv.x == 98 & bv.y == 98) {
        bv.penUp();
        bv.goto(98, 113);
        bv.penDown();
    }
    //SEVENTH LINE

    //move to first of 2 parallel lines in middle
    if (bv.x == 98 & bv.y == 129) {
        bv.penUp();
        bv.goto(282, 155);
        bv.penDown();
        bv.setWeight(2);


    }
    //EIGHT LINE

    //move to second of 2 parallel lines in middle
    if (bv.x == 282 & bv.y == 208) {
        bv.penUp();
        bv.goto(292, 155);
        bv.penDown();
    }
    //NINTH LINE

    //move to second to last line from right
    if (bv.x == 292 & bv.y == 208) {
        bv.penUp();
        bv.goto(398, 150);
        bv.penDown();
    }
    //TENTH LINE

    //move to last line from right (RIGHT WALL)
    if (bv.x == 398 & bv.y == 213) {
        bv.penUp();
        bv.goto(453, 135);
        bv.penDown();
        bv.setWeight(3);

    }
    //ELEVENTH LINES

    //complete final right line
    if (bv.x == 453 & bv.y == 229) {
        bv.left(90);
        bv.penUp();
        bv.goto(28, 83);
        bv.right(90);
        bv.penDown();


    }


//TO DRAW ALL HORIZONTAL LINES TOP TO BOTTOM

    //FIRST LINE

    //go to the first tiny line before the first horizontal door
    if (bh.x == 63 & bh.y == 83) {
        bh.penUp();
        bh.goto(63, 96);
        bh.penDown();
        bh.setWeight(2);

    }
    //SECOND LINE

    //go to the tiny line after the first horizontal door
    if (bh.x == 71 & bh.y == 96) {
        bh.penUp();
        bh.goto(80, 96);
        bh.penDown();
    }
    //THIRD LINE

    //go to the tiny line after the first horizontal door
    if (bh.x == 98 & bh.y == 96) {
        bh.penUp();
        bh.goto(28, 127);
        bh.penDown();
    }
    //FOURTH LINE

    //go to the double room width horizontal line before the door on the left
    if (bh.x == 80 & bh.y == 127) {
        bh.penUp();
        bh.goto(88, 127);
        bh.penDown();
    }
    //FIFTH LINE

    //go to the far right exterior horizontal wall
    if (bh.x == 98 & bh.y == 127) {
        bh.penUp();
        bh.goto(340, 135);
        bh.penDown();
        bh.setWeight(3);

    }
    //SIXTH LINE

    //go to the loooong north wall line in the middle
    if (bh.x == 453 & bh.y == 135) {
        bh.penUp();
        bh.goto(83, 143);
        bh.penDown();
    }
    //SEVENTH LINE

    //go to the line conntecting to two parallel lines
    if (bh.x == 245 & bh.y == 143) {
        bh.penUp();
        bh.goto(275, 155);
        bh.penDown();

    }
    //EIGHTH LINE

    //go to the standalone horizontal wall on the right
    if (bh.x == 359 & bh.y == 155) {
        bh.penUp();
        bh.goto(334, 175);
        bh.penDown();

    }
    //NINTH LINE

    //go to the bottom horizontal line connecting to parallel lines
    if (bh.x == 380 & bh.y == 175) {
        bh.penUp();
        bh.goto(234, 208);
        bh.penDown();
        bh.setWeight(3);

    }
    //TENTH LINE

    //go to the bottom horizontal wall on right
    if (bh.x == 307 & bh.y == 208) {
        bh.penUp();
        bh.goto(274, 229);
        bh.penDown();
        bh.setWeight(3);

    }
    //TENTH LINE

    //to change lineweight on bottom right horizontal wall
    if (bh.x == 370 & bh.y == 208) {
        bh.penUp();
        bh.goto(370, 229);
        bh.penDown();
    }
    //ELEVENTH LINE

    //go to the bottom left exterior wall
    if (bh.x == 453 & bh.y == 229) {
        bh.penUp();
        bh.goto(28, 261);
        bh.penDown();
    }
    //TWELFTH LINE

    //go to the bottom left exterior wall
    if (bh.x == 88 & bh.y == 261) {
        bh.penUp();
        bh.goto(28, 83);
        bh.penDown();

    }






    //TO MOVE THE TURTLES FORWARD
    bv.forward(bdis);
    bh.forward(bdis);


}

function drawFarnsworthHouse() {


    //VERTICAL LINES
    if (fv.x == 31 & fv.y == 197) {
        fv.right(90);
    }
    //FIRST LINE on left

    if (fv.x == 31 & fv.y == 291) {
        fv.penUp();
        fv.goto(122, 75);
        fv.penDown();
    }
    //SECOND LINE FROM LEFT (left edge of building mass porch)

    if (fv.x == 122 & fv.y == 193) {
        fv.penUp();
        fv.goto(166, 193);
        fv.penDown();
    }
    //THIRD LINE (top set of stairs left edge)

    if (fv.x == 166 & fv.y == 224) {
        fv.penUp();
        fv.goto(166, 291);
        fv.penDown();
    }
    //FOURTH LINE (bottom set of stairs left edge)

    if (fv.x == 166 & fv.y == 311) {
        fv.setWeight(3);
        fv.penUp();
        fv.goto(214, 75);
        fv.penDown();
    }

    //FIFTH LINE (top of double doors wall)

    if (fv.x == 214 & fv.y == 121) {
        fv.penUp();
        fv.goto(214, 150);
        fv.penDown();
    }
    //SIXTH LINE (bottom of double doors wall)

    if (fv.x == 214 & fv.y == 193) {
        fv.setWeight(2);
        fv.penUp();
        fv.goto(216, 193);
        fv.penDown();
    }

    //SEVENTH LINE (right edge of top stair)

    if (fv.x == 216 & fv.y == 224) {
        fv.penUp();
        fv.goto(216, 291);
        fv.penDown();
    }
    //EIGHTH LINE (right edge of bottom stair)

    if (fv.x == 216 & fv.y == 311) {
        fv.penUp();
        fv.goto(260, 197);
        fv.penDown();
        }
    //NINTH LINE (rightmost edge of patio)

    if (fv.x == 260 & fv.y == 291) {
        fv.penUp();
        fv.goto(289, 92);
        fv.penDown();
        }
    //TENTH LINE (leftmost edge of wood core above first door)

    if (fv.x == 289 & fv.y == 117) {
        fv.penUp();
        fv.goto(289, 128);
        fv.penDown();
        }
    //ELEVENTH LINE (leftmost edge of wood core below first door)
    if (fv.x == 289 & fv.y == 143) {
        fv.penUp();
        fv.goto(322, 103);
        fv.penDown();
    }
    //TWELFTH LINE (left middle divider of wood core above door)
    if (fv.x == 322 & fv.y == 117) {
        fv.penUp();
        fv.goto(322, 127);
        fv.penDown();
    }
    //THIRTEENTH LINE (left middle divider of wood core below door)
    if (fv.x == 322 & fv.y == 138) {
        fv.penUp();
        fv.goto(356, 103);
        fv.penDown();
    }
    //FOURTEENTH LINE (right middle divider of wood core)

    if (fv.x == 356 & fv.y == 138) {
        fv.penUp();
        fv.goto(390, 92);
        fv.penDown();
    }
    //FIFTEENTH LINE (right  divider of wood core above door)
    if (fv.x == 390 & fv.y == 117) {
        fv.penUp();
        fv.goto(390, 128);
        fv.penDown();
    }
    //SIXTEENTH LINE (right  divider of wood core below door)
    if (fv.x == 390 & fv.y == 143) {
        fv.penUp();
        fv.goto(404, 134);
        fv.penDown();
    }
    //SEVENTEENTH LINE (left side of standalone right side wall)
    if (fv.x == 404 & fv.y == 183) {
        fv.penUp();
        fv.goto(413, 134);
        fv.penDown();
    }
    //EIGHTEENTH LINE (right side of standalone right side wall)
    if (fv.x == 413 & fv.y == 183) {
        fv.setWeight(3);
        fv.penUp();
        fv.goto(443, 75);
        fv.penDown();
    }
    //NINTEENTH LINE (right wall of building)
    if (fv.x == 443 & fv.y == 193) {
        fv.penUp();
        fv.setWeight(2);
        fv.goto(31, 197);
        fv.penDown();

    }



    //HORIZONTALS
    //FIRST 0.5 LINE (top edge of building (Thin))
    if (fh.x == 443 & fh.y == 75) {
        fh.penUp();
        fh.goto(289, 103);
        fh.penDown();
    }
    //FIRST 0.5 LINE (top edge of building (Thin))
    if (fh.x == 443 & fh.y == 75) {
        fh.penUp();
        fh.goto(289, 103);
        fh.penDown();
    }

    //SECOND LINE (top edge of wood core)
    if (fh.x == 443 & fh.y == 103) {
        fh.penUp();
        fh.goto(289, 103);
        fh.penDown();
    }
    //THIRD LINE (top edge of standalone wall)
    if (fh.x == 390 & fh.y == 103) {
        fh.penUp();
        fh.goto(404, 134);
        fh.penDown();
    }
    //FOURTH LINE (bottom edge of wood core)
    if (fh.x == 413 & fh.y == 134) {
        fh.penUp();
        fh.goto(289, 138);
        fh.penDown();
    }
    //FIFTH LINE (bottom edge of standalone wall)
    if (fh.x == 390 & fh.y == 138) {
        fh.penUp();
        fh.goto(404, 183);
        fh.penDown();
    }
    //SIXTH LINE (bottom wall of building)
    if (fh.x == 413 & fh.y == 183) {
        fh.penUp();
        fh.goto(122, 193);
        fh.penDown();
    }
    //SEVENTH LINE (top edge of top patio left of stair)
    if (fh.x == 443 & fh.y == 193) {
        fh.penUp();
        fh.goto(31, 197);
        fh.penDown();
    }
    //EIGHTH LINE (top edge of top patio right of stair)
    if (fh.x == 166 & fh.y == 197) {
        fh.penUp();
        fh.goto(216, 197);
        fh.penDown();
    }
    //NINTH LINE (first step top stair)
    if (fh.x == 259 & fh.y == 197) {
        fh.penUp();
        fh.goto(166, 204);
        fh.penDown();
    }
    //TENTH LINE (second step top stair)
    if (fh.x == 216 & fh.y == 204) {
        fh.penUp();
        fh.goto(166, 209);
        fh.penDown();
    }
    //ELEVENTH LINE (third step top stair)
    if (fh.x == 216 & fh.y == 209) {
        fh.penUp();
        fh.goto(166, 214);
        fh.penDown();
    }
    //TWELFTH LINE (fourth step top stair)
    if (fh.x == 216 & fh.y == 214) {
        fh.penUp();
        fh.goto(166, 219);
        fh.penDown();
    }
    //THIRTEENTH LINE (fifth step top stair)
    if (fh.x == 216 & fh.y == 219) {
        fh.penUp();
        fh.goto(166, 224);
        fh.penDown();
    }
    //FOURTEENTH LINE (bottom edge of patio)
    if (fh.x == 216 & fh.y == 224) {
        fh.penUp();
        fh.goto(31, 291);
        fh.penDown();
    }
    //FIFTEENTH LINE (first step bottom stair)
    if (fh.x == 259 & fh.y == 291) {
        fh.penUp();
        fh.goto(166, 296);
        fh.penDown();
    }
    //SIXTEENTH LINE (second step bottom stair)
    if (fh.x == 216 & fh.y == 296) {
        fh.penUp();
        fh.goto(166, 301);
        fh.penDown();
    }
    //SEVENTEENTH LINE (third step bottom stair)
    if (fh.x == 216 & fh.y == 301) {
        fh.penUp();
        fh.goto(166, 306);
        fh.penDown();
    }
    //EIGHTEENTH LINE (fourth step bottom stair)
    if (fh.x == 216 & fh.y == 306) {
        fh.penUp();
        fh.goto(166, 311);
        fh.penDown();
    }
    //NINTEENTH LINE (to make it stop)
    if (fh.x == 216 & fh.y == 311) {
        fh.penUp();
        fh.goto(122, 75);
        fh.penDown();

    }


    fv.forward(fdis);
    fh.forward(fdis);

    // fh.forward(fdis);
}


function drawCrownHall() {
    // Turns right at first point to draws first vertical line
    if(CV.x == 185 & CV.y == 94){
        CV.right(90);
    }
    // Moves to second point and draws vertical line
    if(CV.x == 185 & CV.y == 160){
        CV.penUp();
        CV.goto(280, 94);
        CV.penDown();
    }
    // Moves to third point and draws vertical line
    if(CV.x == 280 & CV.y == 160){
        CV.penUp();
        CV.goto(230, 110);
        CV.penDown();
    }
    // Moves to fourth point and draws vertical line
    if(CV.x == 230 & CV.y == 136){
        CV.setWeight(1.5);
        CV.penUp();
        CV.goto(197, 174);
        CV.penDown();
    }
    // Moves to fifth point and draws vertical line
    if(CV.x == 197 & CV.y == 250){
        CV.penUp();
        CV.goto(265, 174)
        CV.penDown();
    }
    // Moves to sixth point an draws vertical line
    if(CV.x == 265 & CV.y == 250){
        CV.setWeight(1);
        CV.penUp();
        CV.goto(175, 185);
        CV.penDown();
    }
    // Draws the seventh vertical line and moves to the eighth
    if(CV.x == 175 & CV.y == 220){
        CV.penUp();
        CV.goto(185, 195);
        CV.penDown();
    }
    // Draws the eight vertical line and moves to the ninth
    if(CV.x == 185 & CV.y == 215){
        CV.penUp();
        CV.goto(195, 185);
        CV.penDown();
    }
    // Draws the ninth vertical line and moves to the tenth
    if(CV.x == 195 & CV.y == 220){
        CV.penUp();
        CV.goto(268, 185);
        CV.penDown();
    }
    // Draws the tenth vertical line and moves eleventh
    if(CV.x == 268 & CV.y == 220){
        CV.penUp();
        CV.goto(278, 195);
        CV.penDown();
    }
    // Draws the eleventh vertical line and moves to the twelfth
    if(CV.x == 278 & CV.y == 215){
        CV.penUp();
        CV.goto(288, 185);
        CV.penDown();
    }
    // Draws the twelfth vertical and moves to the thirteenth
    if(CV.x == 288 & CV.y == 220){
        CV.penUp();
        CV.goto(205, 295);
        CV.penDown();
    }
    // Draws the thirteenth vertical line and moves to the fourteenth
    if(CV.x == 205 & CV.y == 315){
        CV.penUp();
        CV.goto(255, 295);
        CV.penDown();
    }
    // Draws fourteenth vertical line and moves to the fifteenth
    if(CV.x == 255 & CV.y == 315){
        CV.penUp();
        CV.goto(185, 57);
        CV.penDown();
    }
    // Draws fifteenth vertical line and moves to the sixteenth
    if(CV.x == 185 & CV.y == 70){
        CV.penUp();
        CV.goto(190, 57);
        CV.penDown();
    }
    // Draws sixteenth vertical line and moves to the seventeenth
    if(CV.x == 190 & CV.y == 70){
        CV.penUp();
        CV.goto(195, 57);
        CV.penDown();
    }
    // Draws seventeenth vertical line and moves to the eighteenth
    if(CV.x == 195 & CV.y == 70){
        CV.penUp();
        CV.goto(265, 57);
        CV.penDown();
    }
    // Draws the eighteenth vertical line and moves to the nineteenth
    if(CV.x == 265 & CV.y == 70){
        CV.penUp();
        CV.goto(270, 57);
        CV.penDown();
    }
    // Draws nineteenth vertical line and moves to the twentieth
    if(CV.x == 270 & CV.y == 70){
        CV.penUp();
        CV.goto(275, 57);
        CV.penDown();
    }
    // Draws twentieth vertical line and moves to the twenty-first
    if(CV.x == 275 & CV.y == 70){
        CV.setWeight(1.5);
        CV.penUp();
        CV.goto(160, 154);
        CV.penDown();
    }
    // Draws twenty-first vertical line and moves to the twenty-second
    if(CV.x == 160 & CV.y == 175){
        CV.setWeight(1.5);
        CV.penUp();
        CV.goto(165, 154);
        CV.penDown();
    }
    // Draws twenty-second vertical line and moves to the twenty-third
    if(CV.x == 165 & CV.y == 175){
        CV.penUp();
        CV.goto(297, 154);
        CV.penDown();
    }
    // Draws twenty-third vertical line and moves to the twenty-fourth
    if(CV.x == 297 & CV.y == 175){
        CV.penUp();
        CV.goto(303, 154);
        CV.penDown();
    }
    // Draws twenty-fourth vertical line and moves to twenty fifth
    if(CV.x == 303 & CV.y == 175){
        CV.setWeight(1);
        CV.penUp();
        CV.goto(212, 154);
        CV.penDown();
    }
    // Draws twenty-fifth vertical line and moves to the twenty sixth
    if(CV.x == 212 & CV.y == 157){
        CV.penUp();
        CV.goto(250, 154);
        CV.penDown();
    }
    // Draws twenty-sixth vertical line and moves to the twenty-seventh (Entry Stairs)
    if(CV.x == 250 & CV.y == 157){
        CV.setWeight(3);
        CV.penUp();
        CV.goto(205, 345);
        CV.penDown();
    }
    // Draws twenty-seventh vertical line and moves to the twenty-eighth (Entry Stairs)
    if(CV.x == 205 & CV.y == 355){
        CV.penUp();
        CV.goto(255, 345);
        CV.penDown();
    }
    // Draws twenty-eighth vertical line and moves to the twenty ninth (Platform)
    if(CV.x == 255 & CV.y == 355){
        CV.penUp();
        CV.goto(180, 295);
        CV.penDown();
    }
    // Draws twenty-ninth vertical line and moves to the thirtieth (Platform)
    if(CV.x == 180 & CV.y == 345){
        CV.penUp();
        CV.goto(285, 295);
        CV.penDown();

    }
    // Draws thirtieth vertical line and moves to the thirty-first(Exterior Building Wall)
    if(CV.x == 285 & CV.y == 345){
        CV.penUp();
        CV.goto(30, 71);
        CV.penDown();

    }
    // Draws thirty-first vertical line and moves to the thirty-second(Exterior Building Wall)
    if(CV.x == 30 & CV.y == 295){
        CV.penUp();
        CV.goto(430, 71);
        CV.penDown();

    }
    // Draws thirty-second vertical (Exterior Building Wall) line and stops
    if(CV.x == 430 & CV.y == 295){
        // CVd = 0;
        CV.penUp();
        CV.goto(185, 94);
        CV.penDown();
    }

    // Draws first Horizontal line
    if(CH.x == 185 & CH.y == 110){

    }
    // Draws second horizontal line  and moves ot the third
    if(CH.x == 280 && CH.y == 110){
        CH.penUp();
        CH.goto(203, 136);
        CH.penDown();
    }
    // Draws third Horizontal line and moves to the fourth
    if(CH.x == 203 & CH.y == 136){
        CH.setWeight(1);
        CH.penUp();
        CH.goto(186, 153);
        CH.penDown();
    }
    // Draws fourth horizontal line and moves to the fifth
    if(CH.x == 212 & CH.y == 153){
        CH.penUp();
        CH.goto(186, 157)
        CH.penDown();
    }
    // Draws fifth horizontal line and moves to the sixth
    if(CH.x == 212 & CH.y == 157){
        CH.penUp();
        CH.goto(250, 153);
        CH.penDown();
    }
    // Draws sixth horizontal line and moves to the seventh
    if(CH.x == 280 & CH.y == 153){
        CH.penUp();
        CH.goto(250, 157);
        CH.penDown();
    }
    // Draws seventh horizontal line and moves to the eighth
    if(CH.x == 280 & CH.y == 157){
        CH.setWeight(2);
        CH.penUp();
        CH.goto(160, 154);
        CH.penDown();
    }
    // Draws eighth horizontal line and moves to the ninth
    if(CH.x == 165 & CH.y == 154){
        CH.penUp();
        CH.goto(297, 154);
        CH.penDown();
    }
    // Draws ninth horizontal line and moves to the tenth
    if(CH.x == 303 & CH.y == 154){
        CH.penUp();
        CH.goto(160, 175);
        CH.penDown();
    }
    // Draws tenth horizontal line an moves to the eleventh
    if(CH.x == 165 & CH.y == 175){
        CH.penUp();
        CH.goto(297, 175);
        CH.penDown();
    }
    // Draws eleventh horizontal line and moves to the twelfth
    if(CH.x == 303 & CH.y == 175){
        CH.setWeight(1);
        CH.penUp();
        CH.goto(175, 185);
        CH.penDown();
    }
    // Draws twelfth horizontal line and moves to the thirteenth (Stairs)
    if(CH.x == 195 & CH.y == 185){
        CH.penUp();
        CH.goto(268, 185);
        CH.penDown();
    }
    // Draws thirteenth horizontal line and moves the fourteenth (Stairs)
    if(CH.x == 288 & CH.y == 185){
        CH.penUp();
        CH.goto(175, 195);
        CH.penDown();
    }
    // Draws fourteenth horizontal line and moves to the fifteenth (Stairs)
    if(CH.x == 195 & CH.y ==195){
        CH.penUp();
        CH.goto(268, 195);
        CH.penDown();
    }
    // Draws fifteenth horizontal line and moves to the sixteenth (Stairs)
    if(CH.x == 288 & CH.y == 195){
        CH.penUp();
        CH.goto(175, 200);
        CH.penDown();
    }
    // Draws sixteenth horizontal line and moves to the seventeenth (Stairs)
    if(CH.x == 195 & CH.y == 200){
        CH.penUp();
        CH.goto(268, 200);
        CH.penDown();
    }
    // Draws seventeenth horizontal line and moves to the eighteenth (Stairs)
    if(CH.x == 288 & CH.y == 200){
        CH.penUp();
        CH.goto(175, 205);
        CH.penDown();
    }
    // Draws eighteenth horizontal line and moves to the nineteenth (Stairs)
    if(CH.x == 195 & CH.y == 205){
        CH.penUp();
        CH.goto(268, 205);
        CH.penDown();
    }
    // Draws nineteenth horizontal line and moves to the twentieth (Stairs)
    if(CH.x == 288 & CH.y == 205){
        CH.penUp();
        CH.goto(175, 210);
        CH.penDown();
    }
    // Draws twentieth horizontal line and moves to the twenty-first (Stairs)
    if(CH.x == 195 & CH.y == 210){
        CH.penUp();
        CH.goto(268, 210);
        CH.penDown();
    }
    // Draws twenty-first horizontal line and moves to the twenty-second (Stairs)
    if(CH.x == 288 & CH.y == 210){
        CH.penUp();
        CH.goto(175, 215);
        CH.penDown();
    }
    // Draws twenty-second horizontal line and moves to the twenty-third (Stairs)
    if(CH.x == 195 & CH.y == 215){
        CH.penUp();
        CH.goto(268, 215);
        CH.penDown();
    }
    // Draws twenty-third horizontal line and moves to the twenty-fourth (Stairs)
    if(CH.x == 288 & CH.y == 215){
        CH.penUp();
        CH.goto(175, 220);
        CH.penDown();
    }
    // Draws twenty-fourth horizontal line and moves to the twenty-fifth (Stairs)
    if(CH.x == 195 & CH.y == 220){
        CH.penUp();
        CH.goto(268, 220);
        CH.penDown();
    }
    // Draws twenty-fifth horizontal line and moves to the twenty-sixth (Entry Stair)
    if(CH.x == 288 & CH.y == 220){
        CH.penUp();
        CH.goto(205, 305);
        CH.penDown();
    }
    // Draws twenty-sixth horizontal line and moves to the twenty-seventh (Entry Stairs)
    if(CH.x == 255 & CH.y == 305){
        CH.penUp();
        CH.goto(205, 310);
        CH.penDown();
    }
    // Draws twenty-seventh horizontal line and moves to the twenty-eighth (Entry Stairs)
    if(CH.x == 255 & CH.y == 310){
        CH.penUp();
        CH.goto(205, 315);
        CH.penDown();
    }
    // Draws twenty-eighth horizontal line and moves to the twenty-ninth (Entry Stairs)
    if(CH.x == 255 & CH.y == 315){
        CH.penUp();
        CH.goto(185, 57);
        CH.penDown();
    }
    // Draws twenty-ninth horizontal line and moves to the thirtieth (Back Stairs)
    if(CH.x == 275 & CH.y == 57){
        CH.penUp();
        CH.goto(185, 70);
        CH.penDown();
    }
    // Draws thirtieth horizontal line and moves to the thirty-first (Entry Stairs)
    if(CH.x == 275 & CH.y == 70){
        CH.penUp();
        CH.goto(205, 350);
        CH.penDown();
    }
    // Draws thirty-first horizontal line and moves to the thirty-second (Entry Stairs)
    if(CH.x == 255 & CH.y == 350){
        CH.penUp();
        CH.goto(205, 355);
        CH.penDown();
    }
    // Draws thirty-second horizontal line and moves to the thirty-third (Platform)
    if(CH.x == 255 & CH.y == 355){
        CH.setWeight(3);
        CH.penUp();
        CH.goto(180, 345);
        CH.penDown();
    }
    // Draws thirty-third horizontal line and moves to the thirty-fourth (Exterior Building Wall)
    if(CH.x == 285 & CH.y == 345){
        CH.penUp();
        CH.goto(30, 71);
        CH.penDown();
    }
    // Draws thirty-fourth horizontal line and moves to the thirty-fifth (Exterior Building Wall)
    if(CH.x == 430 & CH.y == 71){
        CH.penUp();
        CH.goto(30, 295);
        CH.penDown();
    }
    // Draws thrity-fifth horizontal line (Exterior Wall) and stops
    if(CH.x == 430 & CH.y == 295){
        CH.penUp();
        CH.goto(185, 110);
        CH.penDown();
    }


    // Draws
    // if(t1.x == 30 & t1.y == 70){
    // }
    // if(t1.x == 430 && t1.y == 70){
    //     t1.penUp();
    //     t1.goto(30, 80);
    //     t1.penDown();
    // }
    // if(t1.x == 430 & t1.y == 80){
    //     t1.penUp();
    //     t1.goto(30, 90);
    //     t1.penDown();
    // }
    // if(t1.x == 430 & t1.y == 90){
    //     t1.penUp();
    //     t1.goto(30, 100);
    //     t1.penDown();
    // }
    // if(t1.x == 430 & t1.y == 100){
    //     t1.penUp();
    //     t1.goto(30, 110);
    //     t1.penDown();
    // }
    // if(t1.x == 430 & t1.y == 110){
    //     t1.penUp();
    //     t1.goto(30, 120);
    //     t1.penDown();
    // }
    // if(t1.x == 430 & t1.y == 110){
    //     t1.penUp();
    //     t1.goto(30, 120);
    //     t1.penDown();
    // }
    // t1.forward(d);
    CV.forward(CVd);
    CH.forward(CHd);

}




function drawBrickCountryHouse() {
    // Turns right at forst point to draw verticall lines, draws first vertical line
    if(BrV.x == 199 & BrV.y == 148){
        BrV.right(90);
    }
    // Moves to second point and draws vertical line
    if(BrV.x == 199 & BrV.y == 210){
        BrV.penUp();
        BrV.goto(225, 148);
        BrV.penDown();
    }
    // Moves to third point and draws vertical line
    if(BrV.x == 225 & BrV.y == 210){
        BrV.penUp();
        BrV.goto(245, 220);
        BrV.penDown();
    }
    // Moves to fourth point and draws vertical line
    if(BrV.x == 245 & BrV.y == 280){
        BrV.penUp();
        BrV.goto(292, 100);
        BrV.penDown();
    }
    // Moves to fifth point and draws vertical line
    if(BrV.x == 292 & BrV.y == 118){
        BrV.penUp();
        BrV.goto(296, 98);
        BrV.penDown();
    }
    // Moves to sixth point and draws vertical line
    if(BrV.x == 296 & BrV.y == 115){
        BrV.penUp();
        BrV.goto(320, 120);
        BrV.penDown();
    }
    // Moves to seventh point and draws vertical line
    if(BrV.x == 320 & BrV.y == 132){
        BrV.penUp();
        BrV.goto(334, 115);
        BrV.penDown();
    }
    // Moves to eight point and draws vertical lines
    if(BrV.x == 334 & BrV.y == 167){
        BrV.penUp();
        BrV.goto(414, 153);
        BrV.penDown();
    }
    // Moves to ninth point and draws vertical lines
    if(BrV.x == 414 & BrV.y == 167){
        BrV.penUp();
        BrV.goto(416, 156);
        BrV.penDown();
    }
    // Moves to tenth point and draws vertical lines
    if(BrV.x == 416 & BrV.y == 170){
        BrV.penUp();
        BrV.goto(343, 207);
        BrV.penDown();
    }
    // Moves to eleventh point and draws vertical lines
    if(BrV.x == 343 & BrV.y == 240){
        BrV.penUp();
        BrV.goto(360, 212);
        BrV.penDown();
    }
    // Moves to twelfth point and draws vertical lines
    if(BrV.x == 360 & BrV.y == 280){
        BrV.penUp();
        BrV.goto(470, 180);
        BrV.penDown();
    }
    // Moves to thirteenth point and draws vertical lines
    if(BrV.x == 470 & BrV.y == 186){
        BrV.setWeight(3);
        BrV.penUp();
        BrV.goto(249, 242);
        BrV.penDown();
    }
    // Moves to fourteenth point and draws vertical lines
    if(BrV.x == 249 & BrV.y == 275){
        BrV.penUp();
        BrV.goto(251, 0);
        BrV.penDown();
    }
    // Moves to fifteenth point and draws vertical lines
    if(BrV.x == 251 & BrV.y == 120){
        BrV.penUp();
        BrV.goto(270, 114);
        BrV.penDown();
    }
    // Moves to sixteenth point and draws vertical lines
    if(BrV.x == 270 & BrV.y == 150){
        BrV.penUp();
        BrV.goto(298, 175);
        BrV.penDown();
    }
    // Moves to seventeenth point and draws vertical lines
    if(BrV.x == 298 & BrV.y == 243){
        BrV.penUp();
        BrV.goto(320, 132);
        BrV.penDown();
    }
    // Moves to eighteenth point and draws vertical lines
    if(BrV.x == 320 & BrV.y == 177){
        BrV.penUp();
        BrV.goto(343, 240);
        BrV.penDown();
    }
    // Moves to nineteenth point and draws vertical lines
    if(BrV.x == 343 & BrV.y == 399){
        BrV.penUp();
        BrV.goto(447, 159);
        BrV.penDown();
    }
    // Moves to twentieth point and draws vertical lines
    if(BrV.x == 447 & BrV.y == 187){
        BrV.penUp();
        BrV.goto(461, 185);
        BrV.penDown();
    }
    // Moves to twenty-first point and draws vertical lines
    if(BrV.x == 461 & BrV.y == 213){
        BrV.penUp();
        BrV.goto(476, 187);
        BrV.penDown();
    }
    // Moves to twenty-second point and draws vertical lines
    if(BrV.x == 476 & BrV.y == 195){
        BrV.setWeight(6)
        BrV.penUp();
        BrV.goto(389, 170);
        BrV.penDown();
    }
    // Moves to twenty-third point and draws vertical lines
    if(BrV.x == 389 & BrV.y == 198){
        BrV.setWeight(2)
        BrV.penUp();
        BrV.goto(420, 192);
        BrV.penDown();
    }
    // Moves to twenty-fourth point and draws vertical lines
    if(BrV.x == 420 & BrV.y == 227){
        BrV.penUp();
        BrV.goto(422, 192);
        BrV.penDown();
    }
    // Moves to twenty-fifth point and draws vertical lines
    if(BrV.x == 422 & BrV.y == 227){
        BrV.penUp();
        BrV.goto(424, 192);
        BrV.penDown();
    }
    // Moves to twenty-sixth point and draws vertical lines
    if(BrV.x == 424 & BrV.y == 227){
        BrV.penUp();
        BrV.goto(426, 192);
        BrV.penDown();
    }
    // Moves to twenty-seventh point and draws vertical lines
    if(BrV.x == 426 & BrV.y == 227){
        BrV.penUp();
        BrV.goto(428, 192);
        BrV.penDown();
    }
    // Moves to twenty-eighth point and draws vertical lines
    if(BrV.x == 428 & BrV.y == 227){
        BrV.penUp();
        BrV.goto(430, 192);
        BrV.penDown();
    }
    // Moves to twenty-ninth point and draws vertical lines
    if(BrV.x == 430 & BrV.y == 227){
        BrV.penUp();
        BrV.goto(199, 148);
        BrV.penDown();
        // BrV.penUp();
        // BrV.goto(430, 192);
        // BrV.penDown();
    }

    // Draws first horizontal line for Brick country House
    if(BrH.x == 199 & BrH.y == 210){
    }
    // Moves to second point and draws horizontal line
    if(BrH.x == 217 && BrH.y == 210){
        BrH.penUp();
        BrH.goto(253, 98);
        BrH.penDown();
    }
    // Moves to third point and draws horizontal line
    if(BrH.x == 296 & BrH.y == 98){
        BrH.penUp();
        BrH.goto(253, 101);
        BrH.penDown();
    }
    // Moves to third point and draws horizontal line
    if(BrH.x == 263 & BrH.y == 101){
        BrH.penUp();
        BrH.goto(245, 280);
        BrH.penDown();
    }
    // Moves to fourth point and draws horizontal line
    if(BrH.x == 360 & BrH.y == 280){
        BrH.penUp();
        BrH.goto(296, 115);
        BrH.penDown();
    }
    // Moves to fifth point and draws horizontal line
    if(BrH.x == 334 & BrH.y == 115){
        BrH.penUp();
        BrH.goto(334, 167);
        BrH.penDown();
    }
    // Moves to sixth point and draws horizontal line
    if(BrH.x == 414 & BrH.y == 167){
        BrH.penUp();
        BrH.goto(332, 170);
        BrH.penDown();
    }
    // Moves to seventh point and draws horizontal line
    if(BrH.x == 365 & BrH.y == 170){
        BrH.penUp();
        BrH.goto(360, 212);
        BrH.penDown();
    }
    // Moves to eighth point and draws horizontal line
    if(BrH.x == 420 & BrH.y == 212){
        BrH.penUp();
        BrH.goto(407, 206)
        BrH.penDown();
    }
    // Moves to ninth point and draws horizontal line
    if(BrH.x == 420 & BrH.y == 206){
        BrH.penUp();
        BrH.goto(414, 153)
        BrH.penDown();
    }
    // Moves to tenth point and draws horizontal line
    if(BrH.x == 479 & BrH.y == 153){
        BrH.penUp();
        BrH.goto(416, 155)
        BrH.penDown();
    }
    // Moves to eleventh point and draws horizontal line
    if(BrH.x == 430 & BrH.y == 155){
        BrH.penUp();
        BrH.goto(430, 221)
        BrH.penDown();
    }
    // Moves to twelfth point and draws horizontal line
    if(BrH.x == 447 & BrH.y == 221){
        BrH.penUp();
        BrH.goto(430, 225)
        BrH.penDown();
    }
    // Moves to thirteenth point and draws horizontal line
    if(BrH.x == 479 & BrH.y == 225){
        BrH.setWeight(3)
        BrH.penUp();
        BrH.goto(236, 159)
        BrH.penDown();
    }
    // Moves to fourteenth point and draws horizontal line
    if(BrH.x == 303 & BrH.y == 159){
        BrH.penUp();
        BrH.goto(264, 101)
        BrH.penDown();
    }
    // Moves to fifteenth point and draws horizontal line
    if(BrH.x == 290 & BrH.y == 101){
        BrH.penUp();
        BrH.goto(285, 120)
        BrH.penDown();
    }
    // Moves to sixteenth point and draws horizontal line
    if(BrH.x == 330 & BrH.y == 120){
        BrH.penUp();
        BrH.goto(300, 187)
        BrH.penDown();
    }
    // Moves to seventeenth point and draws horizontal line
    if(BrH.x == 330 & BrH.y == 187){
        BrH.penUp();
        BrH.goto(315, 206)
        BrH.penDown();
    }
    // Moves to eighteenth point and draws horizontal line
    if(BrH.x == 406 & BrH.y == 206){
        BrH.penUp();
        BrH.goto(366, 170)
        BrH.penDown();
    }
    // Moves to nineteenth point and draws horizontal line
    if(BrH.x == 416 & BrH.y == 170){
        BrH.penUp();
        BrH.goto(430, 158)
        BrH.penDown();
    }
    // Moves to twentieth point and draws horizontal line
    if(BrH.x == 454 & BrH.y == 158){
        BrH.penUp();
        BrH.goto(430, 197)
        BrH.penDown();
    }
    // Moves to twenty-first point and draws horizontal line
    if(BrH.x == 454 & BrH.y == 197){
        BrH.penUp();
        BrH.goto(448, 177)
        BrH.penDown();
    }
    // Moves to twenty-second point and draws horizontal line
    if(BrH.x == 464 & BrH.y == 177){
        BrH.penUp();
        BrH.goto(464, 205)
        BrH.penDown();
    }
    // Moves to twenty-third point and draws horizontal line
    if(BrH.x == 477 & BrH.y == 205){
        BrH.penUp();
        BrH.goto(447, 221)
        BrH.penDown();
    }
    // Moves to twenty-fourth point and draws horizontal line
    if(BrH.x == 479 & BrH.y == 221){
        BrH.penUp();
        BrH.goto(250, 275)
        BrH.penDown();
    }
    // Moves to twenty-fifth point and draws horizontal line
    if(BrH.x == 306 & BrH.y == 275){
        BrH.setWeight(2);
        BrH.penUp();
        BrH.goto(266, 237)
        BrH.penDown();
    }
    // Moves to twenty-sixth point and draws horizontal line
    if(BrH.x == 280 & BrH.y == 237){
        BrH.setWeight(2);
        BrH.penUp();
        BrH.goto(266, 239)
        BrH.penDown();
    }
    // Moves to twenty-seventh point and draws horizontal line
    if(BrH.x == 280 & BrH.y == 239){
        BrH.penUp();
        BrH.goto(266, 241)
        BrH.penDown();
    }
    // Moves to twenty-eigth point and draws horizontal line
    if(BrH.x == 280 & BrH.y == 241){
        BrH.penUp();
        BrH.goto(216, 207)
        BrH.penDown();
    }
    // Moves to twenty-ninth point and draws horizontal line
    if(BrH.x == 270 & BrH.y == 207){
        BrH.penUp();
        BrH.goto(216, 209)
        BrH.penDown();
    }
    // Moves to thirtieth point and draws horizontal line
    if(BrH.x == 270 & BrH.y == 209){
        BrH.penUp();
        BrH.goto(216, 211)
        BrH.penDown();
    }
    // Moves to thirty-first point and draws horizontal line
    if(BrH.x == 270 & BrH.y == 211){
        BrH.penUp();
        BrH.goto(216, 213)
        BrH.penDown();
    }
    // Moves to thirty-second point and draws horizontal line
    if(BrH.x == 270 & BrH.y == 213){
        BrH.penUp();
        BrH.goto(216, 215)
        BrH.penDown();
    }
    // Moves to thirty-third point and draws horizontal line
    if(BrH.x == 270 & BrH.y == 215){
        BrH.penUp();
        BrH.goto(216, 217)
        BrH.penDown();
    }
    // Moves to thirty-fourth point and draws horizontal line
    if(BrH.x == 270 & BrH.y == 217){
        BrH.penUp();
        BrH.goto(216, 219)
        BrH.penDown();
    }
    // Moves to thirty-fifth point and draws horizontal line
    if(BrH.x == 270 & BrH.y == 219){
        BrH.setWeight(4)
        BrH.penUp();
        BrH.goto(0, 150)
        BrH.penDown();
    }
    // Moves to thirty-fifth point and draws horizontal line
    if(BrH.x == 270 & BrH.y == 150){
        BrH.penUp();
        BrH.goto(199, 210);
        BrH.setWeight(1);
        BrH.penDown();
        // BrH.penUp();
        // BrH.goto(0, 147)
        // BrH.penDown();
    }


    BrV.forward(BrVd);
    BrH.forward(BrHd);
}

sijings-Final Project

For this project, I want to visualize a set of data from NASA about temperature change and Antarctic mass loss. Instead of just looking at statistical graphs, I chose to investigate from a image perspective that the audience may get a better connection. I found out that although we all know what global warming is, we don’t really connect them to ourselves, thus, I create a direct connection between our daily necessities (food and water) and the changes. The project is divided to two parts, one is to visualize the relationship between the loss of wheat and increasing temperature, the second part is to visualize the relationship between the loss of water and the decreasing antarctic mass. For our knowledge,  there are applications of recursion, use of objects, for loops, etc. The data are all transformed with equations calculated from certain patterns and unit comparison. The project on wordpress is not displayed correctly and very slow, for the full project, please download the linked zip file (below are both the original and the scaled) and see it chrome. 

The introduction
The help page
The second part displaying the relationship between wheat and temperature
The first part between water and Antarctic mass

sijings-termP-original

sijings-termP-scaled

sijings-termP-scaled

//Clair(sijing) Sun
//session C
//sijings@andrew.cmu.edu
//sijings-11-B

///////////global vriables///////////
var wheatX = 50;
var wheatY = 50;
var wheatL = 20;
var frames = [];
var backgroundR = 204;
var backgroundG = 229;
var backgroundB = 237;
var TemperatureMode = false;
var startMode = true;
var iceMode = false;
var helpMode = false;
var img;
var animateW = 200;
var animateH = 50;

///////////global value for ice mass///////////

//all data from NASA.com: URL: https://climate.nasa.gov/vital-signs/land-ice/
var dateRecorded = ["2002.4.16", "2002.5.8", "2002.8.15", "2002.9.17", "2002.10.16", "2002.11.14", 
 "2002.12.17", "2003.1.15", "2003.2.13", "2003.3.15", "2003.4.16", "2003.5.12",
 "2003.7.17",  "2003.8.15", "2003.9.17", "2003.10.16", "2003.11.14", "2003.12.17",
 "2004.1.08", "2004.2.17",  "2004.3.17", "2004.4.16", "2004.5.15", "2004.6.17", "2004.7.16", "2004.8.14",     
 "2004.9.16", "2004.10.16", "2004.11.14", "2004.12.17","2005.1.15","2005.2.13", "2005.3.15", "2005.4.16", 
 "2005.5.16", "2005.6.17", "2005.7.16", "2005.8.14","2005.9.16", "2005.10.16", "2005.11.14", "2005.12.17", 
 "2006.1.15", "2006.2.13", "2006.3.15", "2006.4.16", "2006.5.16", "2006.6.14", "2006.7.17", "2006.8.15", 
 "2006.9.17", "2006.10.16", "2006.11.14", "2006.12.17", "2007.1.15", "2007.2.13", "2007.3.15", 
 "2007.4.16", "2007.5.16", "2007.6.14", "2007.7.17", "2007.8.15", "2007.9.17", 
 "2007.10.16", "2007.11.14", "2007.12.17", "2008.1.15", "2008.2.13", "2008.3.15", 
 "2008.4.16", "2008.5.15", "2008.6.17", "2008.7.16", "2008.8.14", "2008.9.16", "2008.10.16",     
 "2008.11.14", "2008.12.17", "2009.1.15", "2009.2.13", "2009.3.15", "2009.4.16", "2009.5.16",   
 "2009.6.17", "2009.7.17", "2009.8.14", "2009.9.16", "2009.10.16", "2009.11.14", "2009.12.17",    
 "2010.1.15", "2010.2.13", "2010.3.15", "2010.4.16", "2010.5.15", "2010.6.17",  "2010.7.16",
 "2010.8.14", "2010.9.16", "2010.10.16", "2010.11.14", "2010.12.17", "2011.2.17", 
 "2011.3.15", "2011.4.16", "2011.5.16", "2011.7.20", "2011.8.15", "2011.9.17", "2011.10.16",
 "2011.10.30", "2011.10.30", "2012.1.1", "2012.2.13", "2012.3.17", "2012.4.8", "2012.6.17",
 "2012.7.16", "2012.8.14", "2012.9.13", "2012.11.21", "2012.12.17", "2013.1.15", "2013.2.13",
 "2013.4.20", "2013.5.16", "2013.6.17", "2013.7.17", "2013.10.16", "2013.11.14", "2013.12.17",
 "2014.1.8", "2014.3.18", "2014.4.16", "2014.5.16", "2014.6.14", "2014.8.15", "2014.9.17", 
 "2014.10.16", "2014.11.18", "2015.1.22", "2015.2.13", "2015.3.15", "2015.4.16", "2015.4.27",
 "2015.7.13", "2015.8.15", "2015.9.13", "2015.12.21", "2016.1.15", "2016.2.13", "2016.3.17",
 "2016.5.19", "2016.6.17", "2016.7.16", "2016.8.22", "2016.11.29", "2016.12.24", "2017.1.22"]  

var iceMassL = [  0.00, 62.12, -176.07, 170.09, 33.71, -81.62, -51.14, -249.68, -168.66, 
                -238.74, -143.83, -29.82, -139.58,  -118.44, -48.72, -84.84, -107.17, 
                -83.32, -218.59, -604.75, -322.73, -412.72, -98.40, -99.73, -331.48, 
                -361.87, -287.24, 78.00, -181.62, -229.19, -323.17, -379.81, -362.53, 
                -276.68, -285.66, -196.75, -128.12, -342.36, -109.54, -121.62, -97.43, 
                -137.23, -315.63, -340.25, -296.39, -307.18, -178.31, -154.18, -196.17, 
                2.39, -10.96, -74.55, -162.59, -244.63, -451.67, -427.09, -453.85, 
                -356.27, -70.24, -269.10, -295.85, -222.92, -196.99, -374.88, -467.93, 
                -469.47, -715, -676.06, -660.57, -515.51, -518.89, -484.19, -764.67, 
                -821.51, -540.05, -536.66, -476.17, -572.55, -682.62, -641.78, -592.27, 
                -577.59, -572.47, -570.43, -546.31, -550.68, -544.09, -548.48, -587.92, 
                -587.78, -846.48, -671.72, -621.76, -706.68, -727.68, -809.36, -1071.51, 
                -953.83, -841.41, -935.26, -928.85, -789.81, -1033.29, -1086.26, -1138.23, 
                -1017.76, -1035.13, -951.88, -827.31, -914.18, -611.65, -948.14, -1066.81, 
                -1088.57, -1025.66, -1043.95, -1028.25, -1196.57, -987.23, -734.95, -807.52, 
                -996.11, -1220.58, -1329.47, -1116.96, -994.06, -989.43, -1085.24, -1066.72, 
                -1215.76, -1162.48, -1424.32, -1606.66, -1386.24, -1253.63, -1480.57, 
                -1531.72, -1252.97, -1383.92, -1321.53, -1687.98, -1697.55, -1808.10, 
                -1825.73, -1735.62, -1862.28, -1934.24, -1778.25, -1637.34, -1604.18, 
                -1679.21, -1516.72, -1755.32, -1611.07, -1750.97, -1808.04, -1438.70, 
                -1840.86, -1933.91]; 

var cupW = 300;
var cupH = 400;
var top1H = 30;
var top3H = 10;
var xspacing = 0.5;    // Distance between each horizontal location
var w;                // Width of entire wave
var theta = 0.0;      // Start angle at 0
var amplitude = 5.0; // Height of wave
var period = 150.0;   // How many pixels before the wave repeats
var dxWave;               // Value for incrementing x
var yvalues;  // Using an array to store height values for the wave
var beginAnimate = false;
var beginChanges = false;
var iceCount = 0; //to represent framerate

var instruct1; //two images in help
var instruct2;

/////////preloading images////////////

function preload(){
    //loading mountains on page 1
    img = loadImage("https://i.imgur.com/BIk36Rs.png");
    //loading mouth
    var filenames = [];
    filenames[0] = "https://i.imgur.com/fDCS6G3.png";
    filenames[1] = "https://i.imgur.com/XqYcfeX.png";
    filenames[2] = "https://i.imgur.com/vOOvd64.png";
    filenames[3] = "https://i.imgur.com/XqYcfeX.png";
    filenames[4] = "https://i.imgur.com/tmTBJXg.png";
    filenames[5] = "https://i.imgur.com/XqYcfeX.png";
    for (var i = 0; i < filenames.length; i++){//create a new arrary for humans
        frames.push(loadImage(filenames[i]));
    }
    //load instructural images
    instruct1 = loadImage("https://i.imgur.com/yXqSt39.png");
    instruct2 = loadImage("https://i.imgur.com/8KBVWZK.png");
}

//////////setting moving particles///////// Some ideas are inspired by TA's leadinglecture

var gravity = 0.01;   // downward acceleration
var springy = 1.2; // how much velocity is retained after bounce
var drag = 0.0001;    // drag causes particles to slow down
var np = 100;      // how many particles


function particleStep() {
    var forceX = (mouseX / 0.4 - this.x) / dist(this.x,this.y,mouseX / 0.4 ,mouseY / 0.4) * 0.1;
    var forceY = (mouseY / 0.4 - this.y) / dist(this.x,this.y,mouseX / 0.4 ,mouseY / 0.4) * 0.1;
    this.dx -= forceX;
    this.dy -= forceY;
    this.x += this.dx;
    this.y += this.dy;
    if (this.x > width) { // bounce off right wall
        this.x = width - (this.x - width);
        this.dx = -this.dx * springy;
    } else if (this.x < 0) { // bounce off left wall
        this.x = -this.x;
        this.dx = -this.dx * springy;
    }
    if (this.y > height) { // bounce off bottom
        this.y = height - (this.y - height);
        this.dy = -this.dy * springy;
    } else if (this.y < 0) { // bounce off top
        this.y = -this.y;
        this.dy = -this.dy * springy;
    }
    var vs = Math.pow(this.dx, 2) + Math.pow(this.dy, 2);
    // d is the ratio of old velocty to new velocity
    var d = vs * drag;
    d = min(d, 1);
    this.dx *= (1 - d);
    this.dy *= (1 - d);
}


function particleDraw() {
    fill(this.randomR,this.randomG,207,this.randomOpacity);
    ellipse(this.x, this.y,this.scaleS,this.scaleS);

}

function makeParticle(px, py, pdx, pdy) {
    p = {x: px, y: py,
        dx: pdx, dy: pdy,
        step: particleStep,
        render: particleDraw,
        scaleS: random(10,55), //because of the color gradiation on the background
        randomR: map(mouseY,0,height,250,100),//the foreground color also needs a transition
        randomG: random(150,200),
        randomOpacity: random(70,100)
        }
    return p;
}

var particles = [];

/////////basic setup//////////
function setup() {//2.6,x       1.875,y
    createCanvas(1250, 900);
    //loading moving circles on the front page
    for (var i = 0; i < np; i++) {
        particles.push(makeParticle(200, 200,random(-0.25, 0.25), random(-0.25, 0.25)));
    }
    w = width/2+cupW/2-3;
    dxWave = (TWO_PI / period) * xspacing;
    yvalues = new Array(floor(w/xspacing));
}

////////////draw function is divided to different modes as each will lead to a differect part of 
////////////the project

function draw() {
    scale(0.4,0.4);
    background(backgroundR, backgroundG, backgroundB); //set as variables for later changes
    ///////////////call of temperature mode////////////////
    if (TemperatureMode == true){
        fill(252,235,198);
        draWheats();
        fill(255,150);
        rect(150,height - 80,300,50);
        textSize(18);
        fill(103, 114, 175);
        text("Click me to the start",190,height - 50);
    }
    ///////////////call of start mode////////////////
    if (startMode == true){
        //using recursion for drawing a transitional background
        push();
        translate(200, 350);
        colorLayer1(0, 2);
        pop();
        push();
        scale(0.25,0.25);
        image(img,width / 2 - 700,height / 2 - 100);
        pop();

        //activate boxes & introduction behind & around the text 1
        var higherx = width / 2 - 50;
        var lowerx = width/2 - 450;
        if (mouseX / 0.4 < higherx & mouseX / 0.4 > lowerx && mouseY / 0.4 > height/2 - 60 && mouseY / 0.4 < height/2 + 50){
            push();
            strokeWeight(1);
            noFill();
            stroke(255);
            var quadx1 = width/2 - 400;
            var quadx2 = width/2 - 50;
            var quadx3 = width/2 - 100;
            var quadx4 = width/2 - 450;
            quad(quadx1, height/2 - 60, quadx2, height/2 - 60, quadx3, height/2 + 50, quadx4, height/2 + 50);
            pop();
            textSize(15);
            fill(0, 102, 153);
            text("Click to see the relationship between Antarctica ice mass and our primary drink source", width/2-400, 280, 200, 300);
        }

        //activate boxes & introduction behind & around the text 2
        if (mouseX / 0.4 < width/2+420 && mouseX / 0.4 > width/2+70 && mouseY / 0.4 < height/2+50 && mouseY / 0.4 > height/2-60){
            push();
            strokeWeight(1);
            noFill();
            stroke(255);
            quad(width/2+70, height/2-60, width/2+420, height/2-60, width/2+370, height/2+50, width/2+20, height/2+50);
            pop();
            textSize(15);
            fill(0, 102, 153);
            text("Click to see the relationship between temperature and our primary food source: wheat", width/2+70, 280, 200, 300);
        }

        //writing the text
        textSize(28);
        fill(0, 102, 153);
        textFont("Courier New");
        text("Antarctica Mass", width/2-400, height/2);
        text("Temperature Change", width/2+100,height/2);
        text("HELP",width-100,height-20);
        
        //loading the particles
        push();
        noStroke();
        for (var i = 0; i < particles.length; i++) { // for each particle
            var p = particles[i];
            p.step();
            p.render();
        }
        if (mouseIsPressed) {
            particles.push(makeParticle(mouseX/0.4, mouseY/0.4,random(-0.5, 0.5), random(-0.5, 0.5)));
        }
        pop();
    }

    if (iceMode == true){
        noFill();
        drawIce();
    } 

    if (helpMode == true){
        backgroundR=192;
        backgroundG=213;
        backgroundB=247;
        textSize(18);
        fill(0, 102, 153);
        textFont("Courier New");
        text("We are all familiar with the idea 'GLOBAL WARMING',",width/2-400, 100); 
        text("however, do we really connect ourselves with it? ", width/2-400, 120);
        text("Human are not always sensitive to numerical values. Therefore, what we understand",width/2-400, 160);
        text("as 'GLOBAL WARMING' may not be what actually happened. Here, statistical graphs", width/2-400, 180);
        text("are transformed to animations that demonstrate the changes. By connecting our", width/2-400, 200);
        text("primary needs with the changes, a tight relationship is shown.",width/2-400, 220);
        
        text("The second part, Temperature Change, is a interactive data", width/2-120, 660);
        text("visualization, by having the audience able to use up-arrow", width/2-120, 680);
        text("and down-arrow key on their keyboard, they are able to see", width/2-120, 700);
        text("the changes of temperature from its influence on wheat from",width/2-120,720);
        text("1880 to 2016",width/2-120,740);
        
        text("The first part is a animation where the audience will follow the",width/2-120, 350); 
        text("instructions, and by few clicks see the changes in the amount", width/2-120, 370);
        text("of our drinkable water from 2003 to 2017", width/2-120, 390);
        push();
        scale(0.17,0.17);
        image(instruct1,width/2+140,height/2+3000);
        image(instruct2,width/2+140,height/2+1200);
        pop();
        textSize(28);
        fill(0, 102, 153);
        text("BACK",width-100,height-20);

    }
}
function mousePressed() {
    if (startMode == true){
        if ((mouseX / 0.4) < width/2-50 & (mouseX / 0.4) > width/2-450 && (mouseY / 0.4) > height/2-60 && (mouseY / 0.4) < height/2+50){
            iceMode = true;
            startMode = false;
        }
        if (mouseX / 0.4 < width/2+420 & mouseX / 0.4 > width/2+70 && mouseY / 0.4 < height/2+50 && mouseY / 0.4 > height/2-60){
            TemperatureMode = true;
            startMode = false;
        }
        if (mouseX / 0.4 > width - 100 & mouseX / 0.4 < width - 30 && mouseY / 0.4 > height - 40 && mouseY / 0.4 < height - 10){
            helpMode = true;
            startMode = false;
        }
    }
    else if (TemperatureMode == true){
        if (mouseX / 0.4 > width/2-60 & mouseX / 0.4 < width/2-60+150 && mouseY / 0.4 > height-80 && mouseY / 0.4 < height-80+50){
            yearCount=2016;
        }
        if (mouseX / 0.4 < 450 & mouseX / 0.4 > 150 && mouseY / 0.4 < height-30 && mouseY / 0.4 > height-80){
            startMode = true;
            TemperatureMode = false;
        }
    }
    else if (iceMode == true){
        rect(width/2-animateW/2,height-animateH*3.5,animateW,animateH);
        if (beginAnimate == true & mouseX / 0.4 >width/2-animateW/2 && mouseX / 0.4 height-animateH*3.5 && mouseY / 0.4  width/2-animateW*1.8 && mouseX / 0.4 < width/2-animateW*1.8+210 && mouseY / 0.4 > height/2+275 && mouseY / 0.4 < height/2+275+50){
            startMode = true;
            iceMode = false;
            iceCount = 0;
            beginChanges = false;
            beginAnimate = false;

        }
    }
    
    else if (helpMode == true){
        if (mouseX / 0.4 > width - 100){
            helpMode = false;
            startMode = true;
        }
    }
}

/////////////recursion for background transition//////////////////
var colorR=215;
var colorG=112;
var colorB=106;
function colorLayer1(depth, len) {
    noStroke();
    fill(colorR+depth/3,colorG+depth/3,colorB+depth/3);
    rect(-200,-400,width,2);
    push();
    translate(0, len);
    colorLayer2(depth + 1, len);
    pop();
}

function colorLayer2(depth, len) {
    if (depth < 400) {
        colorLayer1(depth, len);
    }
}

/////////////data for wheat//////////////////
var wheatCounter=0;
var yearCount=1880;
var averTemp = [-0.20, -0.12 , -0.10, -0.21, -0.28, -0.32, -0.31, -0.33, -0.20, -0.12, -0.37, -0.24, -0.27,
                -0.30, -0.31, -0.21, -0.15, -0.11, -0.28, -0.16, -0.09, -0.15, -0.27, -0.35, -0.44, -0.28, 
                -0.23, -0.40, -0.43, -0.47, -0.42, -0.44, -0.35, -0.34, -0.16, -0.11, -0.34, -0.40, -0.26,
                -0.22, -0.27, -0.21, -0.28, -0.24, -0.28, -0.21, -0.10, -0.21, -0.21, -0.36, -0.15, -0.09,
                -0.17, -0.28, -0.14, -0.20, -0.15, -0.03, -0.03, -0.03, 0.08, 0.12, 0.09, 0.13, 0.25, 0.12,
                -0.04, -0.05, -0.09, -0.09, -0.18, -0.07, 0.01, 0.08, -0.13,-0.15,-0.20, 0.04, 0.07, 0.03,
                -0.02, 0.05, 0.03, 0.06, -0.20, -0.10, -0.05, -0.02, -0.07, 0.07, 0.02, -0.09, 0.01, 0.15,
                -0.07, -0.02, -0.11, 0.18, 0.07, 0.17, 0.27, 0.33, 0.13, 0.30, 0.15, 0.12, 0.19, 0.33, 0.41,
                0.28, 0.44, 0.43, 0.23, 0.24, 0.32, 0.46, 0.35, 0.48, 0.64, 0.42, 0.42, 0.55, 0.63, 0.62, 0.55, 
                0.69, 0.63, 0.66, 0.54, 0.64, 0.71, 0.60, 0.63, 0.65, 0.74, 0.87, 0.99]

var wheat;
var leaf;
var levelofO;
var lowestTemp = -0.47;//data from NASA
var convertionRate = 0.16
//calculated by 1 temperature will effect 6 wheats to disappear, then one corresponds to 0.16 degree

function convertion(){//this convert the averTemp to the desired value for display
    var currentTemp;
    currentTemp = averTemp[yearCount - 1880] - lowestTemp;
    wheat = floor(currentTemp / convertionRate);
    leaf = floor((currentTemp / convertionRate * 10) % 10);
    levelofO = (currentTemp / convertionRate * 10) % 10 - leaf;
}


function draWheats(){
    convertion();
    var numofL;
    wheatCounter += 0.1;
    backgroundR = 103;
    backgroundG = 114;
    backgroundB = 175;
    noStroke();
    angleMode(DEGREES);
    
    //draw background years
    textSize(100);
    fill(255,100);
    textFont("Courier New");
    text("YEAR " + yearCount, width/2 - 270, height/2);
    
    //draw wheats and mouths
    fill(252,235,198);
    for (var y = 0; y < 10; y ++){
        wheatX = 50 + y * 120;
        for (var i = 0; i < 10; i ++){//top part
            numofL = 0;
            if (i <= wheat & i >= 1 && y < 1){//4 is the number of 麦子
                fill(252,235,198,20);

            }else{fill(252,235,198)}
            
            numofL += 1;
            if (i == wheat + 1 & y < 1){
                if (numofL <= leaf) {
                    fill(252,235,198,20);
                }else{fill(252,235,198)}
            }
            arc(wheatX, wheatY, wheatL, wheatL, 85, 190,CHORD);

            numofL += 1;
            if (i == wheat + 1 & y < 1){
                if (numofL <= leaf) {
                    fill(252,235,198,20);
                }else{fill(252,235,198)}
            }
            arc(wheatX - 9, wheatY + 8, wheatL, wheatL, 265, 10, CHORD);

            push();//left part1
            translate(0,8);
            numofL += 1;
            if (i == wheat + 1 & y < 1){
                if (numofL <= leaf) {
                    fill(252,235,198,20);
                }else{fill(252,235,198)}
            }
            arc(wheatX, wheatY, wheatL, wheatL, 60, 160,CHORD);
    
            ////determine if filling the leaves
            numofL+=1;
            if (i == wheat + 1 & y < 1){
                if (numofL <= leaf) {
                    fill(252,235,198,20);
                }else{fill(252,235,198)}
            }
            arc(wheatX - 4, wheatY + 10, wheatL - 3, wheatL - 3, 230, 355, CHORD);
            translate(7,8);//left part2

            numofL += 1;
            if (i == wheat + 1 & y < 1){
                if (numofL <= leaf) {
                    fill(252,235,198,20);
                }else{fill(252,235,198)}
            }
            arc(wheatX, wheatY, wheatL, wheatL, 60, 160, CHORD);
            
            numofL += 1;
            if (i == wheat + 1 & y < 1){
                if (numofL <= leaf) {
                    fill(252,235,198,20);
                }else{fill(252,235,198)}
            }
            arc(wheatX - 4, wheatY + 10, wheatL - 3, wheatL - 3, 230, 355, CHORD);
            pop();

            push();//right part1
            numofL += 1;
            if (i == wheat + 1 & y < 1){
                if (numofL <= leaf) {
                    fill(252,235,198,20);
                }else{fill(252,235,198)}
            }
            translate(10,6);
            arc(wheatX, wheatY, wheatL, wheatL, 110, 220, CHORD);

            numofL += 1;
            if (i == wheat + 1 & y < 1){
                if (numofL <= leaf) {
                    fill(252,235,198,20);
                }else{fill(252,235,198)}
            }
            arc(wheatX - 11, wheatY + 3, wheatL, wheatL, 290, 40, CHORD);
            
            numofL += 1;
            if (i == wheat + 1 & y < 1){
                if (numofL <= leaf) {
                    fill(252,235,198,20);
                }else{fill(252,235,198)}
            }
            translate(7,8);//right part2
            arc(wheatX, wheatY, wheatL, wheatL, 110, 220, CHORD);
            
            numofL += 1;
            if (i == wheat + 1 & y < 1){
                if (numofL <= leaf) {
                    fill(252,235,198,20);
                }else{fill(252,235,198)}
            }
            arc(wheatX - 11, wheatY + 3, wheatL, wheatL, 290, 40,CHORD);
        
            pop();
            wheatY=50 + i * 80;//for listing all the ys
            push();
            strokeWeight(0.4);
            stroke(252,235,198);
            translate(-9, -1);
            line(wheatX - 5, wheatY - 5, wheatX, wheatY);//top
            line(wheatX - 5, wheatY + 10, wheatX, wheatY + 13);//left1
            line(wheatX + 10, wheatY - 5, wheatX + 12,wheatY + 1);//right1
            line(wheatX, wheatY + 18, wheatX+7, wheatY + 21);//left2
            line(wheatX + 19, wheatY + 10, wheatX + 17, wheatY + 1);//right2
            strokeWeight(1);//root
            line(wheatX + 2, wheatY + 5, wheatX + 29, wheatY + 32);
            pop();
            push();
            var framesC = round(frameCount/6);
            scale(0.1,0.1);
            image(frames[framesC % 6], wheatX * 10, wheatY * 10);
            pop();
        }
    }
    
    fill(255,150);
    if (mouseX / 0.4 > width/30 & mouseX / 0.4 < width/30 + 50 && mouseY / 0.4 > height/18 && mouseY / 0.4 < height/18+50){
        textSize(12);
        fill(173, 129, 225);
        text("1880 -0.2",mouseX / 0.4 +50,mouseY+50);
    }

    rect(width/2-60,height-80,150,50);
    textSize(18);
    fill(103, 114, 175);
    text("Jump to 2016",width/2-50,height-50);
}

function drawIce(){
    iceCount += 1;
    backgroundR = 103;
    backgroundG = 114;
    backgroundB = 175;
    noFill();
    strokeWeight(4);
    stroke(230);
    rect(width / 2 + cupW / 3 - 10, height / 2 - cupH / 2 - top3H, cupW / 6 + 10, -top1H);
    rect(width / 2 + cupW / 3, height / 2 - cupH / 2 - top3H, cupW / 8, top3H);
    rect(width / 2 - cupW / 2, height / 2-cupH / 2, cupW, cupH);

    calcWave();
    renderWave();
    fill(255,200);
    rect(width/2 - 130, height/2 - 190, 65, 25, 20);
    animation();
    
    push();
    var increaseCount = frameCount/3;
    fill(255,190);
    rect(width/2 - animateW * 1.8,height / 2 + 275, 210, 50);
    strokeWeight(0.8 + 0.08 * (increaseCount % 10));
    fill(103,114,175);
    stroke(18);
    textSize(14);
    textFont("Courier New"); 
    text("Click me to the start", width/2 - animateW * 1.7, height / 2 + 295, 350, 100);
    pop();

    if (beginAnimate == true){
        noFill();
        var increaseCount = frameCount/3;
        strokeWeight(0.8 + 0.1 * (increaseCount % 10));
        stroke(230);
        rect(width / 2 - animateW / 2, height - animateH * 3.5, animateW, animateH);
        textSize(12);
        textFont("Courier New"); 
        text("See the changes 2002~2017", width / 2 - animateW / 4 - 40, height - animateH * 3);
        noStroke();
        fill(194,211,231);
        textSize(100);
        textFont("Courier New"); 
        fill(255,100);
        text("X 100", width / 2 + cupW / 1.5, 250, 200, 280);
    }
}


function animation(){
    if (iceCount <= 80){
        textSize(18);
        textFont("Courier New"); 
        fill(255);
        text("Since 2002, there are about 127.0 gigatones loss On antarctica mass every year", width / 2 + cupW / 1.5, 210, 200, 280);
    }
    else if (iceCount > 80 & iceCount <= 160){
        textSize(18);
        textFont("Courier New"); 
        fill(255);
        text("Through the numerical data, we may not see the changes clearly", width / 2 + cupW / 1.5, 210, 200, 280);
    }
    else if (iceCount > 160 & iceCount <= 240){
        textSize(18);
        textFont("Courier New"); 
        fill(255);
        text("However, what we do relate the this place counts 68% of the fresh water for the entire earth", width / 2 + cupW / 1.5, 210, 200, 280);
    }
    else if (iceCount > 240 & iceCount <= 320){
        textSize(18);
        textFont("Courier New"); 
        fill(255);
        text("What if we transform the loss of ice into the loss of our drinkable water?", width/2+cupW/1.5,210,200,280);
    }
    else if (iceCount > 320 & iceCount <= 400){
        textSize(18);
        textFont("Courier New"); 
        fill(255);
        text("Here, I show what happen to 1 bottle of water if we devide this water source into 100 bottles of water", width/2 + cupW/1.5, 210, 200, 280);
    }
    else{beginAnimate=true;}
}
function calcWave() {
    // Increment theta (try different values for 
    // 'angular velocity' here)
    theta += 0.02;

    // For every x value, calculate a y value with sine function
    var x = theta;
    for (var i = 0; i < yvalues.length; i++) {
        yvalues[i] = sin(x)*amplitude;
        x += dxWave;
    }
}
var inputwaterL;
var currentwaterL;
var waterR=255;
var waterG=255;
var waterB=255;
var dateCount=0;
var converticeM=1.091*(10**3);
var totaliceM=2.65*(10**9);
var currentSum;
var changeT=0;

function convertwaterL(){
    if (frameCount % 7 == 0 & changeT < (iceMassL.length - 1) && beginChanges == true){
        changeT += 1;
    }  
    inputwaterL = ((totaliceM - ((-1 * (iceMassL[changeT] - 170.1)) * converticeM)) / (totaliceM));
    inputwaterL = inputwaterL * 100 - 99;
}

function renderWave() {
    convertwaterL();
    currentwaterL = height - (inputwaterL * height);
    currentwaterL = map(currentwaterL, 0, height, height / 2 - cupH / 2, height / 2 + cupH / 2);
    textSize(100);
    fill(255,100);
    textFont("Courier New"); 
    text(dateRecorded[changeT], width / 2 - 270, 100);
    noStroke();
    fill(194,211,231);
    rect(width / 2 - cupW / 2 + 2, currentwaterL + 20, cupW - 4,(height / 2 + cupH / 2 - (currentwaterL + 20)));

    // A simple way to draw the wave with an ellipse at each location
    for (var i = 0; i < 10;i ++){
        waterR = 255 - i * 6.1;
        waterG = 255 - i * 4.4;
        waterB = 255 - i * 2.5;
        for (var x = 955; x < yvalues.length; x++) {
            fill(waterR,waterG,waterB);
            ellipse(x * xspacing, currentwaterL + yvalues[x], 5, 5);
        }
        currentwaterL += 5;
    }
}

function keyPressed() {
    if (keyCode == UP_ARROW & yearCount <= 2015) {
        yearCount += 1;
    }
    else if (keyCode == DOWN_ARROW) {
        if (yearCount > 1880){
            yearCount -= 1;
        }
    }

}

hyt-Final-Project: Will you be my friend on a cold night?

hyt-final-proj

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// final-project


// image gallery
var poke; 
var hugWhite;
var heart;

// welcomePage() global var.
var startRadius = 100;
var lightOn = false;
var endWelcome = false;

// drawPerson() global var.
var headX;
var headY;
var headSize;

// array and other things for bubble and warmth functions
var bubbleX = [];
var bubbleY = []; 
var heartArr = [];
var heartV = 0;
var heartPos = []; // heart position in warmUp()

// for setGradient() function
var Y_AXIS = 1;
var X_AXIS = 2;

// rgb values for figure
var r = 161; 
var g = 190; 
var b = 255; 
var addColor = 10;

// check if button is hovered over
var isOverWarmth;
var isOverBubbles; 
var clickedBubbleButton = false;
var clickedWarmthButton = false;
var happy = false; // happy face? 

// for mouth movement
var endAngle;
var startAngle; 



function preload() {
    // first icon's courtesy of elon lastad from noun project
    hugWhite = loadImage("https://i.imgur.com/LdCyCn9.png");
    poke = loadImage("https://i.imgur.com/CV9mms1.png");
    heart = loadImage("https://i.imgur.com/DK1JVMP.png");
}



function setup() {
    createCanvas(480, 480);
    frameRate(16);
}



function draw() {

    welcomePage();
    if (endWelcome == true) {
    //making gradient background
    var grad1 = color(42, 46, 127); // gradient color 1
    var grad2 = color(156, 83, 156); // gradient color 2
    var grad3 = color(78, 83, 107); // gradient color 3
    background(0);
    setGradient(0, 0, width, height * 0.75, grad1, grad2, Y_AXIS); 
    setGradient(0, height * 0.75, width, height, grad2, grad3, Y_AXIS); 
    fill(0, 40);
    noStroke();
    // land shape
    arc(width / 2, height + 20, width * 1.3, height * 0.4, 180, 0, OPEN);
    makeSnow();
    buttonForBubble();
    buttonForWarmth();
    drawPerson();
    }

}



function welcomePage() { 
    var bg = 0;
    noStroke();
    fill(0);
    rect(0, 0, width, height);
    fill(255, 226, 104, 200); // mustard yellow color
    // yellow circle expands
    ellipse(width - 20, height - 20, startRadius, startRadius); 
    var mouseDist = dist(mouseX, mouseY, width - 30, height - 30);
    if (mouseDist < 50) {
        lightOn = true;
    }
    if (lightOn == true) {
        startRadius += 10;
    }
    textSize(15);
    textFont("Courier New");
    text("Will You Be My Friend ", 90, 100);
    text("On a Cold Night? ", 90, 120);
    textSize(12);
    text("• Pat my head to keep me warm", 80, 250);
    text("• Drag your mouse and draw bubbles with me", 80, 270);
    text("• Click and send me some warm fuzzy hearts", 80, 290);
    text("• Happy xmas :)", 80, 310);
    // if whole screen yellow, go to second screen
    if (startRadius >= 1500) { 
        endWelcome = true;
    }
}



function makeSnow() {
    this.x = random(width);
    this.y = random(height);
    for (var h = 0; h < 150; h++) {
            fill(255, 50); // white alpha
            ellipse(this.x, this.y, 10, 10, 50);
    }
}



function buttonForBubble() {
    // make button first 
    var posX = width - 100;
    var posY = 100;
    var dist2 = dist(mouseX, mouseY, posX, posY);
    if (dist2 < 25) {
        isOverBubbles = true;
    } else {
        isOverBubbles = false;
    }
    if (isOverBubbles == true) {
        push();
        fill(161, 190, 255);
        text("Draw bubbles with me!", 50, 50);
        cursor(HAND);
        stroke(200); // ocean color
        strokeWeight(4);
        if (mouseIsPressed) {
            clickedWarmthButton = false;
            clickedBubbleButton = true;
        }
        pop();
    } 
    if (isOverBubbles == false) {
        fill(69, 103, 178);
        cursor(ARROW);
    }
    ellipse(posX, posY, 50, 50); // draw button shape

    // draw bubble icon on button
    push();
    fill(255);
    ellipse(posX - 9, posY + 7, 10, 10);
    ellipse(posX + 6, posY - 6, 16, 16);
    ellipse(posX + 7, posY + 12, 8, 8);
    pop();

    // call function for drawing bubbles
    drawBubbles();
}



function buttonForWarmth() {
    // make button for hearts and hugs
    var posX1 = width - 100;
    var posY1 = 180;
    var dist1 = dist(mouseX, mouseY, posX1, posY1);

    if (dist1 < 25) {
        isOverWarmth = true;
    } else {
        isOverWarmth = false;
    }
    if (isOverWarmth == true) {
        push();
        fill(255, 206, 216);
        text("feeling loved <3", 50, 50);
        cursor(HAND);
        stroke(200);
        strokeWeight(4);
        if (mouseIsPressed) {
            clickedBubbleButton = false;
            clickedWarmthButton = true;
        }
        pop();
    } 
    if (isOverWarmth == false) {
        fill(173, 140, 147);
        //noStroke();
        cursor(ARROW);
    }

    // draw button
    ellipse(posX1, posY1, 50, 50); // where the button is
    // input icon image
    push();
    imageMode(CENTER);
    scale(0.08, 0.08);
    image(hugWhite, posX1 * 12.5, posY1 * 12.5);
    pop();
    // execute warmUp function
    warmUp();
}

function drawBubbles() {

    if(!clickedBubbleButton) {
        return;
    }
    // limit bubbles array to 20 circles
    if (bubbleX.length > 20) {
        bubbleX.shift();
        bubbleY.shift();
    }
    // draw bubble
    for (var i = 0; i < bubbleX.length; i++) {
        var bubbleInc = random(-10, 10); // bubble increments
        var bubblePosX = bubbleX[i] + random(-10, 10); // random X or Y position
        var bubblePosY = bubbleY[i] + random(-10, 10); // random X or Y position
        var bubbleR = 10 + random(-2, 4); 
        noStroke();
        fill(255, 160);
        ellipse(bubblePosX, bubblePosY, bubbleR, bubbleR);
    }
}



function warmUp() {
    // if warmth button not clicked, warmUp will not be executed
    if(!clickedWarmthButton) {
        return;
    }
    // send heart falling rain
    heartV += 5;
    for (var x = 0; x < heartArr.length; x++) {
        push();
        scale(0.5, 0.5);   
        image(heart, heartArr[x], heartPos[x]+heartV);
        pop();
    }
    if (heartPos[x] >= width + 5) {
        heartPos = [];
    }
}



function drawPerson() {
    headX = width / 3;
    headY = height / 3;
    headSize = 85;
    // change body temperature as time goes by
    for (var i = 0; i < 1000; i++) {
        r -= 0.001;
        b += 0.001; 
        fill(r, g, b);
    }
    noStroke();
    // head
    ellipse(headX, headY, headSize, headSize); 
    image(poke, headX + 50, headY - 20);
    // body
    rect(headX - 25, headY + 35, 50, 120, 30); 
    // left arm
    rect(headX - headSize * 0.58, headY + 50, 20, 50 * 2, 30);
    // right arm
    rect(headX + headSize * 0.33, headY + 50, 20, 50 * 2, 30); 
    // left leg
    rect(headX - 25, headX + 120, 18, 130, 30);
    // right leg
    rect(headX + 7, headX + 120, 18, 130, 30);
    // eyes
    fill(0);
    ellipse(headX - 30, headY, 10, 10);
    ellipse(headX, headY, 10, 10);
    // blush
    fill(252, 204, 255, 150);
    ellipse(headX - 35, headY + 21, 14, 12);
    ellipse(headX + 4, headY + 21, 14, 12);
    fill(0);
    // mouth
    push();
    stroke(0);
    strokeWeight(3);
    noFill();
    angleMode(DEGREES); 
    if (happy == false) {
        startAngle = 180; 
        endAngle = 0;
    }
    if (happy == true) {
        startAngle = 0;
        endAngle = 180;
    }
    arc(headX - 18, headY + 20, 8, 3, startAngle, endAngle, OPEN);
    pop();
    }



function mousePressed() {
    // when mouse is pressed, the array restarts (new drawing action on canvas)
    bubbleX = [];
    bubbleY = [];
    // push new heart position into array
    heartArr.push(mouseX * 2);
    heartPos.push(mouseY * 0.5);
    // finding distance between mouse and head
    var distance = dist(mouseX, mouseY, width/2, height/3); 
    if (distance < 90) {
        cursor(HAND);
        r += addColor;
        b -= addColor;
        if (r >= 160) {
            happy = true;
        } else {
            happy = false;
        }
    }
}



function mouseDragged() {
    if (clickedBubbleButton) {
        bubbleX.push(mouseX);
        bubbleY.push(mouseY);
    }
}



// ---- HELPER CODE REFERENCED FROM P5.JS WEBSITE ---- //



function setGradient(x, y, w, h, c1, c2, axis) {
  noFill();
  if (axis == Y_AXIS) {  // Top to bottom gradient
    for (var i = y; i <= y+h; i++) {
      var inter = map(i, y, y+h, 0, 1);
      var c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x+w, i);
    }
  }  
  else if (axis == X_AXIS) {  // Left to right gradient
    for (var i = x; i <= x+w; i++) {
      var inter = map(i, x, x+w, 0, 1);
      var c = lerpColor(c1, c2, inter);
      stroke(c);
      line(i, y, i, y+h);
    }
  }
}


For the final project, I wanted to create something that is warm and fuzzy to play for this winter, so I made a simple interactive mouse-moving game about a small person looking for company on a cold snowy night.

The game starts with a menu screen, showing the title and instructions for the game. There are three different interactions in the game: patting head for warmth, sending hearts, and drawing bubbles with the character. The user would activate the game by placing the cursor over the yellow circle (on the bottom right side), and then you would see the second screen. When the character reaches a certain temperature, it would have a smiley face showing its happiness; the other two buttons are also clicked on and have separate functions. Have fun exploring and happy holidays 🙂

hannajan_final project

sketch

//Hanna Jang
//Section B 
//hannajan@andrew.cmu.edu; 
//Final Project

var space = 10; 
var heart; 
var lightning; 
var banana; 
var ball; 
var RectLength = 0; 
var RectLength2 = 0; 
var hand; 
var snow = []; 


function setup(){
	createCanvas(480, 300); 
	frameRate(10); 
	
	//create Snow in window 
	for (var i = 0; i < 1; i++){
		var px =  space*8; 
		snow[i]= makeSnow(px); 
	}
}

//load images
function preload(){ 
	heart=loadImage("https://i.imgur.com/OcX9GYf.png"); 
	lightning=loadImage("https://i.imgur.com/MDIxpuo.png"); 
	banana=loadImage("https://i.imgur.com/YZLA1fs.png"); 
	ball=loadImage("https://i.imgur.com/J6JsNUS.png"); 
	smile=loadImage("https://i.imgur.com/7bNPbaY.png"); 
	hand=loadImage("https://i.imgur.com/j8tNnpH.png"); 
}

function draw(){
	background(254, 233, 239); 
	
	DrawHouse(); 
	DrawMiaBody(); 
	DrawFace(); 
	DrawHappinessBar(); 
	DrawEnergyBar(); 
	DrawRadio(); 
	DrawFood(); 
	DrawBall(); 
	DrawWindow(); 
	UpdateAndDisplaySnow(); 
	addNewSnow(); 
	

//Mia reacts to being fed 
	if (mouseX > 38.14*space & mouseX < 44.14*space
		&& mouseY > 20 && mouseY<80){
			MiaEats(); 
	}
	
//Mia reacts to being played music 
	if (mouseX > width/6 & mouseX < 15.5*space
		&& mouseY > 22*space && mouseY < 27*space){
			MiaIsHappy(); 
	}
	
//Mia reacts to playing with ball
	if (mouseX > 35*space & mouseX < 42*space
		&& mouseY > 21*space && mouseY < 28*space){
			MiaSmiles(); 
	}	
	
//fill up energy bar when fed
	fill(247, 102, 188); 
	rect(23*space, space*3, RectLength*15, space*3);    
	
//fill up heart bar when Mia is happy 
	fill(90, 130, 222); 
	rect(space*6, space*3, RectLength2*10, space*3); 
	
	DrawHand(); 
}

//draw Mia's house 
function DrawHouse(){
	
//draw Mia's wallpaper 
	for (var i = 0; i < 20; i++){
		fill(255); 
		noStroke(); 
		rect(i*25, 0, 6, height); 
		fill(199, 232, 255); 
		rect(i*25, 0, 2, height); 
	}
	
//draw Mia's floor 
	fill(247, 223, 163); 
	noStroke(); 
	rect(0, height-space*5, width, space*5); 
	
//draw rug 
	fill(245, 156, 210); 
	ellipse(width/2, height-space*3, space*14, space*5); 
	
}

//draw Mia's body 
function DrawMiaBody(){
	fill(176, 106, 26); 
	ellipse(width/2, height/2+space*8, space*9, space*10); 
	fill(239, 194, 144); 
	ellipse(width/2, height/2+space*9, space*5, space*6); 
}

//draw Mia's face 
function DrawFace(){
	//left ear
	fill(176, 106, 26); 
	ellipse(width/2-space*7, height/2-space*1.5, space*5, space*5); 
	fill(239, 194, 144); 
	ellipse(width/2-space*7, height/2-space*1.5, space*3, space*3); 
	
	//right ear
	fill(176, 106, 26); 
	ellipse(width/2+space*7, height/2-space*1.5, space*5, space*5); 
	fill(239, 194, 144); 
	ellipse(width/2+space*7, height/2-space*1.5, space*3, space*3); 
	
	//head 
	fill(176, 106, 26); 
	ellipse(width/2, height/2, space*14, space*12); 
	fill(239, 194, 144); 
	ellipse(width/2-space*2, height/2, space*6, space*6); 
	ellipse(width/2+space*2, height/2, space*6, space*6); 
	ellipse(width/2, height/2+space*2.7, space*8, space*5); 
	
	//eyes 
	fill(255); 
	ellipse(width/2-space*2, height/2, space*2, space*2); 
	ellipse(width/2+space*2, height/2, space*2, space*2); 
	
	//eyes follow mouse
	fill(0); 
	var x1 = map(mouseX, 0, width, width/2-space*2.5, width/2-space*1.9);
	var y1= map(mouseY, 0, height, height/2-2, height/2+2);
	ellipse(x1, y1, space, space); 
	var x2 = map(mouseX, 0, width, width/2+space*1.6, width/2+space*2.1);
	ellipse(x2, y1, space, space); 
	
	//nose 
	fill(0); 
	ellipse(width/2 - space, height/2 + space*2, 5, 5); 
	ellipse(width/2 + space, height/2 + space*2, 5, 5); 
}

//draw Happiness Bar 
function DrawHappinessBar(){
	fill(241, 101, 87); 
	rect(space*3, space*3, space*14, space*3); 
	ellipse(space*3, space*4.5, space*5, space*5); 
	fill(255); 
	ellipse(space*3, space*4.5, space*3.5, space*3.5); 
	image(heart, space*1.6, space*3.4); 
}

function DrawEnergyBar(){
	fill(100, 175, 209); 
	rect(space*22, space*3, space*14, space*3); 
	ellipse(space*21, space*4.5, space*5, space*5); 
	fill(255); 
	ellipse(space*21, space*4.5, space*3.5, space*3.5); 
	image(lightning, space*19, space*2.9); 
}

function DrawRadio(){
	fill(243, 98, 26); 
	rect(width/5.5, height - space*11, 5, space*4); 
	rect(width/6, height - space*8, space*7.5, space*5); 
	fill(255, 227, 168);   
	ellipse(width/5, height - space*6, space*1.5, space*1.5); 
	fill(0); 
	ellipse(width/5, height - space*4, space, space); 
	fill(177, 167, 146); 
	rect(width/4, height - space*7, space*2.5, space*2.5); 
}

function DrawFood(){
	fill(173, 234, 245); 
	ellipse(width*6/7, space*5, space*6, space*6); 
	fill(255); 
	ellipse(width*6/7, space*5, space*4, space*4); 
	image(banana, width*4.9/6, space*4); 
}

function DrawBall(){
	image(ball, space*35, height - space*9, space*7, space*7); 
}

function DrawWindow(){
	fill(160, 209, 243); 
	rect(space*1.8, space*8, space*12, space*10); 
	fill(255); 
	rect(space*1.8, space*16, space*12, space*2); 
}

function MiaEats(){
	//opens mouth for food
	fill(212, 68, 56); 
	ellipse(width/2, height/2+space*3.5, space*2.5, space*2.5); 
}

function MiaIsHappy(){
	fill(212, 68, 56); 
	arc(width/2, height/2+space*3.1, space*4, space*4, 0, PI); 
}

function MiaSmiles(){
	image(smile, width/2 - 6, height/2+space*2.6, space*3, space*2.1); 
}

function DrawHand(){
	image(hand, mouseX - 17, mouseY - 10, space*6, space*6); 
}

//update the snow and display them
function UpdateAndDisplaySnow(){
	for (var i = 0; i < snow.length; i++){
		snow[i].move(); 
		snow[i].display(); 
	}
}

function addNewSnow() {
    // With a very tiny probability, add new snow to the end.
    var likelihood = 0.03; 
    if (random(0,1) < likelihood) {
        snow.push(makeSnow (space*8));
    }
}

// method to update position of snow every frame
function snowMove() {
    this.x += this.speed;
    	if (this.x >= 17*space){
    		this.x=8*space; 
    	}
}

// draw the snow
function snowDisplay() {
  fill(255); 
  rect(this.breadth, this.x, 4, 4); 
}

//make the snow
function makeSnow(birthLocationX) {
    var snow = {x: birthLocationX,
                breadth: random(18, 130), 
                speed: 3.0,
                move: snowMove,
                display: snowDisplay}
    return snow;
}

function mouseClicked(){
	
	//mia earns energy when fed 
	if (mouseX > 38.14*space & mouseX < 44.14*space
		&& mouseY > 20 && mouseY < 80){
			if (RectLength==9){
				RectLength=0; 
			} else {
				RectLength+=1; 
		}
	}
	
	//hearts earned when played music or playing with ball
	if ((mouseX > width/6 & mouseX < 15.5*space
		&& mouseY > 22*space && mouseY < 27*space)
		|| (mouseX > 35*space && mouseX < 42*space
		&& mouseY > 21*space && mouseY < 28*space)){
			if (RectLength2==11){
				RectLength2=0; 
			} else {
				RectLength2+=1; 
		}
	}
}





Meet Mia the monkey!

She loves music and playing with her beach ball. Her favorite food to eat are bananas.

See what her reaction is when you click on the banana and feed her one! What is her reaction when you click on the ball or the radio? You can also see the reaction of  Mia’s heart and energy bar at the top. When you feed her, Mia’s energy level will increase. Mia’s heart level will also increase if you do something she likes.

As observed:

1). If you click on the banana, Mia will open her mouth to be fed. Her energy level will also increase from eating the banana.

2). If you click on the ball, Mia will smile. Her heart level will also increase.

3). If you click on the radio, Mia will open her mouth to sing. Her heart level will increase because she is having a good time.

Note About this Project*

For my final project, I wanted to create a virtual pet that could be interacted with through a mouse. In the end, I created Mia. The feedback in this game is simple. You are winning this game by increasing the levels in the heart and energy bars. The game is also endless, as the heart and energy bars are set back to 0 every single time you win all the points possible. That way, you can play again and again.

agusman_adev_Final_Project

sketch

var angle = 0; //tree branch angle
var mic; //internal microphone
var forest = []; //holds trees
var iInc; //branch incriment
var ns = 10; //stars
var p; //moon curve variable
var q; //moon curve variable
var curveSize; //moon curve constraint

function setup() {
	createCanvas(480, 280);
	background(51);

	mic = new p5.AudioIn(); //create mic
	mic.start(); //activate mic

	//push 3 trees into array
	var tree1 = new Branch(87,10);
	forest.push(tree1);
	var tree2 = new Branch(70,70);
	forest.push(tree2);
	var tree3 = new Branch(40, 300);
	forest.push(tree3);

	flock = new Flock();

	//creating and pushing stars into an array
	for (var i = 0; i < ns; i++) {
		var p = makeStar(-10, -10,random(-50, 50), random(-50, 50));
		stars.push(p);
	}

	frameRate(10);

}

function draw() {
	background(51, 7.5);
	stroke(255,5);

	//get volume from mic (trees, stars, moon)
	var micLevel = mic.getLevel()*200;
	angle = micLevel/40;
	
	//call the function
	flock.run();

	//get volume from mic (flowy energy)
	var vol = mic.getLevel()*15;

		//if the volume is above a certain threshold, add a new flock of boids to the scene
		if (vol > 2) {
		flock.addBoid(new Boid(0, height/2)); 
		}
   
	pop(); 
	background(51,51,51,255*.2); //redrawing the background to give ghostly layering effect

		//Trees
		for(var i = 0; i < forest.length; i++){ //create multiple trees
			push();
			var xPos = forest[i].x;
			translate(xPos, height);
			forest[i].display();
			pop();
		}

		//Stars
		//if the volume exceeds a certain threshold, new stars are drawn
		if (micLevel > 10) {
			var newS = makeStar(random(10, width), random(10, height/3*2), random(-0.5, 0.5), random(-0.5, 0.5));
			stars.push(newS);
		}

		//store newly created stars
	 	newStars = []; 
		for (var i = 0; i < stars.length; i++) {
			var p = stars[i];
			p.draw();
			
			if (p.age < 200) {
				newStars.push(p);
			}
		}
   
	stars = newStars;

	//Moon
   
   	//map volume threshold to moon curve formula
	p = map (micLevel, 0, 100, 0, 100); 
	q = map (micLevel, 0, 100, 0, 130);

	curveSize = map (micLevel, 0, width, 20, 20);

	//curve formula 
	var k = p/q;
	push();
	translate (380, 70);
	iInc = map (micLevel, 0, height, 0.05, 1.5); 

		for (var i = 0; i < TWO_PI * q ; i+= iInc*1.2) {
		var r = curveSize * cos (k*i);
		var x = r * cos(i);
		var y = r * sin(i);
		fill(189, 207 , 253, 10);
		strokeWeight(iInc*5);
		point (x, y);
		fill(255);
	}  
}

//Completing the tree objects
function Branch(len, xTrans){
	this.originalTall = len;
	this.x = xTrans;
	
	this.display = function(){
		push();
		translate(50);
		branching(this.originalTall);
		pop();
	}
	
}

//Making the recursive tree
function branching(len){
	line(0,0,0,-len);
	translate(0,-len);
	stroke(255);
	if(len > 4) {
		push();
		rotate(angle);
		branching(len * 0.67);
		pop();

		push();
		rotate(-angle);
		branching(len * 0.67);
		pop();
	}
}

//Making the stars
function starDraw() {
	fill(255);
	point(this.x + random (0.1, -0.1), this.y + random(-0.1, 0.1));
}

//create the star
function makeStar(sx, sy) {
	p = {x: sx +random(-0.1, 0.1), y: sy + (-0.1, 0.1),
		 age: 0,
		 draw: starDraw
		}
	return p;
}

var stars = [];

// Starting here:
// Flocking Behavior algorithm sampled from Daniel Shiffman, "The Nature of Code" 
// http://natureofcode.com

function Flock() {
  // An array for all the boids
  this.boids = []; // Initialize boids array
}

Flock.prototype.run = function() {
  for (var i = 0; i < this.boids.length; i++) {
	this.boids[i].run(this.boids);  // Passing the entire list of boids to each boid individually
  }
}

Flock.prototype.addBoid = function(b) {
  this.boids.push(b); //
}

// Separation, Cohesion, and Alignment forces added

//defining the boid object
function Boid(x,y) {
  this.acceleration = createVector(0,0);
  this.velocity = createVector(random(-1,1),random(-1,1));
  this.position = createVector(x,y);
  this.r = 3.0; //radius of boid
  this.maxspeed = 2;    // Maximum speed
  this.maxforce = 0.05; // Maximum steering force

// Starting here:
// Our own original code

  var rr = random(70, 90); 
  var gg = random(70, 90); 
  var bb = random(80, 100); 
  this.rcolor = rr; 
  this.gcolor = gg; 
  this.bcolor = bb; 

  // Keep track of old x y coordinates of boid
  this.history = []; 
}

// Our own original code
// Ending here:

// Continuing here:
// Flocking Behavior algorithm sampled from Daniel Shiffman, "The Nature of Code" 
// http://natureofcode.com

Boid.prototype.run = function(boids) {
  this.flock(boids);
  this.update();
  this.borders();
  this.render();
}

Boid.prototype.applyForce = function(force) {
  this.acceleration.add(force);
}

// We accumulate a new acceleration each time based on three rules
Boid.prototype.flock = function(boids) {
  var sep = this.separate(boids);   // Separation
  var ali = this.align(boids);      // Alignment
  var coh = this.cohesion(boids);   // Cohesion

  // Arbitrarily weight these forces
  sep.mult(1.5);
  ali.mult(1.0);
  coh.mult(1.0);
  
  // Add the force vectors to acceleration
  this.applyForce(sep);
  this.applyForce(ali);
  this.applyForce(coh);
}

// Method to update location
Boid.prototype.update = function() {
  // Update velocity
  this.velocity.add(this.acceleration);
  // Limit speed
  this.velocity.limit(this.maxspeed);
  this.position.add(this.velocity);

  // update the property that stores old positions
  var v = [this.position.x, this.position.y]; //AG
  this.history.push(v); //AG

  // Reset accelertion to 0 each cycle
  this.acceleration.mult(0);
}

// A method that calculates and applies a steering force towards a target
// STEER = DESIRED MINUS VELOCITY
Boid.prototype.seek = function(target) {
  var desired = p5.Vector.sub(target,this.position);  // A vector pointing from the location to the target
  // Normalize desired and scale to maximum speed
  desired.normalize();
  desired.mult(this.maxspeed);
  // Steering = Desired minus Velocity
  var steer = p5.Vector.sub(desired,this.velocity);
  steer.limit(this.maxforce);  // Limit to maximum steering force
  return steer;
}

//Starting Here:
//Heavily modified perameters by us

Boid.prototype.render = function() {
  // Draw a triangle rotated in the direction of velocity
  var theta = this.velocity.heading() + radians(90);
  noFill();
  noStroke();
  push();
  translate(this.position.x,this.position.y);
  rotate(theta);
  beginShape();
  vertex(0, -this.r);
  vertex(-this.r, this.r*6); //boid size
  vertex(this.r, this.r*6); //boid size
  endShape(CLOSE);
  pop();

// Starting here:
// Our own original code

	// Displays path of old locations
	for (var i = 0; i < this.history.length; i++) { 
	  var posx = this.history[i][0]; 
	  var posy = this.history[i][1];
	  fill(this.rcolor, this.gcolor, this.bcolor, 90); 
	  ellipse(posx, posy, 5, 5);
	}
}
// Our own original code
// Ending here:

// Starting here:
// Separation, Alignment and Cohesion force algorithms sampled from Daniel Shiffman, "The Nature of Code" 
// http://natureofcode.com

// Border Constraints
Boid.prototype.borders = function() { 
  if (this.position.x < 0) {
	  this.velocity.x = -this.velocity.x; 
  }
  if (this.position.y > height) { 
	  this.velocity.y = -this.velocity.y;
  }
  if (this.history.length > 10) { 
	  this.history.shift(); 
  }
}

// Separation
// Method checks for nearby boids and steers away
Boid.prototype.separate = function(boids) {
  var desiredseparation = 25.0;
  var steer = createVector(0,0);
  var count = 0;

  // For every boid in the system, check if it's too close
  for (var i = 0; i < boids.length; i++) {
	var d = p5.Vector.dist(this.position,boids[i].position);

	// If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself)
	if ((d > 0) & (d < desiredseparation)) {
	  // Calculate vector pointing away from neighbor
	  var diff = p5.Vector.sub(this.position,boids[i].position);
	  diff.normalize();
	  diff.div(d); // Weight by distance
	  steer.add(diff);
	  count++; // Keep track of how many
	}
  }

  // Average -- divide by how many
  if (count > 0) {
	steer.div(count);
  }

  // As long as the vector is greater than 0
  if (steer.mag() > 0) {

	// Implement Reynolds: Steering = Desired - Velocity
	steer.normalize();
	steer.mult(this.maxspeed);
	steer.sub(this.velocity);
	steer.limit(this.maxforce);
  }
  return steer;
}

// Alignment
// For every nearby boid in the system, calculate the average velocity
Boid.prototype.align = function(boids) {
  var neighbordist = 50;
  var sum = createVector(0,0);
  var count = 0;
  for (var i = 0; i < boids.length; i++) {
	var d = p5.Vector.dist(this.position,boids[i].position);
	if ((d > 0) & (d < neighbordist)) {
	  sum.add(boids[i].velocity);
	  count++;
	}
  }
  if (count > 0) {
	sum.div(count);
	sum.normalize();
	sum.mult(this.maxspeed);
	var steer = p5.Vector.sub(sum,this.velocity);
	steer.limit(this.maxforce);
	return steer;
  } else {
	return createVector(0,0);
  }
}

// Cohesion
// For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location
Boid.prototype.cohesion = function(boids) {
  var neighbordist = 50;
  var sum = createVector(0,0);   // Start with empty vector to accumulate all locations
  var count = 0;
  for (var i = 0; i < boids.length; i++) {
	var d = p5.Vector.dist(this.position,boids[i].position);
	if ((d > 0) & (d < neighbordist)) {
	  sum.add(boids[i].position); // Add location
	  count++;
	}
  }
  if (count > 0) {
	sum.div(count);
	return this.seek(sum);  // Steer towards the location
  } else {
	return createVector(0,0);
  }
}

Anna Gusman and I created a therapeutic garden landscape that grows when it’s sung to. We chose to collaborate on this project because we were both super eager to explore p5’s comprehensive and lauded sound library. We thought that sonic interactions and audiovisual expressions would be great domains to explore by utilizing this tool.

Initially, we brainstormed ways by which people could see themselves “reflected” in a dynamic digital environment. By activating and scaling properties of the internal mic, we could poise the voice of an audience as the actuator of a captivating and therapeutic experience. The scene we designed contains four dynamic elements: recursion, flocking behavior, algorithmic curves and a particle system. Respectively, these would inform the emergence of natural objects like trees, wind, the moon and stars. Each of these dynamic elements are initiated by a singing voice and continue to grow as the viewer continues to sing! While some elements with more exposure to sound multiply, others express continued metamorphosis within themselves.

Max Mirho – Final Project – Popping Pup!

My goal in this project was to experiment with pixelation, and pixel images.
I created a cute little puppy and managed to switch his direction and cause different modes of his interaction.

I had a lot of fun, and I feel as if I have explored JavaScript enough to the point where a small adventure game would be possible.

While I continue learning to code, especially javascript, I know I need to review objects more and understand their full usefulness, as I’ve had trouble implementing, and my thought processes often don’t include them.

Hopefully, the format I’ve submitted is correct.

See below for a zip file of my program!

Max_Mirho_final

monicah1-Final Project-SectionA

sketch

//monica huang
//monicah1
//final project

var drops = [];
var terrain = [];
var stars = [];
var fireworks = [];
var cols, rows;
var scl = 90;
var w = 500;
var h = 500;
var flying = 0;
var gravity;
var speed;
var particles = [];
var flowfield;
var fr;
var inc = 0.1;
var zoff = 0;
var sound; 



function setup() {
  createCanvas(1100, 500, WEBGL);
  speed = map(mouseX, 2, width, 5, 2);

//throw off lines

for (var i = 0; i < 10; i++) {
    drops[i] = new Drop();
}


//colors
colorMode(HSB, 255);
  cols = floor(width / scl);
  rows = floor(height / scl);
  fr = createP('');

  flowfield = new Array(cols * rows);

  for (var i = 0; i < 10; i++) {
    particles[i] = new Particle();
  }

  
//flowing plain
  cols = w / scl;
  rows = h/ scl;

  for (var x = 0; x < cols; x++) {
    terrain[x] = [];
    for (var y = 0; y < rows; y++) {
      terrain[x][y] = 0; 
    }
  }

}



function draw() {
  background(125,255,0);
  speed = map(mouseX, 0, width, 0, 5);

//throw off lines
  for (var i = 0; i < drops.length; i++) {
    drops[i].fall();
    drops[i].show();
  }

//colors
  var yoff = 0;
  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      var index = x + y * cols;
      var angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
      var v = p5.Vector.fromAngle(angle);
      v.setMag(1);
      flowfield[index] = v;
      xoff += inc;
      stroke(0, 50,170);
    }
    yoff += inc;

    zoff += 0.0003;
  }

  for (var i = 0; i < particles.length; i++) {
    particles[i].follow(flowfield);
    particles[i].update();
    particles[i].edges();
    particles[i].show();
  }

  fr.html(floor(frameRate()));

//flowing plain
  flying -= 0.1;
  var yoff = flying;
  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      terrain[x][y] = map(noise(xoff, yoff), 0, 1, -100, 100);
      xoff += 0.2;
    }
    yoff += 0.2;
  }
  translate(0, 50);
  rotateX(-PI/3);
  fill(0,0,0);
  translate(-w/2, -h/2);
  for (var y = 0; y < rows-1; y++) {
    beginShape(TRIANGLE_STRIP);
    for (var x = 0; x < cols; x++) {
      vertex(x*scl, y*scl, terrain[x][y]);
      vertex(x*scl, (y+1)*scl, terrain[x][y+1]);
    }
    endShape();
  }

}

//---------------------------------------------------------------------------

// lines
function Drop() {
  this.x = random(width*2);
  this.y = random(-500, -500);
  this.z = random(0, 10);
  this.len = map(this.z, 0, 10, 0, 30);
  this.yspeed = map(this.z, 0, 10, 1, 20);

  this.fall = function() {
    this.y = this.y + this.yspeed;
    var grav = map(this.z, 0, 60, 0, 0.6);
    this.yspeed = this.yspeed + grav;

    if (this.y > height) {
      this.y = random(-200, -200);
      this.yspeed = map(this.z, 0, 20, 4, 10);
    }
  }

  this.show = function() {
    var thick = map(this.z, 0, 20, 1, 3);
    strokeWeight(thick);
    stroke(random(0,255), random(0,255), random(0,255));
    line(this.x, this.y, this.x, this.y+this.len);
  }
}

//colors
function Particle() {
  this.pos = createVector(random(width), random(height));
  this.vel = createVector(0, 0);
  this.acc = createVector(0, 0);
  this.maxspeed = 2;
  this.h = 0;

  this.prevPos = this.pos.copy();

  this.update = function() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxspeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  this.follow = function(vectors) {
    var x = floor(this.pos.x / scl);
    var y = floor(this.pos.y / scl);
    var index = x + y * cols;
    var force = vectors[index];
    this.applyForce(force);
  }

  this.applyForce = function(force) {
    this.acc.add(force);
  }

  this.show = function() {
    stroke(random(0,255), random(0,255), random(0,255));
    this.h = this.h + 1;
    if (this.h > 255) {
      this.h = 0;
    }
    strokeWeight(1);
    line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
    this.updatePrev();
  }

  this.updatePrev = function() {
    this.prevPos.x = this.pos.x;
    this.prevPos.y = this.pos.y;
  }

  this.edges = function() {
    if (this.pos.x > width) {
      this.pos.x = 0;
      this.updatePrev();
    }
    if (this.pos.x < 0) {
      this.pos.x = width;
      this.updatePrev();
    }
    if (this.pos.y > height) {
      this.pos.y = 0;
      this.updatePrev();
    }
    if (this.pos.y < 0) {
      this.pos.y = height;
      this.updatePrev();
    }

  }

}





I am inspired by space, speed, and motion in galaxy. I am interested in creating 3d dimensional space and motion with 2 dimensional lines and colors.

jdperez Final Project

For my final project, I threw together a little synth with an interface to change between types of waves, as well as add a lowpass filter, high pass filter, or bandpass filter.

The basic functionality of the synth is you can use your top row of keys to play a chromatic scale starting with Q, moving stepwise through the row (Q -> P) and then the last three half steps are in the next row down (ASD). You can adjust where the chromatic scale lies on the keyboard by pressing the arrow keys. The left and right arrow keys will shift the octave a half step up or down, and then the up and down arrow keys will shift the entire scale an octave up or down. You can do this while playing a note to have some cool effects. Another note, the keyboard is made to be able to play multiple notes at the same time, so play around with harmonies and stuff! The only issues come up when the notes frequencies become too close, and start phasing with each other… Also, if you are playing a perfect 6th and try to play a third note, the third note will not play. I’m not entirely sure how to fix these bugs.

Currently, the envelope for the filters are pre-set. Moving forward I’d like to implement some sliding-bar controls to control the envelopes. Also, the documentation on the p5.sound bandpass filter is very little, so I was not entirely sure how to control the range or location of the bandpass.

Other than these things the synth should work great! For maximum effect, use headphones. Put on a song you like on youtube or something, and try and jam out to it.

Enjoy.

 

sketch

//Jonathan Perez
//Section B
//jdperez@andrew.cmu.edu
//my music synth

//notes: could be much more efficient using objects and array that represents the keyboard. Consider initializing keyboard and having function calls
 
var keys = [] //holds all the keys in the diatonic scale including octave

//variable fill color for the buttons, allows selected button to highlitght
var fill1 = 255; //sine menu fill
var fill2 = 255; //triangle menu fill
var fill3 = 255; //square menu fill
var fill4 = 255; //sawtooth menu fill
var fill5 = 255; //lowPass menu fill
var fill6 = 255; //highPass menu fill
var fill7 = 255; //bandPass menu fill

 //create a key object that holds all the information for the oscillator,
 //the oscillator itself, and functions to adjust the oscillator
function synthKey(halfstep) {
    this.halfstep = halfstep; //indicates where in the chromatic scale the note is
    this.wave = "triangle" //type of wave the oscillator generates
    this.osc = new p5.Oscillator();
    this.env = new p5.Env();
    this.lowPass = new p5.LowPass();
    this.highPass = new p5.HighPass();
    this.bandPass = new p5.BandPass();
    this.fenv = new p5.Env(); //env for filters
    //set the frequency and wave type for the oscillator as well as
    //its envelope. Then start the oscillator so we can play the note anytime
    this.setup = function() {
        this.osc.setType(this.wave);
        this.osc.freq((261.63 * pow(2, this.halfstep / 12)));

        //this.env = new p5.Env();
        this.env.setADSR(0.01, 1.2, 0.3, 0.1);
        this.env.setRange(.5, 0);
        this.osc.amp(this.env);

        this.osc.start();
    }
    //now add some functionality to adjust where the diatonic scale
    //starts and ends, both step-wise and by octaves
    this.halfstepUp = function() {
        this.halfstep += 1;
        this.osc.freq((261.63 * pow(2, this.halfstep / 12)));
    }
    this.halfstepDown = function() {
        this.halfstep -= 1;
        this.osc.freq((261.63 * pow(2, this.halfstep / 12)));
    }
    this.octaveUp = function() {
        this.halfstep += 12;
        this.osc.freq((261.63 * pow(2, this.halfstep / 12)));
    }
    this.octaveDown = function() {
        this.halfstep -= 12;
        this.osc.freq((261.63 * pow(2, this.halfstep / 12)));
    }
    //function to change wave type
    this.changeType = function(type) {
        this.osc.setType(type);
    }
    //basic functions to tell the env to attack or release
    this.attack = function() {
        this.env.triggerAttack();
        this.fenv.triggerAttack();
    }
    this.release = function() {
        this.env.triggerRelease();
        this.fenv.triggerRelease();
    }
    this.setFilter = function(filterType) { //filter type will be indicated by 0 or 1
        if(filterType == 0) { // 0 maps to low pass filter
            this.osc.disconnect();
            this.osc.connect(this.lowPass);
            this.lowPass.freq(this.fenv);
            print("lowPass!")
        } else if(filterType == 1) { // 1 maps to high pass
            this.osc.disconnect();
            this.osc.connect(this.highPass);
            this.highPass.freq(this.fenv)
            print("hightPass!")
        } else if(filterType == 2) { // 2 maps to band pass
            this.osc.disconnect();
            this.osc.connect(this.bandPass);
            this.bandPass.freq(this.fenv);
            this.bandPass.res(10);
            print("bandPass!")
        }
    }
    this.setFilterEnv = function(A, D, S, R, startRange, endRange) {
        this.fenv.setADSR(A, D, S, R);
        this.fenv.setRange(startRange, endRange);
        //connect envelope to the filters
        this.lowPass.freq(this.fenv);
        this.highPass.freq(this.fenv);
        this.bandPass.freq(this.fenv);
    }
}

function setup() {
    createCanvas(400, 400);
    background(200);
    for(i = 0; i < 13; i++) {
        keys.push(new synthKey(i));
        keys[i].setup();
    }
}

function draw() {
    background(200);
    var rectHeight = 45
    var rectWidth = 90
    masterVolume(.5);

    //MAKE BUTTONS FOR WAVE TYPE
    stroke(0);
    strokeWeight(1);
    //make boxes
    rectMode(CENTER)
    fill(fill1);
    rect(width/2, height/2 - 2 * rectHeight, rectWidth, rectHeight);
    fill(fill2);
    rect(width/2, height/2 - rectHeight, rectWidth, rectHeight);
    fill(fill3);
    rect(width/2, height/2, rectWidth, rectHeight);
    fill(fill4);
    rect(width/2, height/2 + rectHeight, rectWidth, rectHeight);
    fill(fill5);
    rect(width/2 - rectWidth, height/2 + 150, rectWidth, rectHeight);
    fill(fill6);
    rect(width/2, height/2 + 150, rectWidth, rectHeight);
    fill(fill7);
    rect(width/2 + rectWidth, height/2 + 150, rectWidth, rectHeight);
    //label boxes
    fill(0);
    textAlign(CENTER)
    textSize(20)
    text("sine", width/2, height/2 - 2 * rectHeight);
    text("triangle", width/2, height/2 - rectHeight);
    text("square", width/2, height/2);
    text("sawtooth", width/2, height/2 + rectHeight)
    text("lowPass", width/2 - rectWidth, height/2 + 150);
    text("highPass", width/2, height/2 + 150);
    text("bandPass", width/2 + rectWidth, height/2 + 150);
}

//MENU CONTROLS
function mouseClicked() {
    //variables for all of the menu box locations
    var rectHeight = 45;
    var rectWidth = 90;
    var rightWaveMenu = width/2 + rectWidth/2;
    var leftWaveMenu = width/2 - rectWidth/2;
    var topFilterMenu = height/2 + 150 - rectHeight/2;
    var bottomFilterMenu = height/2 + 150 + rectHeight/2;
    var lowPassLeft = width/2 - 1.5 * rectWidth;
    var lowPassRight = width/2 - .5 * rectWidth;
    var highPassRight = width/2 + .5 * rectWidth;
    var bandPassRight = width/2 + 1.5 * rectWidth;

    //WAVE FORM MENU CONTROLS

    //if clicked within sine box
    if(mouseX < rightWaveMenu & mouseX > leftWaveMenu
        && mouseY < height/2 - 1.5 * rectHeight && mouseY > height/2 - 2.5 * rectHeight) {
        //make all keys sine waves
        for(i = 0; i < keys.length; i++) {
            keys[i].changeType("sine");
        }
        //highlight currently selected box
        fill1 = color(150, 255, 255);
        fill2 = 255;
        fill3 = 255;
        fill4 = 255;
    } else if(mouseX < width/2 + rectWidth/2 & mouseX > width/2 - rectWidth/2
        && mouseY < height/2 - .5 * rectHeight && mouseY > height/2 - 1.5 * rectHeight) {
        //make all keys triangle waves
        for(i = 0; i < keys.length; i++) {
            keys[i].changeType("triangle");
        }
        //highlight currently selected box
        fill1 = 255;
        fill2 = color(150, 255, 255);
        fill3 = 255;
        fill4 = 255;
    } else if(mouseX < width/2 + rectWidth/2 & mouseX > width/2 - rectWidth/2
        && mouseY < height/2 + .5 * rectHeight && mouseY > height/2 - .5 * rectHeight) {
        //make all keys square waves
        for(i = 0; i < keys.length; i++) {
            keys[i].changeType("square");
        }
        //highlight currently selected box
        fill1 = 255;
        fill2 = 255;
        fill3 = color(150, 255, 255);
        fill4 = 255;
    } else if(mouseX < width/2 + rectWidth/2 & mouseX > width/2 - rectWidth
        && mouseY < height/2 + 1.5 * rectHeight && mouseY > height/2 + .5 * rectHeight) {
        //make all keys sawtooth waves
        for(i = 0; i < keys.length; i++) {
            keys[i].changeType("sawtooth");
        }
        //highlight currently selected box
        fill1 = 255;
        fill2 = 255;
        fill3 = 255;
        fill4 = color(150, 255, 255);
    

    //FILTER MENU CONTROLS
    } else if(mouseY < bottomFilterMenu & mouseY > topFilterMenu &&
        mouseX > lowPassLeft && mouseX < lowPassRight) {

        for(i = 0; i < keys.length; i++) {
            keys[i].setFilter(0);
            keys[i].setFilterEnv(0.3, 1.2, 1000, 0.1, 8000, 400);
        }
        //highlight currently selected box
        fill5 = color(190, 160, 255);
        fill6 = 255
        fill7 = 255

    } else if(mouseY < bottomFilterMenu & mouseY > topFilterMenu &&
        mouseX > lowPassRight && mouseX < highPassRight) {

        for(i = 0; i < keys.length; i++) {
            keys[i].setFilter(1);
            keys[i].setFilterEnv(0.3, 1.2, 1000, 0.1, 8000, 400);
        }
        //highlight currently selected box
        fill5 = 255
        fill6 = color(190, 160, 255);
        fill7 = 255

    }else if(mouseY < bottomFilterMenu & mouseY > topFilterMenu &&
        mouseX > highPassRight && mouseX < bandPassRight) {

        for(i = 0; i < keys.length; i++) {
            keys[i].setFilter(2);
            keys[i].setFilterEnv(0.3, 1.2, 1000, 0.1, 8000, 400);
        }
        //highlight currently selected box
        fill5 = 255
        fill6 = 255
        fill7 = color(190, 160, 255);

    }
}
 
 // --------- KEYBOARD CONTROLS, ONE CHROMATIC SCALE ----------
function keyPressed() {
    if(key === 'Q') {
        keys[0].attack();
    } else if(key === 'W') {
        keys[1].attack();
    } else if(key === 'E') {
        keys[2].attack();
    } else if(key === 'R') {
        keys[3].attack();
    } else if(key === 'T') {
        keys[4].attack();
    } else if(key === 'Y') {
        keys[5].attack();
    } else if(key === 'U') {
        keys[6].attack();
    } else if(key === 'I') {
        keys[7].attack();
    } else if(key === 'O') {
        keys[8].attack();
    } else if(key === 'P') {
        keys[9].attack();
    } else if(key === 'A') {
        keys[10].attack();
    } else if(key === 'S') {
        keys[11].attack();
    } else if(key === 'D') {
        keys[12].attack();


        //KEYSIGNATURE CONTROLS
    } else if(keyCode === LEFT_ARROW) {
        for(i = 0; i < keys.length; i++) {
            keys[i].halfstepDown();
        }
    } else if(keyCode === RIGHT_ARROW) {
        for(i = 0; i < keys.length; i++) {
            keys[i].halfstepUp();
        }
    } else if(keyCode === DOWN_ARROW) {
        for(i = 0; i < keys.length; i++) {
            keys[i].octaveDown();
        }
    } else if(keyCode === UP_ARROW) {
        for(i = 0; i < keys.length; i++) {
            keys[i].octaveUp();
        }
    }
    
}

function keyReleased() {
    if(key === 'Q') {
        keys[0].release();
    } else if(key === 'W') {
        keys[1].release();
    } else if(key === 'E') {
        keys[2].release();
    } else if(key === 'R') {
        keys[3].release();
    } else if(key === 'T') {
        keys[4].release();
    } else if(key === 'Y') {
        keys[5].release();
    } else if(key === 'U') {
        keys[6].release();
    } else if(key === 'I') {
        keys[7].release();
    } else if(key === 'O') {
        keys[8].release();
    } else if(key === 'P') {
        keys[9].release();
    } else if(key === 'A') {
        keys[10].release();
    } else if(key === 'S') {
        keys[11].release();
    } else if(key === 'D') {
        keys[12].release();
    }
}

ssharada-final-project-section-a

sketch

https://alpha.editor.p5js.org/shariwa/sketches/H16PfJF-G

Since this code has sounds, the WordPress account doesn’t display it properly. Above is a link to the p5.js alpha editor where you can properly view my code. Once at the website click the play button on the top left corner of the screen

My project looked at combining motion graphics and sounds. I wanted the graphics to work such that more was revealed as you moved around the canvas – everything is made out of two colours so as the mouse moves in the horizontal direction, you get to view more of the graphics as a differentiation is created between the background and the actual graphics.

I had an issue with running the local server on my laptop so I used the oscillation program from p5.js to get a sine curve amplitude and frequency to create a sound that my motion graphics responded to. The larger objects respond to the sound that is generated. The rippling, striped circle responds to the silence in between the beep noises. The white ellipse curve is its own thing that just renders what a traditional sine curve looks like.

When the canvas is clicked on, the noise stops and the motion graphics continue. To restart the noise you have to refresh the page.


^mouseX at at 0


^mouseX at maximum width

jooheek&heeseoc – FinalProject

Press 1 to start!

sketch

//JooHee Kim & Steph Chun
//jooheek@andrew.cmu.edu
//heeseoc@andrew.cmu.edu
//Section E & A
//FinalProject

//background peak variables
var peakDetail = 0.005;
var peakSpeed = 0;
//image variables
var startingImg;
var roseImg, foxImg, kingImg, heartImg, princeImg;
var rose1, rose2, fox1, fox2, king1, king2;
var stage1, stage2;
//image size variable
var imgSize = 30;
//image x location for the rose, fox, king, heart
var roseImgX, foxImgX, kingImgX, heartImgX;
//prince x and y location variables
var princeX = 0;
var princeY = 300; 
//prince velocity
var step = 3;
//variable to show different maps
var gameState = "startingPage";

function preload() {
	//starting page image load
	startingImg = loadImage("https://i.imgur.com/FaTj1qD.png");
	//characters image load
	roseImg = loadImage("https://i.imgur.com/GOidsQF.png");
	foxImg = loadImage("https://i.imgur.com/82QrEHu.png");
	kingImg = loadImage("https://i.imgur.com/VGJWuoN.png");
	heartImg = loadImage("https://i.imgur.com/n5dXPi2.png");

	//dialogues image load
	rose1 = loadImage("https://i.imgur.com/tqYH2Mj.png");
	rose2 = loadImage("https://i.imgur.com/dKifumO.png");
	fox1 = loadImage("https://i.imgur.com/6TTLTzV.png");
	fox2 = loadImage("https://i.imgur.com/54o8F0T.png");
	king1 = loadImage("https://i.imgur.com/CJzrcxQ.png");
	king2 = loadImage("https://i.imgur.com/Q8F6SeH.png");

	//stage continue image loads
	stage1 = loadImage("https://i.imgur.com/W075rzc.png");
	stage2 = loadImage("https://i.imgur.com/E0UeoHi.png");

	//prince image load
	princeImg = loadImage("https://i.imgur.com/nHWDXuC.png");

}

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

}

function draw() {

	//loads different map functions at different conditions
	if (gameState == "startingPage") {
		startingPage();
	} else if (gameState == "mapOneMakePlanetMountains") {
		mapOneMakePlanetMountains();
	} else if (gameState == "mapTwoDesertMountainsAndPlatforms") {
		mapTwoDesertMountainsAndPlatforms();
	} else if (gameState == "mapThreeKingPlanet") {
		mapThreeKingPlanet();
	}

	//moves prince with up and right arrow
    if (keyIsDown(RIGHT_ARROW)){
    	princeX += step; //right
    }

    if (keyIsDown(UP_ARROW)){
    	princeY -= step; //up
    } else {//if key is released, the prince falls until the floor
    	princeY += step;
    	princeY = min(princeY, height*3/4-princeImg.height);
    }

}

function keyPressed() {
	//when 1, 2, 3 keys are pressed, the map changes
	if (key == '1') {
		gameState = "mapOneMakePlanetMountains";
		princeX = 0;
		princeY = 300;
	} else if (key == '2') {
		gameState = "mapTwoDesertMountainsAndPlatforms";
		princeX = 0;
		princeY = 300;
	} else if (key == '3') {
		gameState = "mapThreeKingPlanet";
		princeX = 0;
		princeY = 300;
	}
}

//First Game Start Page
function startingPage() {
	image(startingImg, 0, 0, width, height);
	
}

//Map One
function mapOneMakePlanetMountains() {
	background(40, 40, 80);
	noStroke();

	//stars in the background
	fill(255);
	ellipse(random(0, width), random(0, height), 10, 10);

	//peaks in the background
	fill(200);
	beginShape(); 
    for (var planet = 0; planet <= width; planet++) {
        var planetOverallSpeed = (planet * peakDetail) + (millis() * peakSpeed);
        var planetPeaks = map(noise(planetOverallSpeed), 0, 1, width/2, height/4);
        vertex(planet, planetPeaks); 
    }
    vertex(width,height);
    vertex(0, height);
    endShape();

	//plant floor
	var planetFloorY = height*3/4;
	fill(100);
	rect(0, planetFloorY, width, height);

	//rose image
	roseImgX = width - 60;
	image(roseImg, roseImgX, planetFloorY - imgSize, imgSize, imgSize);

	//heart image
	heartImgX = width/2;
	//if prince touches heart it disappears
	if (princeX < heartImgX) {
		image(heartImg, heartImgX, planetFloorY - imgSize, imgSize, imgSize);	
	}

	//prince image
	image(princeImg, princeX, princeY);

	//speech bubbles appear when prince and rose meet
	if (princeX >= roseImgX-60) {
		image(rose1, roseImgX - 130, height*3/4 - 150, imgSize*3, imgSize*3);
		image(rose2, roseImgX - 60, height*3/4 - 130, imgSize*3, imgSize*3);
	}

	//next stage sign when prince goes to end
	if (princeX > roseImgX) {
		image(stage1, 2, height/2-stage1.height/2, stage1.width, stage1.height);
	}

}

//map two
function mapTwoDesertMountainsAndPlatforms() {
	background(131, 234, 255);
	noStroke();
    
    //desert peaks background
    fill(255, 210, 139);
    beginShape(); 

    for (var desert = 0; desert <= width; desert++) {
        var desertOverallSpeed = (desert * peakDetail) + (millis() * peakSpeed);
        var desertPeaks = map(noise(desertOverallSpeed), 0, 1, width/2, height/4);
        vertex(desert, desertPeaks); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //floor rectangles
    var floorY = height*3/4;
    fill(213, 148, 92);

    rect(0, floorY, width/4, height/4);

    rect(width/2, floorY, width/2, height/4);

    //fox image
    foxImgX = width - 60;
    image(foxImg, foxImgX, floorY - imgSize, imgSize, imgSize);
	
	//heart image
	heartImgX = width/2;
	//if prince touches heart, it disappears
	if (princeX < heartImgX) {
    	image(heartImg, heartImgX, floorY - imgSize, imgSize, imgSize);	
	}

	//prince image
	image(princeImg, princeX, princeY);

	//speech bubbles appear when prince meets fox
	if (princeX >= foxImgX-50) {
		image(fox1, foxImgX - 130, floorY - 150, imgSize*3, imgSize*3);
		image(fox2, foxImgX - imgSize*2, floorY - 130, imgSize*3, imgSize*3);
	}
	
	//next stage sign when prince touches edge
	if (princeX > foxImgX) {
		image(stage2, 2, height/2-stage2.height/2, stage2.width, stage2.height);
	}


}

//map three
function mapThreeKingPlanet() {
	background(40, 40, 80);
	noStroke();

	//stars in background
	fill(255);
	ellipse(random(0, width), random(0, height), 10, 10);

    //peaks in background
    fill(200);
	beginShape(); 
    for (var planet = 0; planet <= width; planet++) {
        var planetOverallSpeed = (planet * peakDetail) + (millis() * peakSpeed);
        var planetPeaks = map(noise(planetOverallSpeed), 0, 1, width/2, height/4);
        vertex(planet, planetPeaks); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //floors rectangles
    var kingFloorY = height*3/4;

    fill(100);
    rect(0, kingFloorY, width/6, height/4);

    rect(width/3, kingFloorY, width/6, height/4);

    rect(width*2/3, kingFloorY, width/6, height/4);

    rect(width*5/6, height/2, width/6, height/2);

    //king image
    kingImgX = width - width/8;
    image(kingImg, kingImgX, height/2 - imgSize*2, imgSize*2, imgSize*2);
	
	//heart image
	heartImgX = width*2/3;
	//heart disappears when prince touches heart
	if (princeX < heartImgX) {
    	image(heartImg, heartImgX, height*3/4 - imgSize, imgSize, imgSize);	
	}

	//prince image
	image(princeImg, princeX, princeY);

	//if prince reaches king, speech bubbles appear
	if (princeX >= kingImgX-80) {
		image(king2, kingImgX - 140, height*3/4 - imgSize*4, imgSize*3, imgSize*3);
		image(king1, kingImgX - 60, height/2 - imgSize*4, imgSize*3, imgSize*3);
	}
}

We wanted to make an interactive game like SuperMario with the visual/thematic concept as The little Prince. In our game, the player controls the main character to avoid the obstacles, collect items, and in addition to that, we added a dialogue feature so that we can implement the storyline of The Little Prince better. Because of the time constrain, we weren’t able to achieve everything that we’ve listed in the project brief, and we had to re-distribute the workload so that it makes sense to the timeframe that we’ve got.
Also, making the game itself work was more difficult that we thought because of the unexpected details that we had to tackle.