Category: Section D

I reposted this project so that audio file would work.

sketch

//Kathy Song
//Section D
//yunzhous@andrew.cmu.edu
//Final Project

var trees = [];
var treeWidth = 50;
var treeHeight = 67;
var FL = 380;//y position of finish line
var numMiss = 0;
var combo = 0;
var score = 0;
var happy = "https://i.imgur.com/vDITqlq.png";//happy charlie brown
var backImg = "https://i.imgur.com/4QArmk0.jpg";//background image
var gamescreen = "https://i.imgur.com/kLeHBF4.jpg";//start screen
var CharlieBrown = "https://i.imgur.com/8OMKsmc.png";
var ChristmasTree = "https://i.imgur.com/mQ5fO5A.png";
var drawScreen = 0;//determines if start screen should be drawn
var mySnd;//background music
var count = 1; //framecount after game starts
var gameEnd = false;//determines if game has ended

function preload(){
    mySnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/We-Wish-You-A-Merry-Christmas.wav");//background music
    mySnd.setVolume(0.5);
    backgroundImg = loadImage(backImg);
    screenImg = loadImage(gamescreen);
    CLImag = loadImage(CharlieBrown);
    treeImg = loadImage(ChristmasTree);
    happyImg = loadImage(happy);
}

function setup() {
    createCanvas(480, 480);
    if (drawScreen == 0){//initial screen
        image(screenImg, 0, 0);
        strokeWeight(2);
        stroke(255);
        fill(0);
        textSize(24);
        textAlign(CENTER);
        text("Click To Start", width/2, height - 40);
        text("CHARLIE BROWN'S", width/2, 50);
        text("CHRISTMAS TREE", width/2, 80);
    }
}

function draw() {
    if (count % 3150 == 0){//music ends
        gameEnd = true;//game ends
        text("Press R To Restart", width/2, height - 40);
        count = 1;//reset count to 1
    }

    if (drawScreen == 0){
        //nothing happens
    }
    else if (gameEnd == false) {//if not initial screen, and game hasn't end, do following
        count += 1;//count frames after game starts
        print(count);
        image(backgroundImg, 0, 0);
        strokeWeight(2);
        stroke(255);
        line(0, FL, width, FL);//finish line
        fill(0);
        textSize(20);
        text("Combo " + combo, width - 60, 30);
        text("Score " + score, width - 50, 60);
        treeFunctions();//trees dropping from sky
        addTree();
        var CLx = mouseX - 20;
        if (CLx > width){
            CLx = width - 50;
        }
        image(CLImag, CLx, FL);//charlie brown image with cursor
    }

}

function keyPressed(){
    if (keyCode == 82){//if R is pressed
        gameEnd = false;//gameEnd becomes false, game restart
        mySnd.play();//music restart
    }
}

function mousePressed(){//after mouse is pressed, draw screen becomes 1,
                        //initial screen disappears and music starts playing
  if (drawScreen == 0) {
    drawScreen = 1;
    mySnd.play();
  }
}

function makeTree(bx, by){//make tree object
    var tree = {x: bx,
                y: by,
                w:treeWidth,
                h:treeHeight,
                speed: 3,
                move: treeMove,
                display: treeDisplay,
                click:treeClick,
                miss:treeMiss,
                died: false,//after clicking on the tree, the tree dies and disappear
                counted: false,
                countedMiss: false,
    }
    return tree;
}


function treeDisplay(){//draw tree
    if(!this.died) {
        image(treeImg, this.x, this.y);
    }
}

function treeMove()  {
    this.y += this.speed;//move trees by speed

    //change tree speed and the game gets harder
    if (count > 560 & count < 1100) {
        this.speed = 5;
    }
    if (count > 1100 & count < 2000) {
        this.speed = 6;
    }
    if (count > 2000 & count < 3150) {
        this.speed = 7;
    }

}

function treeFunctions(){//update tree's position and display them
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
        trees[i].click();
        trees[i].miss();
    }
}

function addTree(){//add new trees
    var spacing = 40;

    if (count % 35 == 0) {
        trees.push(makeTree(30 + random(10) * spacing, 0));
    }

}

function treeClick(){
    //if click on tree, tree disappear
    if (mouseIsPressed & mouseX > this.x && mouseX< this.x + this.w && mouseY > this.y && mouseY < this.y + this.h){
        this.died = true;
    }
    //if click on tree at the finish line, get one point
    if (mouseIsPressed & mouseX > this.x && mouseX< this.x + this.w && this.y > FL - this.h && this.y < FL + this.h && !this.counted){
        image(happyImg, width - 50, FL);
        this.counted = true;
        combo += 1;
        score += 1;
    }
}

function treeMiss(){
    //if miss one tree, combo starts from 0
    if (this.y >= FL + 5 & !this.countedMiss && !this.counted){
        numMiss += 1;
        combo = 0;
        this.countedMiss = true;
    }
}

My final project a game called “Charlie Brown’s Christmas Tree”. Christmas trees would randomly drop form the sky and if the player clicks on the trees, they would disappear. However, the only way the player can get score is by clicking on the tree when it’s at the finish line. If the player continuously getting the tree he or she will receive a combo. If he or she missed one tree the combo would start from zero. The flash start with an start screen and the game only starts when players click on the screen. The game ends when the music ends, and if the players press “R” it will restart.

To view the project please go to new

sketch

//Kathy Song
//Section D
//yunzhous@andrew.cmu.edu
//Final Project

var trees = [];
var treeWidth = 50;
var treeHeight = 67;
var FL = 380;//y position of finish line
var numMiss = 0;
var combo = 0;
var score = 0;
var happy = "https://i.imgur.com/vDITqlq.png";//happy charlie brown
var backImg = "https://i.imgur.com/Yn5c4pP.jpg";//background image
var gamescreen = "https://i.imgur.com/dboLTcb.jpg";//start screen
var CharlieBrown = "https://i.imgur.com/8OMKsmc.png";
var ChristmasTree = "https://i.imgur.com/mQ5fO5A.png";
var drawScreen = 0;//determines if start screen should be drawn
var mySnd;//background music
var count = 0; //framecount after game starts

function preload(){
    mySnd = loadSound("We Wish You A Merry Christmas.wav");//background music
    mySnd.setVolume(0.5);
    backgroundImg = loadImage(backImg);
    screenImg = loadImage(gamescreen);
    CLImag = loadImage(CharlieBrown);
    treeImg = loadImage(ChristmasTree);
    happyImg = loadImage(happy);
}

function setup() {
    createCanvas(680, 480);
    if (drawScreen == 0){//initial screen
        image(screenImg, 0, 0);
        textSize(22);
        textAlign(CENTER);
        text("Click To Start", width/2, height - 40);
    }
}

function draw() {
    if (drawScreen == 0){
        //nothing happens
    }
    else{//if not initial screen, do following
        count += 1;//count frames after game starts
        image(backgroundImg, 0, 0);
        strokeWeight(2);
        stroke(255);
        line(0, FL, width, FL);//finish line
        fill(0);
        textSize(20);
        text("Combo " + combo, width - 60, 30);
        text("Score " + score, width - 50, 60);
        treeFunctions();//trees dropping from sky
        addTree();
        image(CLImag, mouseX - 20, FL);//charlie brown image with cursor
    }
}

function mousePressed(){//after mouse is pressed, draw screen becomes 1,
                        //initial screen disappears and music starts playing
  if (drawScreen == 0) {
    drawScreen = 1;
    mySnd.play();
  }
}

function makeTree(bx, by){//make tree object
    var tree = {x: bx,
                y: by,
                w:treeWidth,
                h:treeHeight,
                speed: 3,
                move: treeMove,
                display: treeDisplay,
                click:treeClick,
                miss:treeMiss,
                died: false,//after clicking on the tree, the tree dies and disappear
                counted: false,
                countedMiss: false,
    }
    return tree;
}


function treeDisplay(){//draw tree
    if(!this.died) {
        image(treeImg, this.x, this.y);
    }
}

function treeMove()  {
    this.y += this.speed;//move trees by speed
}

function treeFunctions(){//update tree's position and display them
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
        trees[i].click();
        trees[i].miss();
    }
}

function addTree(){//add new trees
    var spacing = 50;

    if (count % 50 == 0) {
        trees.push(makeTree(30 + random(12) * spacing, 0));
    }

}

function treeClick(){
    //if click on tree, tree disappear
    if (mouseIsPressed & mouseX > this.x && mouseX< this.x + this.w && mouseY > this.y && mouseY < this.y + this.h){
        this.died = true;
    }
    //if click on tree at the finish line, get one point
    if (mouseIsPressed & mouseX > this.x && mouseX< this.x + this.w && this.y > FL - this.h && this.y < FL + this.h && !this.counted){
        image(happyImg, width - 50, FL);
        this.counted = true;
        combo += 1;
        score += 1;
    }
}

function treeMiss(){
    //if miss one tree, combo starts from 0
    if (this.y >= FL + 5 & !this.countedMiss && !this.counted){
        numMiss += 1;
        combo = 0;
        this.countedMiss = true;
    }
}

My final project a game called “Charlie Brown’s Christmas”. Christmas trees would randomly drop form the sky and if the player clicks on the trees, they would disappear. However, the only way the player can get score is by clicking on the tree when it’s at the finish line. If the player continuously getting the tree he or she will receive a combo. If he or she missed one tree the combo would start from zero.

I used a local server. Therefore, to load the html file, you would need to:

1. download the zip file and unzip yunzhous_final project
2. set up a local server
3. open html file in google chrome

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

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 🙂

sketch

//Dana Kim
//danakim@andrew.cmu.edu
//Section D
// Final Project

var AxonImage;
var Axonometric = "https://i.imgur.com/doaZlfr.jpg"

var DiagramSetAImage;
var DiagramSetA = "https://i.imgur.com/EVVcKCe.jpg"

var DiagramSetBImage;
var DiagramSetB = "https://i.imgur.com/qKSqajN.jpg"

var RenderingImage;
var Rendering = "https://i.imgur.com/A4ayosV.jpg"

var SPImage;
var SectionalPerspective = "https://i.imgur.com/Xpo6ExI.jpg"

function preload(){
  AxonImage = loadImage(Axonometric);

  DiagramSetAImage = loadImage(DiagramSetA);

  DiagramSetBImage = loadImage(DiagramSetB);

  RenderingImage = loadImage(Rendering);

  SPImage = loadImage(SectionalPerspective);
}

function setup() {
  createCanvas(480, 480);
  image(AxonImage, 0 ,0); //Initial image is Axonometric
}

function draw(){
  //Menu Buttons
  fill(255);
  strokeWeight(0.5);
  rect(10, 50, 205, 20, 20);
  rect(10, 80, 160, 20, 20);
  rect(10, 110, 115, 20, 20);
  rect(10, 140, 70, 20, 20);

  //Menu Buttons Text
  fill(150);
  textSize(10);
  text("Multi-Use Room Transformation Diagrams", 20, 63);
  text("Lobby Transformation Diagrams", 20, 93);
  text("Sectional Perspective", 20, 123);
  text("Rendering", 20, 153);

}

function mousePressed(){
  //Multi-Use Room Transformation Diagrams Page
  if(10 < mouseX & mouseX < 215 && 50 < mouseY && mouseY < 70){
    image(DiagramSetAImage, 0, 0);
    fill(0)
    rect(10, 19, 53, 15, 20);
    fill(255);
    textSize(10);
    text("H O M E", 16, 30);
    fill(0);
    text("Multi-Use Room Transformation Diagrams", 15, height-10);
  }

  //Lobby Transformation Diagrams Page
  else if(10 < mouseX & mouseX < 170 && 80 < mouseY && mouseY < 100){
    image(DiagramSetBImage, 0, 0);
    fill(0)
    rect(10, 19, 53, 15, 20);
    fill(255);
    textSize(10);
    text("H O M E", 16, 30);
    fill(0);
    text("Lobby Transformation Diagrams", 15, height-10);
  }

  //Sectional Perspective Page
  else if(10 < mouseX & mouseX < 125 && 110 < mouseY && mouseY < 130){
    image(SPImage, 0, 0);
    fill(0)
    rect(10, 19, 53, 15, 20);
    fill(255);
    textSize(10);
    text("H O M E", 16, 30);
    fill(0);
    text("Sectional Perspective", 15, height-10);
  }

  //Rendering Page
  else if(10 < mouseX & mouseX < 80 && 140 < mouseY && mouseY < 160){
    image(RenderingImage, 0, 0);
    fill(0)
    rect(10, 19, 53, 15, 20);
    fill(255);
    textSize(10);
    text("H O M E", 16, 30);
    fill(0);
    text("Stair Rendering", 15, height-10);
  }

  // Home Page (Axonometric)
  else if(10 < mouseX & mouseX < 63 && 19 < mouseY && mouseY < 34){
    image(AxonImage, 0 , 0);
  }
}

I wanted to create an interactive page for one of my past studio projects. I had originally intended to do an informative exploded axon but due to time constraints I was unable to do so. Although the project wasn’t what I had initially intended to do and is fairly simple, I’m still pretty satisfied with the way that it turned out.

 

odhPFinal

//Owen D Haft
//15-104 Section D
//odh@andrew.cmu.edu
//Final Project

var wristJointX = 240; //X Position of the Wrist
var wristJointY = 240; //Y Position of the Wrist
var fingerJointRadius = 5; //Radius of the hand joints
var petalSize = 9; //Radius of the Petals
var petalHeight = 0; //Position of the Petals
//List of Translations
var Texts = ["Life is Beautiful", "La Vida es Bella",
                "La Vie est Belle", "La Vita è Bella", "A Vida é Bela", 
                "Das Leben ist Wunderschoen", "Życie jest Piękne",
                "החיים יפים", "لحياة جميلة", "삶은 아름답다", "生活是美好的", 
                "人生は素晴らしい", "ज़िन्दगी गुलज़ार है", "ชีวิตช่างสวยงาม",
                "Maisha ni Mazuri", "Жизнь прекрасна", "Vita Pulchrum est"];
var THeight = 30; //Height of the Text
var TColor = 0; //Fill color of the Text

function setup() {
    createCanvas(360, 360);
    background(141, 222, 255);
}

function draw() {
    stroke(0);
    strokeWeight(1);

//Draws the Shapes of the Skeleton Hand
    //Forearm
    line(239, 241, 479, 481);
    line(241, 239, 481, 479);
    
    //Carpels
    line(wristJointX, wristJointY, 210, 210);
    line(wristJointX, wristJointY, 126, 234);
    line(wristJointX, wristJointY, 124, 236);
    line(wristJointX, wristJointY, 122, 238);
    line(wristJointX, wristJointY, 120, 240);

    //Metacarpels
    line(210, 210, 185, 195);
    line(126, 234, 110, 210);
    line(124, 236, 95, 215);
    line(122, 238, 85, 225);
    line(122, 240, 80, 235);

    line(110, 210, 135, 190);
    line(95, 215, 80, 185);
    line(85, 225, 65, 200);
    line(80, 235, 55, 220);

    //Styles the joints
    fill(0);
    strokeWeight(1);
    stroke(250);
    
    //Elbow
    ellipse()

    //Wrist Joint
    ellipse(wristJointX, wristJointY, 10);
    
    //Finger Joints
    ellipse(126, 234, fingerJointRadius);
    ellipse(124, 236, fingerJointRadius);
    ellipse(122, 238, fingerJointRadius);
    ellipse(120, 240, fingerJointRadius);

    ellipse(80, 235, fingerJointRadius);
    ellipse(85, 225, fingerJointRadius);
    ellipse(95, 215, fingerJointRadius);
    ellipse(110, 210, fingerJointRadius);
    ellipse(210, 210, fingerJointRadius);

    ellipse(55, 220, fingerJointRadius);
    ellipse(65, 200, fingerJointRadius);
    ellipse(80, 185, fingerJointRadius);
    ellipse(135, 190, fingerJointRadius);
    ellipse(185, 195, fingerJointRadius);

    //Fingertips
    strokeWeight(0); //Removes the outline on the fingertips

    triangle(178, 193, 184, 190, 165, 185);
    triangle(141, 188, 134, 183, 165, 185);
    triangle(81, 179, 75, 181, 86, 155);
    triangle(65, 194, 60, 197, 62, 172);
    triangle(52, 214, 50, 220, 40, 202);

//Flower
    //Stem
    noFill();
    strokeWeight(2); //Gives the Stem thickness
    stroke(84, 157, 26); //Stem Color
    
    curve(226, 154, 173, 156, 168, 195, 226, 191);

    //Pod
    fill(99, 47, 24);

    ellipse(177, 153, 13);

    //Petals
    fill(255, 232, 19);
    strokeWeight(0)
    stroke(0);

    //The Main text
    push();
    fill(TColor);
    textSize(30);
    text(Texts[0], 7, THeight); // Prints only "Life is Beautiful" from Texts 
    pop();

    push();
    translate(177, 153);
    for (var i = 0; i < 6; i++) { //Creates the petals of the flower
        rotate(PI/3);
        ellipse(10, petalHeight, petalSize);
            
        if (mouseIsPressed) { //Exapnds and moves the petals to
            petalHeight -= 1; //encompass the Canvas in Yellow
            petalSize += 1;   //adding a new "background" color

            if (petalSize > 500) { //Limits the growth of
                petalHeight = 500; //the petals and prompts 
                petalSize = 500;   //the Texts to be printed

                //Prints Texts with offset heights
                for (var j = 1; j < 18; j++) {
                    push();
                    translate(-180, -180);
                    fill(TColor + 255); //changes text color to white
                    textSize(16); //changes text size
                    text(Texts[j], random(10, 150), (THeight*2/3)*j+56);
                    pop(); 
                };
            };
        };
    };
    pop();

    //Draws pink petals once the yellow petals grow into the background
    if (mouseIsPressed) {
        translate(177, 153);
        for (var i = 0; i < 6; i++) {
            fill(219, 164, 164);
            rotate(PI/3);
            ellipse(10, 0, 9);
        };
    };
}

I chose to create an interactive art piece for my final project. The work features a skeleton-like hand gently holding a small flower with the words above, “Life is Beautiful”. As the viewer holds down the mouse, the petals grow and replace the background color, as new petals appear in their place. Once the growing petals completely eclipse the background, the phrase “life is beautiful” appears randomly on the screen in different languages.

I was inspired by a sketch I made earlier in the year (below) and the beautiful juxtaposition of the subjects.

sketch

//Jihee Kim, Daniel Noh
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu, dnoh@andrew.cmu.edu
//Final Project
//Section D

var snowmanX = 200;
var easing = 0.1;
var limit; //constrain the snowman and the carrot
var targetX; //target location of snowman and carrot (mouseX)
var dx;
var carrotFrame = 0; //initialize the carrot image
var heartFrame = 0; //initialize the heart image
var carrots = []; //an array of carrot images
var hearts = []; // an array of heart images
var balls = []; //an array of ellipses falling from the top of canvas
var clouds = []; //an array of clouds


var speedCounter = 0;
var carrotCounter = 0;
var scoreCounter = 0;
var carrotStoptime = 0;
var score = 0;

var yVelocity = 1;
var nBalls = 26; //numbrt of snowballs

function preload() {
    //these URLs preload the loading carrot
    var filenamesC = [];
    filenamesC[0] = "https://i.imgur.com/qepItjw.png";
    filenamesC[1] = "https://i.imgur.com/WrRwOgn.png";
    filenamesC[2] = "https://i.imgur.com/IaGv051.png";
    filenamesC[3] = "https://i.imgur.com/788iMwW.png";
    filenamesC[4] = "https://i.imgur.com/L46EZ7S.png";

    //loads the images into the carrots[] array
    for (var i = 0; i < filenamesC.length; i++) {
        carrots[i]= loadImage(filenamesC[i]); //load each frame...
    }

    //loads the images into the hearts[] array
    var filenamesH = [];
    filenamesH[0] = "https://i.imgur.com/awWteaR.png"
    filenamesH[1] = "https://i.imgur.com/vw1d2oU.png"
    filenamesH[2] = "https://i.imgur.com/aBUC5GV.png"
    filenamesH[3] = "https://i.imgur.com/zBHIG8D.png"

    for (var j = 0; j < filenamesH.length; j++) {
        hearts[j]= loadImage(filenamesH[j]); //load each frame...
    }
}

function setup() {
    createCanvas(480,640);
    //create new balls according to locationBalls function
    for (i = 0; i < nBalls; i++) {
        var newBalls = new locationBalls();
        balls.push(newBalls);
    }
}

function draw() {
    //background gradient
    var a = color(160, 232, 229);
    var b = color(238, 252, 251);
    backGradient(0, width, a, b);


    updateCloud();
    removeCloud();
    addCloud();

    updateBalls();
    levelUp();

    //draw carrot nose
    drawCarrot();

    //draw snowman
    drawSnowman();

    //draw score
    drawScore();

    //menu bar on the left side of canvas
    fill(255);
    stroke(130, 232, 229);
    strokeWeight(4);
    rect(20, 75, 70, 350, 35, 35, 35, 35);

    //draw ice
    drawIce();

    //draw carrot icon
    imageMode(CENTER);
    image(carrots[carrotFrame], 55, 350, 80, 80);
    //every fifteen points, a quarter of the carrot icon is filled
    if (score >= 15 & score < 30) {
        carrotFrame = 1;
    }
    if (score >= 30 & score < 45) {
        carrotFrame = 2;
    }
    if (score >= 45 & score < 60) {
        carrotFrame = 3;
    }
    if (score >= 60) {
        carrotFrame = 4;
    }

    //draw heart icons
    image(hearts[heartFrame], 55, 170, 120, 240);

    //draw score
    drawScore();

    //intro popup
    if (speedCounter < 280) {
        fill(255);
        stroke(130, 232, 229);
        strokeWeight(4);
        rect(20, 75, width-40, 350, 35, 35, 35, 35);
        strokeWeight(2);
        fill(130, 232, 229);
        textSize(40);
        text("HOW TO PLAY", width/2, 170);
        noStroke();
        textSize(20);
        text("move the snowman with your mouse", width/2, 250);
        text("and help it dodge the snowballs!", width/2, 280);
        text("you have three lives", width/2, 330);
        text("GOOD LUCK!", width/2, 380);
    }

    //if hit by snowball, lose a heart
    for (i = 0; i < balls.length; i++) {
        if (speedCounter > 300) {
            if ((balls[i].x > (snowmanX - 10)) & (balls[i].x < (snowmanX + 10))
            && (balls[i].y > (height - 150)) && (balls[i].y < (height - 130))) {
                heartFrame += 1;
                balls[i].y = 0;
            }
        }
    }
    //end game
    if (heartFrame >= 3) {
        gameOver();
    }
}

function keyPressed() { //reset game when pressing R
    if (keyCode == 82 & heartFrame == 3) {
        heartFrame = 0;
        carrotFrame = 0;
        snowmanX = 200;
        easing = 0.1;
        speedCounter = 0;
        carrotCounter = 0;
        scoreCounter = 0;
        carrotStoptime = 0;
        score = 0;
        yVelocity = 1;
    }
}

function gameOver() {
    yVelocity = 0;
    snowmanX = width/2;
    easing = 0;
    //game over popup
    fill(255);
    stroke(130, 232, 229);
    strokeWeight(4);
    rect(20, 75, width-40, 350, 35, 35, 35, 35);

    //game over text
    fill(130, 232, 229);
    textSize(50);
    strokeWeight(2);
    text("GAME OVER", width/2, 170);
    textSize(30);
    noStroke();
    strokeWeight(1);
    fill(130, 232, 229);
    text("your score: " + score, width/2, 220);
    textSize(25);
    text("PRESS R TO RESTART", width/2, 350);
    image(carrots[carrotFrame], width/2, 270, 80, 80);
    noLoop;
}

function levelUp() {
    speedCounter += 1;
    if (speedCounter > 600) {
        yVelocity = 2;
    }
    //level 1 speed
    if (speedCounter > 1200) {
        yVelocity = 4;
    }
    //level 2 speed
    if (speedCounter > 1800) {
        yVelocity = 6;
    }
    //level 3 speed
    if (speedCounter > 2400) {
        yVelocity = 8;
    }
    //level 4 speed
    if (speedCounter > 3000) {
        yVelocity = 10;
    }
    //god level speed -- impossible mode.
    if (speedCounter > 3600) {
        yVelocity = 12;
    }
}

function backGradient(y, x, a, b) { //background gradient color
    for (var i = y; i <= height; i++) {
      var mid = map(i, y, y+x, 0, 1);
      var c = lerpColor(a, b, mid);
      stroke(c);
      strokeWeight(2);
      line(y, i, y+x, i);
	}
}

function drawScore() {
    //score keeping system
    scoreCounter += 1;
    if (scoreCounter % 120 == 0 & heartFrame != 3 && speedCounter > 300) {
        score += 1
    }
    fill(130, 232, 229);
    noStroke();
    textAlign(CENTER);
    textSize(25);
    text(score, 55, 290);
}

function drawSnowman() {
    limit = constrain(mouseX, 125, 450); //limits within the canvas
    targetX = limit; //easing the snowman to mouse
    dx = targetX - snowmanX;
    snowmanX += dx * easing;

    fill(255);
    strokeWeight(3);
    stroke(230);
    //body
    ellipse(snowmanX, height-80, 40, 40);
    //head
    ellipse(snowmanX, height-110, 30, 30);
}

function drawCarrot() {
    //limits within the canvas
    limit = constrain(mouseX, 125, 450);
    //easing the carrot to mouse
    targetX = limit;
    dx = targetX - snowmanX;
    snowmanX += dx * easing;

    fill(255, 181, 51);
    strokeWeight(2);
    stroke(255, 110, 51);
    triangle(snowmanX-5, height-125, snowmanX+5, height-125,
             snowmanX, height-145);
}

function drawIce() {
    fill(215, 255, 255);
    strokeWeight(5);
    stroke(175, 250, 250);
    rect(-5, height-55, width+10, 60);
    //the lines on the ice
    for(var i = 0; i < 16; i++) {
        strokeWeight(4);
        line(0 + (i*30), height-55, 20 + (i*30), height-45);
        line(15 + (i*30), height-55, 50 + (i*30), height-35);
    }
}

//updates the clouds so they move and show
function updateCloud() {
    for (var i = 0; i < clouds.length; i++){
      clouds[i].move();
      clouds[i].display();
    }
}

//gets rid of clouds that pass the screen
function removeCloud() {
    var cloudsKeep = [];
    for (var i = 0; i < clouds.length; i++){
      if (clouds[i].x + clouds[i].breadth > 0){
        cloudsKeep.push(clouds[i]);
      }
    }
    clouds = cloudsKeep;
}

//adds clouds at a random interval, replacing the ones that are removed
function addCloud() {
    var newCloudPercent = 0.1;
    if (random(0,1) < newCloudPercent){
        var cloudX = width;
        var cloudY = random(height/1.2);
        clouds.push(makeClouds(width));
    }
}

//adds velocity to the clouds, making them move
function cloudMove() {
    this.x += this.speed;
}

//this is the things that make the cloud
function displayCloud() {
    var cloudHeight = 5;
    var cHeight = this.nCloud*cloudHeight;

    noStroke();
    fill(255, this.opaque);
    push();
    translate(this.x, height/1.15);
    ellipse(0, -cHeight, this.breadth, cHeight/1.5);
    pop();
    push();
    translate(this.x, height/1.15+40);
    ellipse(30, -cHeight, this.breadth, cHeight);
    pop();
}

//these are the parameters for the clouds
function makeClouds(cloudX, cloudY) {
    var cloud = {x: cloudX,
				y: cloudY,
				breadth: random(50, 100),
				speed: -random(1, 3),
				nCloud: round(random(10,23)),
				opaque: random(80, 90),
				move: cloudMove,
				display: displayCloud}
    return cloud;
}

//updates the balls so they move and show
function updateBalls() {
    for (var i = 0; i < balls.length; i++) {
        balls[i].draw();
        balls[i].move();
    }
}

//sets up the movement and display of balls
function locationBalls() {
    this.x = random(125, width);
    this.y = random(0, height);

    this.draw = function() {
        fill(0);
        if (this.y < height + 5) {
            stroke(222, 236, 249);
            strokeWeight(2);
            fill(255);
            ellipse(this.x, this.y, 20, 20);
        } else {
            this.x = random(125, width);
            this.y = -5;
        }
    }

    this.move = function() {
        this.y += yVelocity;
    }
}

For this project, we created a vertical dodging game, inspired by the holiday season. The plot of the game is a snowman who does not want to die and tries to avoid the snow which will gradually kill it.

The player can move the snowman with their mouse to dodge the falling snowballs. As time passes, the snow’s falling speed and the score increases. A carrot icon on the left of the canvas also fills up every 15 points, as well. Whenever the snowballs hit the snowman, the snowman loses a life, which is represented by the three heart icons on the left. Clouds are also in the background to provide a more interesting scenery. At the end of the game, the player is shown their score through points and the carrot icon, and instructed how to restart the game. Below is a zip file and some screenshots of the game. ENJOY and HAPPY HOLIDAYS!

jiheek1_dnoh_finalproject

While this project was stressful, it was really fun to be able to put something together using things I had learned this semester. One of my goals was to be able to create a small, fun game, and I’m proud to say that I have accomplished that goal. I wanted to create something clean, almost child-like in terms of visuals, and I wanted to employ a variety of instruments for the various sounds. One thing I wish I knew how to do was adjust the volume of each sound; some of them are louder than others, and I would’ve liked them all to be the same volume. Even so, it was cool to be able to create something a bit more advanced (as opposed to a still image) and to create an actual game from scratch. I hope you have as much fun playing the game and discovering the different sounds as I had putting them all together!

~

My project is a sound-based game, so please make sure your sound is on!

How to Play:

Press any key to begin, and continue pressing keys (the ones with letters on them) to play the game. You have 15 seconds to create a musical composition, and then judges will judge you. Have fun!

nksFinal

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Final Project

//indicate when the game starts
var startGame;
//keep track of how many seconds have passed since
//the game started
var secondsPassed;
//keep track of how many times the key is pressed
var count = 0;
//indicate whether the game has started or not
var isGamePlayed = false;
//indicate whether to display the end message
var isEndMessage = false;
//use for probability of the faces
var r;
//x position of the faces
var x;
//y position of the faces
var y;
//position of the note
var noteX;
//x position of the notes
var noteXPos = [];
//y position of the notes
var noteYPos = [];

//I tried to avoid having too many
//characters on one line,
//but I didn't want to break the link into
//two separate lines
function preload() {
    boomcrash = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/boomcrash.wav");
    snare = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/snare.wav");
    acousticKick = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/acousticKick.wav");
    drumstick = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/drumstick.wav");
    rattleDrum2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/rattleDrum2.wav");
    smallHighHat = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/small-highhat.wav");
    smallCymbal = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/smallCymbal.wav");
    deepCymbal = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/deepCymbal.wav");
    highStrings = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/highStrings.wav");
    lowStrings = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/lowString2.wav");
    synth1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/synth1.wav");
    synth2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/synth2.wav");
    synth3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/synth3.wav");
    bassStrings = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/bassStrings.wav");
    highStrings2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/highStrings2.wav");
    pianoDo = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoDo.wav");
    pianoRe = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoRe.wav");
    pianoMi = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoMi.wav");
    pianoFa = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoFa.wav");
    pianoSo = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoSo.wav");
    pianoLa = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoLa.wav");
    pianoTi = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoTi.wav");
    pianoOctave = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoHighDo.wav");
    frenchhorn1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/frenchhorn1.wav");
    frenchhorn2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/frenchhorn2.wav");
    frenchhorn3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/frenchhorn3.wav");
}

function setup() {
    createCanvas(480, 480);
    startGame = second();
    r = floor(random(1, 10));
    frameRate(10);
//set the starting position of the note
    noteX = 640;
}

function draw() {
    background(236, 101, 114);
    scale(0.75, 0.75);
    noStroke();
//leftmost judge
    judge1();
//center judge
    judge2();
//rightmost judge
    judge3();
//display the staff and moving notes
    musicNotes();
//if the game has started, keep track of how
//many seconds have passed!
    if (isGamePlayed == true) {
    //Time when the game ends
        e = new Date();
        print(e.getTime());
        secondsPassed = e/1000 - d/1000;
    //display the seconds passed as a timer
        textSize(50);
        text(nf(secondsPassed, 2, 1), 260, 50);
    }
//if 15 seconds have passed since the game started,
//display end message
    if (secondsPassed >= 15.0) {
        isGamePlayed = false;
        isEndMessage = true;
        endMessage();
    }
//draw the notes
    for(var i = 0; i < noteXPos.length; i++) {
        noFill();
        stroke(0);
        strokeWeight(4);
        if (isGamePlayed == true) {
            ellipse(noteXPos[i], noteYPos[i], 15, 10);
        //make them move across the screen
            noteXPos[i] -= 8;
        }
    }
//if the game hasn't started, display the start message
    if (isGamePlayed == false & isEndMessage == false) {
        startMessage();
    }
}

//message before the game starts
function startMessage() {
    noStroke();
    fill(236, 198, 21);
    rect(65, 30, 500, 170, 20);
    fill(255);
    rect(75, 30, 500, 160, 20);
    textSize(30);
    fill(236, 198, 21);
    text("Welcome!", 240, 60);
    fill(0);
    textSize(15);
    text("Here's how to play:", 245, 85);
    text("Each key corresponds to a different sound." + " "
        + "Once you press the first key,", 85, 105);
    text("the timer will start." + " "
        + "You have 15 seconds to create your own", 125, 125);
    text("musical masterpiece. When you're done," + " "
        + "the three judges will judge you!", 85, 145);
    textSize(25);
    fill(236, 198, 21);
    text("Have fun, and good luck!", 185, 175);
}

//message when the game is over
function endMessage() {
    noStroke();
    fill(236, 198, 21);
    rect(65, 30, 500, 160, 20);
    fill(255);
    rect(75, 30, 500, 150, 20);
    fill(0);
    textSize(40);
    fill(236, 198, 21);
    text("The End!", 225, 75);
    textSize(20);
    fill(0);
    text("Look at the judges to see" + " "
        + "how you did!", 150, 110);
    text("Thanks for playing!", 230, 135);
    textSize(15);
    text("Refresh the page if you'd" + " "
        + "like to play again!", 170, 165);
}

//create the leftmost judge: the happy judge
function judge1() {
    x = 80;
    y = 355;
//light gray shadow
    fill(220);
    ellipse(90, 575, 100, 350);
//white body
    fill(255);
    ellipse(100, 575, 100, 350);
//head shadow
    fill(220);
    ellipse(90, 370, 125, 125);
//white head
    fill(255);
    ellipse(100, 370, 125, 125);

//determine expressions
    if (isGamePlayed == true) {
        thinkingFace();
    }
    if (secondsPassed >= 15.0) {
        if (r <= 6) {
            happyFace();
        }
        else if (r >= 7 & r <= 9) {
            surprisedFace();
        }
        else {
            mehFace();
        }
    }
}

//create the center judge: the equal judge
function judge2() {
    x = 280;
    y = 355;
    noStroke();
//light gray shadow
    fill(220);
    ellipse(290, 575, 100, 350);
//white body
    fill(255);
    ellipse(300, 575, 100, 350);
//head shadow
    fill(220);
    ellipse(290, 370, 125, 125);
//white head
    fill(255);
    ellipse(300, 370, 125, 125);

//determine expressions
    if (isGamePlayed == true) {
        thinkingFace();
    }
    if (secondsPassed >= 15) {
        if (r <= 4) {
            happyFace();
        }
        else if (r >= 5 & r <= 7) {
           surprisedFace();
        }
        else {
            mehFace();
        }
    }
}

//create the rightmost judge:
//the hard to impress judge
function judge3() {
    x = 480;
    y = 355;
    noStroke();
//light gray shadow for body
    fill(220);
    ellipse(490, 575, 100, 350);
//white body
    fill(255);
    ellipse(500, 575, 100, 350);
//light gray shadow for head
    fill(220);
    ellipse(490, 370, 125, 125);
//white head
    fill(255);
    ellipse(500, 370, 125, 125);

//determine expressions for game
    if (isGamePlayed == true) {
        thinkingFace();
    }
    if (secondsPassed >= 15) {
        if (r <= 4) {
            surprisedFace();
        }
        else {
            mehFace();
        }
    }
}

//create surprised expression
function surprisedFace() {
    stroke(0);
    strokeWeight(1);
//eyelashes left eye
    stroke(1);
    line(x - 1, y - 15, x - 1, y - 25);
    line(x - 5, y - 15, x - 7, y - 25);
    line(x + 3, y - 15, x + 5, y - 25);
//eyelashes right eye
    line(x + 39, y - 15, x + 39, y - 25);
    line(x + 35, y - 15, x + 33, y - 25);
    line(x + 43, y - 15, x + 45, y - 25);
//eyes
    fill(255);
    ellipse(x, y, 25, 30);
    ellipse(x + 40, y, 25, 30);
//pupils
    fill(0);
    ellipse(x, y, 15, 15);
    ellipse(x + 40, y, 15, 15);
//mouth
    ellipse(x + 20, y + 45, 20, 30);

//display message
    noStroke();
    fill(236, 198, 21);
    rect(x + 40, y - 145, 90, 85, 20);
    triangle(x + 43, y - 70, x + 70, y - 60,
        x + 33, y - 55);
    fill(255);
    rect(x + 50, y - 145, 90, 80, 20);
    triangle(x + 53, y - 75, x + 80, y - 65,
        x + 43, y - 60);
    fill(0);
    textSize(30);
    text("Wow!", x + 60, y - 95);
}

//create unimpressed "meh" expression
function mehFace() {
    fill(0);
    noStroke();
//pupils
    ellipse(x + 5, y, 15, 15);
    ellipse(x + 45, y, 15, 15);
//eyelids (the curves)
    noFill();
    stroke(0);
    strokeWeight(1);
    arc(x + 1, y - 1, 20, 20, PI, 0);
    arc(x + 41, y - 1, 20, 20, PI, 0);
//mouth
    line(x + 10, y + 35, x + 40, y + 35);
    arc(x, y + 35, 20, 20, 3*PI/2, HALF_PI);

//display message
    noStroke();
    fill(236, 198, 21);
    rect(x + 40, y - 145, 90, 85, 20);
    triangle(x + 43, y - 70, x + 70, y - 60,
        x + 33, y - 55);
    fill(255);
    rect(x + 50, y - 145, 90, 80, 20);
    triangle(x + 53, y - 75, x + 80, y - 65,
        x + 43, y - 60);
    fill(0);
    textSize(30);
    text("meh", x + 64, y - 95);
}

//create happy expression
function happyFace() {
//eyes
    stroke(0);
    strokeWeight(1);
//eyelashes left eye
    line(x - 1, y - 10, x - 1, y - 20);
    line(x - 5, y - 10, x - 7, y - 20);
    line(x + 3, y - 10, x + 5, y - 20);
//eyelashes right eye
    line(x + 39, y - 10, x + 39, y - 20);
    line(x + 35, y - 10, x + 33, y - 20);
    line(x + 43, y - 10, x + 45, y - 20);
//eyes
    arc(x, y, 25, 25, PI, 0);
    arc(x + 40, y, 25, 25, PI, 0);
//mouth
    arc(x + 20, y + 30, 50, 50, 0, PI);
//blush marks left
    stroke(236, 101, 114, 100);
    line(x - 35, y + 17, x - 25, y + 12);
    line(x - 25, y + 17, x - 15, y + 12);
    line(x - 15, y + 17, x - 5, y + 12);
//blush marks right
    line(x + 40, y + 17, x + 50, y + 12);
    line(x + 50, y + 17, x + 60, y + 12);
    line(x + 60, y + 17, x + 70, y + 12);

//display message
    noStroke();
    fill(236, 198, 21);
    rect(x + 40, y - 145, 90, 85, 20);
    triangle(x + 43, y - 70, x + 70, y - 60,
        x + 33, y - 55);
    fill(255);
    rect(x + 50, y - 145, 90, 80, 20);
    triangle(x + 53, y - 75, x + 80, y - 65,
        x + 43, y - 60);
    fill(0);
    textSize(28);
    text("Pretty!", x + 55, y - 95);
}

//create thinking face displayed
//during the game
function thinkingFace() {
    stroke(0);
    strokeWeight(1);
    fill(255);
//left eyelid
    arc(x, y + 10, 25, 25, PI, 0);
//right eyelid
    arc(x + 40, y + 10, 25, 25, PI, 0);
//mouth
    fill(255);
    arc(x +5, y + 35, 15, 15, 3*PI/2, HALF_PI);
    arc(x + 22, y + 28, 25, 25, PI/4, 3*PI/4);
}

function musicNotes() {
//music staff (lines)
    for (var i = 3; i < 8; i++) {
        stroke(0, 0, 0, 80);
        strokeWeight(3);
        line(0, i*20, 640, i*20);
//push the y position into the array
        noteYPos.push(i*20);
    }
}

function keyPressed() {
//keep track of how many times
//the keys are pressed
    count++;
//if a key is pressed, start the game
    if (count == 1) {
        isGamePlayed = true;
     // startGame = second();
     //Time when the key was pressed
        d = new Date();
    }
//push the current x position into the noteX array
    noteXPos.push(640);

//assign sounds to each letter
//and only play them if the game is being played
    if(isGamePlayed == true) {
        //letter a
        if (keyCode == 65) {
            boomcrash.play();
        }
        //letter s
        if (keyCode == 83) {
            snare.play();
        }
        //letter d
        if (keyCode == 68) {
            acousticKick.play();
        }
        //letter e
        if (keyCode == 69) {
            drumstick.play();
        }
        //letter w
        if (keyCode == 87) {
            rattleDrum2.play();
        }
        //letter x
        if (keyCode == 88) {
            smallHighHat.play();
        }
        //letter z
        if (keyCode == 90) {
            smallCymbal.play();
        }
        //letter q
        if (keyCode == 81) {
            deepCymbal.play();
        }
        //letter j
        if (keyCode == 74) {
            synth1.play();
        }
        //letter k
        if (keyCode == 75) {
            synth2.play();
        }
        //letter l
        if (keyCode == 76) {
            synth3.play();
        }
        //letter r
        if (keyCode == 82) {
            bassStrings.play();
        }
        //letter t
        if (keyCode == 84) {
            lowStrings.play();
        }
        //letter y
        if (keyCode == 89) {
            highStrings.play();
        }
        //letter u
        if (keyCode == 85) {
            highStrings2.play();
        }
        //letter f
        if (keyCode == 70) {
            pianoDo.play();
        }
        //letter g
        if (keyCode == 71) {
            pianoRe.play();
        }
        //letter h
        if (keyCode == 72) {
            pianoMi.play();
        }
        //letter c
        if (keyCode == 67) {
            pianoFa.play();
        }
        //letter v
        if (keyCode == 86) {
            pianoSo.play();
        }
        //letter b
        if (keyCode == 66) {
            pianoLa.play();
        }
        //letter n
        if (keyCode == 78) {
            pianoTi.play();
        }
        //letter m
        if (keyCode == 77) {
            pianoOctave.play();
        }
        //letter i
        if (keyCode == 73) {
            frenchhorn1.play();
        }
        //letter o
        if (keyCode == 79) {
            frenchhorn2.play();
        }
        //letter p
        if (keyCode == 80) {
            frenchhorn3.play();
        }
    }
}

sketch

//Cora Hickoff
//Section D
//chickoff@andrew.cmu.edu
//Final-Project

//image of dog
var imgD;
//image of fish
var imgF;

//for iterating through dog and fish photos
var num = 0;

//images of dog
var loadedImagesD = [];
//images of fish
var loadedImagesF = [];

//for dragging mouse
var xarray = [];
var yarray = [];

//variables for moth
var x;
var y;
var dx;
var dy;

//variables for blue moth
var w;
var z;
var dw;
var dz; 

//variables for bee
var b;
var p;
var db;
var dp;

function preload() {

    var backgroundImageURL = "https://i.imgur.com/qDrD310.png";
    backgroundIMG = loadImage(backgroundImageURL);

    var sunImageURL = "https://i.imgur.com/6SDAJjt.png";
    sunIMG = loadImage(sunImageURL);

    var mothImageURL = "https://i.imgur.com/bGUODEv.png?1";
    mothIMG = loadImage(mothImageURL);

    var bluemothImageURL = "https://i.imgur.com/FR3gCsQ.png";
    bluemothIMG = loadImage(bluemothImageURL);

    var beeImageURL = "https://i.imgur.com/oTcCy45.png";
    beeIMG = loadImage(beeImageURL);

        //dog photos
        for (var i = 0; i < dogPhotos.length; i++) {
            loadedImagesD.push(loadImage(dogPhotos[i]));
        }

        //fish photos
        for (var i = 0; i < fishPhotos.length; i++) {
            loadedImagesF.push(loadImage(fishPhotos[i]));
        }
}

function setup() {

    createCanvas(700, 500); 

        var d = floor(random(0, dogPhotos.length));
        var f = floor(random(0, 0, fishPhotos.length));

        //images of dog
        imgD = loadedImagesD[d];
        //images of fish
        imgF = loadedImagesF[f];

        x = random(width);
        y = random(height);
        dx = random(-5, 5);
        dy = random(-5, 5);

        w = random(width);
        z = random(height);
        dw = random(-5, 5);
        dz = random(-5, 5);

        b = random(width);
        p = random(height);
        db = random(-5, 5);
        dp = random(-5, 5);
}

function draw() {

    background(200); 

    //photo of background
    image(backgroundIMG, 0, 0, 0);
    //photo of sun
    image(sunIMG, 0, 0, 0);
    //photo of dog
    image(imgD, 0, 0, imgD.width, imgD.height);
    //photo of fish
    image(imgF, 0, 0, imgF.width, imgF.height);

    //drags smaller dog image along canvas
    for (var i = 0; i < xarray.length; i++) {
        fill(0);
        image(imgD, xarray[i], yarray[i], imgD.width/2.4, imgD.height/2.4);
    }
    
    if (xarray.length > 8) {
        xarray.shift(1); 
        yarray.shift(1);
    }

    //photo of moth
    image(mothIMG, x, y, mothIMG.width/2.3, mothIMG.height/2.3);

        x += dx;
        y += dy;

        //if image exceeds canvas width,
        //set back to 0
        if (x > width) x = 0;
        else if (x < 0) x = width;
        //if image exceeds canvas height,
        //set back to 0
        if (y > height) y = 0;
        else if (y < 0) y = height;

    //photo of blue moth
    image(bluemothIMG, w, z, bluemothIMG.width/1.9, bluemothIMG.height/1.9);

        w += dw;
        z += dz;

        //if image exceeds canvas width,
        //set back to 0
        if (w > width) w = 0;
        else if (w < 0) w = width;
        //if image exceeds canvas height,
        //set back to 0
        if (z > height) z = 0;
        else if (z < 0) z = height;

    //photo of bee
    image(beeIMG, b, p, beeIMG.width/2.5, beeIMG.height/2.5);

        b += db;
        p += dp;

        //if image exceeds canvas width,
        //set back to 0
        if (b > width) b = 0;
        else if (b < 0) b = width;
        //if image exceeds canvas height,
        //set back to 0
        if (p > height) p = 0;
        else if (p < 0) p = height;

    //lightens screen when mouse over sun
    if (mouseX <= 398 & mouseX >= 320 && mouseY >= 30 && mouseY <= 105) {

        rectMode(CORNER);
        noStroke();
        fill(246, 215, 161, 70);
        rect(0, 0, 700, 500);
    }
}

function mouseDragged() {

    xarray.push(mouseX);
    yarray.push(mouseY);
}

function mousePressed() {

    //iterates through dog photos when mouse clicks its body
    if (mouseX <= 500 & mouseX >= 150 && mouseY >= 275 && mouseY <= 400) {
        var d = num % dogPhotos.length;
        imgD = loadedImagesD[d];
        num++;
    }

    //iterates through fish photos when mouse clicks blanket
    if (mouseX <= 700 & mouseX >= 0 && mouseY >= 130 && mouseY <= 250) {
        var f = num % fishPhotos.length;
        imgF = loadedImagesF[f];
        num++;
    }
}

var dogPhotos = [

    //rusty-colored dog
    "https://i.imgur.com/2vglMnn.png",
    //white/pink dog
    "https://i.imgur.com/IWbYamo.png",
    //lilac dog
    "https://i.imgur.com/I5xU7LF.png",
    //black dog
    "https://i.imgur.com/AAQQgCj.png",
    //blue dog
    "https://i.imgur.com/CTZSr9D.png",
    //mulberry dog
    "https://i.imgur.com/kt5rN0R.png"]

var fishPhotos = [
    
    //first fish
    "https://i.imgur.com/bD3GBjE.png",
    //second fish
    "https://i.imgur.com/eUWa3dx.png",
    //third fish
    "https://i.imgur.com/XJFlBTd.png"]
    

https://vimeo.com/246466644

When I started this project, I knew that I wanted to give users a hands-on experience, similar to the  I Spy computer games that I’d play as a kid, which I drew inspiration from. The worlds created in these games still felt genuine despite the fact that they were within a computer screen. This is in part because photos from real life were used.

Moreover, I really loved the Mixies Assignment and that it felt like we were playing with puzzle pieces and working with our hands, even though we were doing this electronically. This is why I chose to use photos that I’ve taken and use similar methods from that assignment to make this project interactive and fun.

To download this project, click this zip file: chickoff-final-project