Month: December 2017

aerubin-Final Project

KEY – NOTE NAME

A STRING:
1 – A
2 – B
3 – C#
4 – D
5 – E

D STRING:
Q – D
W – E
E – F#
R – G
T – A

G STRING:
A – G
S – A
D – B
F – C
G – D

C STRING:
Z – C
X – D
C – E
V – F
B – G

My final project is a playable viola that creates art in the background based on the notes played and length of the notes played. I drew the viola utilizing arcs, triangles, lines, and other 2D shapes. Then I added sounds to the notes played and ellipses that move with the music.

Each note is connected to a key, that when pressed, plays a note and a visual representation of the sound as a green dot showing the placement of the note on the fingerboard. In addition, there are 20 uniquely colored balls hiding behind the viola that are connected to 20 notes that can be played with the keyboard. Each ball will move at its individual vertical and horizontal velocities when the key is pressed. When the key is lifted, the sound will stop and ball will stop in place. When the performer is finished playing, it will leave a pattern of balls in the background. With the end of each unique composition, the background will look unique, linking each unique piece of music with a unique piece of art.

Functioning Code Showing Moving Ellipses

Note: WordPress does not display the audio correctly, so here is a zip file with the audio files and functioning code. In order to run this code, you access it in the terminal and type “python -m SimpleHTTPServer” and the code will run properly. Above is a screenshot of the completely functioning code.

aerubin_Final_Project

Make sure to turn the volume up!

Angela Rubin – Final Project

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Final Project

//Initial Placement of Balls in Background
var x = 300;
var y = 175;
//Speed of Balls in both x and y directions
var dx = -1;
var dy = 2;

var x1 = 300;
var y1 = 175;
var dx1 = 2;
var dy1 = 1;

var x2 = 300;
var y2 = 175;
var dx2 = -1;
var dy2 = 1;

var x3 = 300;
var y3 = 175;
var dx3 = 2;
var dy3 = -2;

var x4 = 300;
var y4 = 175;
var dx4 = 2;
var dy4 = 3;

var x5 = 300;
var y5 = 175;
var dx5 = -3;
var dy5 = 2;

var x6 = 300;
var y6 = 175;
var dx6 = 3;
var dy6 = -3;

var x7 = 300;
var y7 = 175;
var dx7 = -3;
var dy7 = 4;

var x8 = 300;
var y8 = 175;
var dx8 = 4;
var dy8 = 3;

var x9 = 300;
var y9 = 175;
var dx9 = -4;
var dy9 = 4;

var x10 = 300;
var y10 = 175;
var dx10 = -1;
var dy10 = -2;

var x11 = 300;
var y11 = 175;
var dx11 = -2;
var dy11 = -1;

var x12 = 300;
var y12 = 175;
var dx12 = -2;
var dy12 = -2;

var x13 = 300;
var y13 = 175;
var dx13 = -2;
var dy13 = -3;

var x14 = 300;
var y14 = 175;
var dx14 = -3;
var dy14 = -2;

var x15 = 300;
var y15 = 175;
var dx15 = -3;
var dy15 = -4;

var x16 = 300;
var y16 = 175;
var dx16 = -4;
var dy16 = -3;

var x17 = 300;
var y17 = 175;
var dx17 = -1;
var dy17 = 2;

var x18 = 300;
var y18 = 175;
var dx18 = -2;
var dy18 = 3;

var x19 = 300;
var y19 = 175;
var dx19 = 3;
var dy19 = -2;

//Sound Names
var EonAString;
var DonAString;
var ConAString;
var BonAString;
var AonString;
var AonString2;
var GonDString;
var FonDString;
var EonDString;
var DonString;
var DonString2;
var ConGString;
var BonGString;
var AonGString;
var GonString;
var GonString2;
var FonCString;
var EonCString;
var DonCString;
var ConString;

//Background Pattern Variables
var diameter = 15; // diameter of the circles
var horizSpace = diameter; // horizontal spacing of the circles
var verSpace; // vertical spacing of the circles

function setup() {
    createCanvas(450, 350);
    verSpace = horizSpace * sqrt(0.75);   
}


function preload() {
    //Preloads each sound for each note
    EonAString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/E-A_String.m4a");
    DonAString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/D-A_String.m4a");
    ConAString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/C-A_String.m4a");
    BonAString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/B-A_String.m4a");
    AonString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/A-String.m4a");
    AonString2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/A-String2.m4a");
    GonDString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/G-D_String.m4a");
    FonDString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/F-D_String.m4a");
    EonDString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/E-D_String.m4a");
    DonString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/D-String.m4a");
    DonString2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/D-String2.m4a");
    ConGString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/C-G_String.m4a");
    BonGString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/B-G_String.m4a");
    AonGString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/A-G_String.m4a");
    GonString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/G-String.m4a");
    GonString2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/G-String2.m4a");
    FonCString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/F-C_String.m4a");
    EonCString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/E-C_String.m4a");
    DonCString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/D-C_String.m4a");
    ConString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/C-String.m4a");
}

function draw() {
    background(255);

    noStroke();
    for(var i = 0; i < 30; i++) {
        if (i%2==1) {var c = -1;}
        if (i%2==0) {c = 0;}
        for(var n = 0; n < 35+c; n++) {
            fill(i*10, n*10, 255-(i*4));
            ellipse(horizSpace*n+(-7.5*c), verSpace*i, diameter, diameter);
        }
    }

    //Drawing the Balls in Background
    fill(248, 179, 147);
    ellipse(x, y, 50, 50);

    fill(239, 117, 129);
    ellipse(x1, y1, 50, 50);

    fill(191, 109, 135);
    ellipse(x2, y2, 50, 50);

    fill(109, 93, 128);
    ellipse(x3, y3, 50, 50);

    fill(53, 94, 128);
    ellipse(x4, y4, 50, 50);

    fill(156, 196, 176);
    ellipse(x5, y5, 50, 50);

    fill(176, 221, 202);
    ellipse(x6, y6, 50, 50);

    fill(218, 237, 197);
    ellipse(x7, y7, 50, 50);

    fill(246, 166, 168);
    ellipse(x8, y8, 50, 50);

    fill(150, 89, 91);
    ellipse(x9, y9, 50, 50);

    fill(163, 128, 129);
    ellipse(x10, y10, 50, 50);

    fill(170, 210, 189);
    ellipse(x11, y11, 50, 50);

    fill(218, 255, 253);
    ellipse(x12, y12, 50, 50);

    fill(208, 163, 171);
    ellipse(x13, y13, 50, 50);

    fill(247, 193, 172);
    ellipse(x14, y14, 50, 50);

    fill(72, 158, 151);
    ellipse(x15, y15, 50, 50);

    fill(235, 180, 166);
    ellipse(x16, y16, 50, 50);

    fill(211, 200, 215);
    ellipse(x17, y17, 50, 50);

    fill(250, 162, 134);
    ellipse(x18, y18, 50, 50);

    fill(179, 179, 163);
    ellipse(x19, y19, 50, 50);

    //Viola Function to Draw Viola
    makeViola();

    //Color of Dots on Fingerboard
    fill(0, 255, 0);
    noStroke();

    //B Natural, A String, KEY = 2
    if (keyIsDown(50)) {
        BonAString.play();
        ellipse(86, (height/2)-6.7, 4, 4);
        y+=dy;
        x+=dx;
        if(y>height-25 || y<25) {
            dy=-dy;
        }
        if(x>width-25 || x<25) {
            dx=-dx;
        }
    }
    else {BonAString.stop();}

    //C#, A String, KEY = 3
    if (keyIsDown(51)) {
        ConAString.play();
        ellipse(105, (height/2)-7, 4, 4);
        y1+=dy1;
        x1+=dx1;
        if(y1>height-25 || y1<25) {
            dy1=-dy1;
        }
        if(x1>width-25 || x1<25) {
            dx1=-dx1;
        }
    }
    else {ConAString.stop();}

    //D Natural, A String, KEY = 4
    if (keyIsDown(52)) {
        DonAString.play();
        ellipse(114, (height/2)-7.3, 4, 4);
        y2+=dy2;
        x2+=dx2;
        if(y2>height-25 || y2<25) {
            dy2=-dy2;
        }
        if(x2>width-25 || x2<25) {
            dx2=-dx2;
        }
    }
    else {DonAString.stop();}

    //E Natural, A String, KEY = 5
    if (keyIsDown(53)) {
        EonAString.play();
        ellipse(130, (height/2)-7.8, 4, 4);
        y3+=dy3;
        x3+=dx3;
        if(y3>height-25 || y3<25) {
            dy3=-dy3;
        }
        if(x3>width-25 || x3<25) {
            dx3=-dx3;
        }
    }
    else {EonAString.stop();}

    //E Natural, D String, KEY = W
    if (keyIsDown(87)) {
        EonDString.play();
        ellipse(86, (height/2)-2.2, 4, 4);
        y4+=dy4;
        x4+=dx4;
        if(y4>height-25 || y4<25) {
            dy4=-dy4;
        }
        if(x4>width-25 || x4<25) {
            dx4=-dx4;
        }
    }
    else {EonDString.stop();}

    //F#, D String, KEY = E
    if (keyIsDown(69)) {
        FonDString.play();
        ellipse(105, (height/2)-2.3, 4, 4);
        y5+=dy5;
        x5+=dx5;
        if(y5>height-25 || y5<25) {
            dy5=-dy5;
        }
        if(x5>width-25 || x5<25) {
            dx5=-dx5;
        }
    }
    else {FonDString.stop();}

    //G Natural, D String, KEY = R
    if (keyIsDown(82)) {
        GonDString.play();
        ellipse(114, (height/2)-2.5, 4, 4);
        y6+=dy6;
        x6+=dx6;
        if(y6>height-25 || y6<25) {
            dy6=-dy6;
        }
        if(x6>width-25 || x6<25) {
            dx6=-dx6;
        }
    }
    else {GonDString.stop();}

    //A Natural, D String, KEY = T
    if (keyIsDown(84)) {
        AonString.play();
        ellipse(130, (height/2)-2.9, 4, 4);
        y7+=dy7;
        x7+=dx7;
        if(y7>height-25 || y7<25) {
            dy7=-dy7;
        }
        if(x7>width-25 || x7<25) {
            dx7=-dx7;
        }
    }
    else {AonString.stop();}

    //A Natural, A String, KEY = 1
    if (keyIsDown(49)) {
        AonString2.play();
        y16+=dy16;
        x16+=dx16;
        if(y16>height-25 || y16<25) {
            dy16=-dy16;
        }
        if(x16>width-25 || x16<25) {
            dx16=-dx16;
        }
    }
    else {AonString2.stop();}


    //A Natural, G String, KEY = S
    if (keyIsDown(83)) {
        AonGString.play();
        ellipse(86, (height/2)+2.2, 4, 4);
        y8+=dy8;
        x8+=dx8;
        if(y8>height-25 || y8<25) {
            dy8=-dy8;
        }
        if(x8>width-25 || x8<25) {
            dx8=-dx8;
        }
    }
    else {AonGString.stop();}


    //B Natural, G String, KEY = D
    if (keyIsDown(68)) {
        BonGString.play();
        ellipse(105, (height/2)+2.3, 4, 4);
        y9+=dy9;
        x9+=dx9;
        if(y9>height-25 || y9<25) {
            dy9=-dy9;
        }
        if(x9>width-25 || x9<25) {
            dx9=-dx9;
        }
    }
    else {BonGString.stop();}

    //C Natural, G String, KEY = F
    if (keyIsDown(70)) {
        ConGString.play();
        ellipse(114, (height/2)+2.5, 4, 4);
        y10+=dy10;
        x10+=dx10;
        if(y10>height-25 || y10<25) {
            dy10=-dy10;
        }
        if(x10>width-25 || x10<25) {
            dx10=-dx10;
        }
    }
    else {ConGString.stop();}

    //D Natural, G String, KEY = G
    if (keyIsDown(71)) {
        DonString.play();
        ellipse(130, (height/2)+2.9, 4, 4);
        y11+=dy11;
        x11+=dx11;
        if(y11>height-25 || y11<25) {
            dy11=-dy11;
        }
        if(x11>width-25 || x11<25) {
            dx11=-dx11;
        }
    }
    else {DonString.stop();}

    //D Natural, D String, KEY = Q
    if (keyIsDown(81)) {
        DonString2.play();
        y17+=dy17;
        x17+=dx17;
        if(y17>height-25 || y17<25) {
            dy17=-dy17;
        }
        if(x17>width-25 || x17<25) {
            dx17=-dx17;
        }
    }
    else {DonString2.stop();}

    //D Natural, C String, KEY = X
    if (keyIsDown(88)) {
        DonCString.play();
        ellipse(86, (height/2)+6.3, 4, 4);
        y12+=dy12;
        x12+=dx12;
        if(y12>height-25 || y12<25) {
            dy12=-dy12;
        }
        if(x12>width-25 || x12<25) {
            dx12=-dx12;
        }
    }
    else {DonCString.stop();}

    //E Natural, C String, KEY = C
    if (keyIsDown(67)) {
        EonCString.play();
        ellipse(105, (height/2)+6.7, 4, 4);
        y13+=dy13;
        x13+=dx13;
        if(y13>height-25 || y13<25) {
            dy13=-dy13;
        }
        if(x13>width-25 || x13<25) {
            dx13=-dx13;
        }
    }
    else {EonCString.stop();}

    //F Natural, C String, KEY = V
    if (keyIsDown(86)) {
        FonCString.play();
        ellipse(114, (height/2)+7, 4, 4);
        y14+=dy14;
        x14+=dx14;
        if(y14>height-25 || y14<25) {
            dy14=-dy14;
        }
        if(x14>width-25 || x14<25) {
            dx14=-dx14;
        }
    }
    else {FonCString.stop();}
    
    //G Natural, C String, KEY = B
    if (keyIsDown(66)) {
        GonString.play();
        ellipse(130, (height/2)+7.5, 4, 4);
        y15+=dy15;
        x15+=dx15;
        if(y15>height-25 || y15<25) {
            dy15=-dy15;
        }
        if(x15>width-25 || x15<25) {
            dx15=-dx15;
        }
    }
    else {GonString.stop();}

    //G Natural, G String, KEY = A
    if (keyIsDown(65)) {
        GonString2.play();
        y18+=dy18;
        x18+=dx18;
        if(y18>height-25 || y18<25) {
            dy18=-dy18;
        }
        if(x18>width-25 || x18<25) {
            dx18=-dx18;
        }
    }
    else {GonString2.stop();}

    //C Natural, C String, KEY = Z
    if (keyIsDown(90)) {
        ConString.play();
        y19+=dy19;
        x19+=dx19;
        if(y19>height-25 || y19<25) {
            dy19=-dy19;
        }
        if(x19>width-25 || x19<25) {
            dx19=-dx19;
        }
    }
    else {ConString.stop();}
}

function makeViola() {
    stroke(255);
    strokeWeight(.4);

    push();
    noStroke();
    strokeWeight(1);
    fill(187, 74, 28);
    //Upper Bout
    arc(205, (height/2)+.5, 100, 120, 1.5, 4.81, CHORD);
    //Lower Bout
    arc(358, (height/2)+.5, 110, 125, 4.6, 8, CHORD);

    quad(210, (height/2)-59, 208, (height/2)+60.5, 255, (height/2)+52, 255, (height/2)-52);

    noFill();
    strokeWeight(4);
    stroke(187, 74, 28);
    //little curve
    arc(254, (height/2)-55, 11, 10, -.2, 2);
    arc(254, (height/2)+55, 11, 10, 4.3, 6.2);

    //Waist of Viola
    arc(285, (height/2)-55, 50, 30, -.2, 3);
    arc(285, (height/2)+55, 50, 30, 3, 6.6);

    //lower bout
    arc(328.5, (height/2)-62, 48, 14, .12, 2.9);
    arc(329, (height/2)+64, 48, 14, 3.3, 6.1);

    fill(187, 74, 28);
    //filling in sparce areas
    quad(252, (height/2)-48, 252, (height/2)+48, 260, (height/2)+51, 260, (height/2)-51);
    quad(260, (height/2)-45, 260, (height/2)+47, 280, (height/2)+38, 280, (height/2)-36);
    quad(279, (height/2)-38, 279, (height/2)+38, 307, (height/2)+44, 306, (height/2)-43);
    quad(305, (height/2)-44, 306, (height/2)+46, 313, (height/2)+52, 313, (height/2)-52);
    quad(312, (height/2)-53, 312, (height/2)+55, 333, (height/2)+53, 333, (height/2)-52);
    quad(332, (height/2)-53, 332, (height/2)+53, 352, (height/2)+58, 352, (height/2)-58);

    //Black Outline of Body
    strokeWeight(1);
    stroke(0);
    noFill();
    arc(205, (height/2)+.5, 100-7, 120-7, 1.5, 4.81);
    arc(358, (height/2)+.5, 110-7, 125-7, 4.6, 8);
    line(209, (height/2)-59+3, 254, (height/2)-52+3);
    line(209, (height/2)+59-3, 254, (height/2)+52-3);
    arc(254, (height/2)-55+1.6, 11, 10, -.2, 1.7);
    arc(254, (height/2)+55, 11, 10, 4.5, 6.2);
    arc(285, (height/2)-54, 50, 30, -.2, 3.1);
    arc(285, (height/2)+54, 50, 30, 3, 6.6);
    arc(328.5, (height/2)-62, 52, 15, .17, 2.88);
    arc(329.5, (height/2)+64-.5, 49, 16, 3.3, 6.05);
    pop();

    //finger board
    fill(0);
    quad(80-10, (height/2)-10, 80-10, (height/2)+10, 250+26, (height/2)+18, 250+26, (height/2)-18);

    //Pegs
    stroke(0);
    quad(38, (height/2)+9, 38+5-1, (height/2)+9, 38+5-1, (height/2)-17, 38, (height/2)-17);
    quad(38+8, (height/2)+9+8, 38+5+8-1, (height/2)+9+8, 38+5+8-1, (height/2)-17+8, 38+8, (height/2)-17+8);
    quad(38+16, (height/2)+9+1, 38+5+16-1, (height/2)+9+1, 38+5+16-1, (height/2)-17+1, 38+16, (height/2)-17+1);
    quad(38+24, (height/2)+9+7, 38+5+24-1, (height/2)+9+7, 38+5+24-1, (height/2)-17+7, 38+24, (height/2)-17+7);

    //Peg Ends
    fill(0);
    arc(40, (height/2)-20+1, 12, 12, 2.5, 6.9, CHORD);
    arc(40+16, (height/2)-20, 12, 12, 2.5, 6.9, CHORD);
    arc(40+8, (height/2)+20-1, 12, 12, 4+3-1.3, 3+.85, CHORD);
    arc(40+24, (height/2)+20, 12, 12, 4+3-1.3, 3+.85, CHORD);

    //Peg Dots
    ellipse(40, (height/2)-26, 2, 2);
    ellipse(40+16, (height/2)-26-1, 2, 2);
    ellipse(40+8, (height/2)+26, 2, 2);
    ellipse(40+24, (height/2)+26+1, 2, 2);

    //Peg Triangles
    triangle(36, (height/2)-13.5, 44, (height/2)-13.5, 40, (height/2)-23);
    triangle(36+16, (height/2)-13.5-1, 44+16, (height/2)-13.5-1, 40+16, (height/2)-23-1);
    triangle(36+8, (height/2)+13.5, 44+8, (height/2)+13.5, 40+8, (height/2)+23);
    triangle(36+24, (height/2)+13.5+1, 44+24, (height/2)+13.5+1, 40+24, (height/2)+23+1);

    stroke(255);
    //peg box
    fill(187, 74, 28);
    quad(70, (height/2)-10, 70, (height/2)+10, 30, (height/2)+7, 30, (height/2)-7);
    stroke(252, 185, 91);

    //Black Section of Peg Box
    fill(0);
    quad(35, (height/2)-3.5, 35, (height/2)+3.5, 70, (height/2)+6.5, 70, (height/2)-6.5);
    line(35, (height/2)-3.5, 70, (height/2)-6.5);
    line(35, (height/2)+3.5, 70, (height/2)+6.5);

    push();
    //String colors in peg box
    stroke(250, 127, 164); //pink
    line(37.5, (height/2)-3, 42.5, (height/2)-3);
    line(37.5, (height/2)-1.5, 42.5, (height/2)-1.5);
    line(37.5, (height/2), 42.5, (height/2));

    stroke(180, 101, 40); //brown
    line(37.5+8, (height/2)-3+3, 42.5+8, (height/2)-3+3);
    line(37.5+8, (height/2)-1.5+3, 42.5+8, (height/2)-1.5+3);
    line(37.5+8, (height/2)+3, 42.5+8, (height/2)+3);

    stroke(255, 0, 0); //red
    line(37.5+16, (height/2)-3-1, 42.5+16, (height/2)-3-1);
    line(37.5+16, (height/2)-1.5-1, 42.5+16, (height/2)-1.5-1);
    line(37.5+16, (height/2)-1, 42.5+16, (height/2)-1);

    stroke(216, 154, 253); //purple
    line(37.5+8+16, (height/2)-3+3+1, 42.5+8+16, (height/2)-3+3+1);
    line(37.5+8+16, (height/2)-1.5+3+1, 42.5+8+16, (height/2)-1.5+3+1);
    line(37.5+8+16, (height/2)+3+1, 42.5+8+16, (height/2)+3+1);
    pop();

    fill(187, 74, 28);
    //Inner Most Scroll Piece
    quad(15, (height/2)-18+1, 15, (height/2), 43-18-3.5, (height/2), 43-18-3.5, (height/2)-18+1);
    quad(15, (height/2)+18-1, 15, (height/2), 43-18-3.5, (height/2), 43-18-3.5, (height/2)+18-1);

    //Middle Scroll Piece
    quad(13-2, (height/2)-13+1, 13-2, (height/2), 43-18+2, (height/2), 43-18+2, (height/2)-16+1);
    quad(13-2, (height/2)+13-1, 13-2, (height/2), 43-18+2, (height/2), 43-18+2, (height/2)+16-1);
    
    //Outer Most Scroll Piece
    quad(14-9, (height/2)-6, 14-9, height/2, 43-10, height/2, 43-10, (height/2)-11);
    quad(14-9, (height/2)+6, 14-9, height/2, 43-10, height/2, 43-10, (height/2)+11);

    //Bridge
    stroke(223, 210, 194);
    strokeWeight(3);
    line(311, (height/2)-16, 311, (height/2)+16);
    stroke(30);
    strokeWeight(1);
    //Tail piece
    fill(0);
    triangle(345, (height/2)-18, 345, (height/2)+18, 410, (height/2));

    //Chin rest
    push();
    rotate(radians(19));
    ellipse(437, (height/2)-118, 40, 60);
    pop();

    push();
    stroke(251, 198, 212);
    strokeWeight(2.5);
    line(86, (height/2)-9.5, 86, (height/2)+9.5);
    line(105, (height/2)-10, 105, (height/2)+10);
    line(114, (height/2)-10.5, 114, (height/2)+10.5);
    line(130, (height/2)-11, 130, (height/2)+11);
    pop();

    //Strings
    stroke(240);
    strokeWeight(.7);
    line(58, (height/2)-4.5, 70, (height/2)-6); //Upper A String
    line(70, (height/2)-6, 311, (height/2)-14); //A String
    line(43, (height/2)-2, 311, (height/2)-5); //D String
    line(51, (height/2)+2, 311, (height/2)+4); //G String
    line(70, (height/2)+5.7, 311, (height/2)+13); //C String
    line(66, (height/2)+4.5, 70, (height/2)+5.5); //Upper C String

    line(311, (height/2)-14, 348, (height/2)-11); //Lower A String
    line(311, (height/2)-5, 348, (height/2)-4); //Lower D String
    line(311, (height/2)+4, 348, (height/2)+3.5); //Lower G String
    line(311, (height/2)+13, 348, (height/2)+11); //Lower C String

    stroke(255, 0, 0); //Red String Ends
    strokeWeight(1.3);
    line(330, (height/2)-12.6, 348, (height/2)-11);
    stroke(11, 85, 25); //Green String Ends
    line(330, (height/2)-4.5, 348, (height/2)-4);
    line(330, (height/2)+3.8, 348, (height/2)+3.5);
    line(330, (height/2)+12, 348, (height/2)+11);

    //Fine Tuner
    strokeWeight(1);
    stroke(255, 206, 79);
    fill(255, 220, 123);
    ellipse(349, (height/2)-11, 4, 4);

    stroke(0);
    strokeWeight(3);
    noFill();
    //Upper F Hole
    arc(296, (height/2)-25, 30, 12, 2.7, 4);
    line(291, (height/2)-31, 315, (height/2)-34.6);
    arc(310, (height/2)-40, 30, 12, 5.7, 7);
    
    //Lower F Hole
    arc(296, (height/2)+25.5, 30, 12, 2.3, 3.65);
    line(291, (height/2)+31, 315, (height/2)+34.6);
    arc(310, (height/2)+40.6, 30, 12, 5.5, 6.8);

    //little lines on F Holes
    strokeWeight(.8);
    line(305, (height/2)-30, 304, (height/2)-35);
    line(305, (height/2)+31, 304, (height/2)+36);

    //Dots on F Holes
    fill(0);
    ellipse(287, (height/2)-21.5, 4.3, 4.3);
    ellipse(287.2, (height/2)+21.9, 4.3, 4.3);

    ellipse(316.5, (height/2)-43.5, 5, 5);
    ellipse(317, (height/2)+44, 5, 5);
}

BrandonHyun-FinalProject-SectionB

Website for actually trying the program online

 

 

 

code for Final Project

ZIP File for Final Project for 15104

The purpose of this project is to gain different interpretations about the current events by giving the users the opportunity to draw or write about the issues that are presented to them. The content that gets presented is related to current events and political status. Furthermore, I would like to develop this project so that this website can exist in the online world with different interpretations and with opinions that can reside and see different opinions visually. This would be an anonymous participation by the public so we can get honest reviews about the political atmosphere around us and what people are thinking about.

ghou-Final-Project

I wanted to create an interactive and hopefully addicting mini-game. This project is inspired by the old arcade games I used to spend all my allowance on to win the big prize at the top! Also the final stacked blocks of my project looks similar to a modern skyscraper building in the grey skylines.

sketch

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Final Project

//blocks dimensions setup
var h = 20;
var w = 100;
var x = 0;
var y = 20;
var speed = 1;
var fall = 5;
var dropping = false;
var taps = 0;

//arrays
var blocks = [];
var land = [75];

//gameplay
var play = false;
var gameOver = false;
var win = false;


function setup() {
    createCanvas(250, 400);
    frameRate(50);
    
}
 
function draw(){
    noStroke();
    if (gameOver == true){
        if (play == true){//game screen once "gameover"
            makeBackground();
            text("YOUR SCORE WAS " + taps, 60, height - h*taps - 2 * h);
            text("PRESS ANY KEY TO PLAY AGAIN", 28, height - h * taps - h);
            push();
            textSize(10);
            text("screenshot and share your architecture masterpiece :)", 5, 30)//hehe i like architecture
            pop();
            updateDisplay();
        }

        if (win == true){//game screen once player wins
            makeBackground();
            text("YOU WIN",100,40);
            text("PRESS ANY KEY TO PLAY AGAIN", 28, height/2);
            push();
            textSize(10);
            text("screenshot and share your architecture masterpiece :)", 5, 30)
            pop();
            updateDisplay();
        }
        //resetting the variables when restarting game
        if (keyIsPressed){
            gameOver = false;
            play = false;
            win = false;
            blocks = [];
            land = [75];
            dropping = false;
            w = 100;
            x = 0;
            y = 20;
            speed = 1;
            fall = 5;
            taps = 0;
        }
    }
    
    else if (play == true){//screen once game starts
            makeBackground();
            text("PRESS SPACE TO STACK BLOCKS", 30, height/2);
            for (var i = 0; i < 3; i++){
                var xstart = width / 2 - 50;
                var ystart = height - 20;
                blocks[i] = makeBlock(xstart, ystart, 100);
            }//gameplay functions
            blockDrop();
            drawBlock();
            blockMove();
            addBase();
            updateDisplay();
            scoreDisplay();
    }
    
    else {
        if (play == false){//starting screen
            makeBackground();
            text("PRESS ANY KEY TO BEGIN GAME", 28, height/2);
            if (keyIsPressed == true){
                play = true;
            }
        }
    }
    
    if (w <= 0){
        gameOver = true;
        play = true;
    }
    
    else if (taps >= 16 & y >= 50){
        gameOver = true;
        win = true;   
    }
}

function makeBackground(){//making a gradient for the background
    strokeWeight(1);
    for (var i = 0; i < height; i++){
        stroke(255 - i / 8);
        line(0, i, width, i);
    }
}

function blockMove(){//hovering blocks moving side to side
    if (x >= width - w){
        speed = -1 - (taps * 0.2);
    }
    else if(x <= 0){
        speed = 1+(taps * 0.2);
    }
    x = x + speed;
}

function blockDrop(){//dropping blocks
    if (dropping == true){
        y = y + fall;
        speed = 0;
        while (y > height - h * taps){
            dropping = false;
            y = 20;
            speed = 1 + (taps * 0.2);
            fall = 5;
        }
    }
}

function keyTyped(){//setting the blocks to drop once space is pressed
    if (keyCode == 32 & dropping == false && play == true){
        taps = taps + 1;
        append(land, x);
        dropping = true;
    }
}

function drawBlock(){//drawing hovering block
    noStroke();
    fill(0);
    rect(x,y,w,h);
}


function scoreDisplay(){//displaying score (numbers of blocks fallen)
    push();
    fill(255);
    textSize(15);
    text(taps,120,height-5);
    pop();

}
    
function addBase(){//knida confusing measurements of blocks collected in the tower
    var currenth = height - taps * h - h;//current height of tower
    if (y == height - h * taps){//if falling blocks are on the LEFT side of the tower
        if (land[taps] <= land[taps - 1]){
            blocks.push(makeBlock(land[taps - 1], currenth ,w - (land[taps - 1] - land[taps])));
            w = w - (land[taps - 1] - land[taps]);
            shorten(land);
            append(land, land[taps-1]);
        }
        else if (land[taps] > land[taps - 1]){//if falling blocks are on the RIGHT side of the tower
             blocks.push(makeBlock(land[taps], currenth, w - (land[taps] - land[taps - 1])));
             w = w - (land[taps] - land[taps - 1]);
        }
    }
}

function updateDisplay(){//drawing and updating the display of the stacked blocks
    for (var i = 0; i < blocks.length; i++){
        blocks[i].add();
    }
}

function towerBlocks(){//drawing the blocks in the tower
    noStroke();
    fill(0);
    rect(this.x, this.y, this.bw, this.bh);
}

//objects created for each block in the tower
function makeBlock(xlocation, ylocation, currentwidth){
    var block = {x:xlocation,
                 y:ylocation,
                 bh:20,
                 bw:currentwidth,
                 add:towerBlocks,
                 }
    return block;
}

Jdbrown – Final Project – iRony

To begin typing, begin typing.

My final project is a Braille typing interface. Since hardly anyone who can see can read Braille, and hardly anyone who can read Braille can see, It’s meant to be used as a venting system – like writing a letter you’ll never send. The program allows typing of all letters and some punctuation (i.e. question mark, space, enter keys). Once one has typed enough, the program will reset the canvas and repeatedly erase what the user has written. “Delete” will reset the canvas / program.

irony

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Final Project: Braille Writing: "Irony"
// Section C

var dotSize = 8;        // size of Braille dots
var dotX = 10;          // x co-ordinate of each dot
var dotY = 10;          // y co-ordinate of each dot
var dotDis = 10;        // distance between dots;
var t1;                 // turtle object
var counter = 0;        // counter for "transition" function
var back = 0;           // background variable
var col = 0;            // color variable
var spd = 0.5;          // speed variable

function setup () {

    createCanvas (480, 500);
    background (255);

}

function draw () {

    transition(); // function erases the canvas, erases typed input periodically
    
}

function transition() {

    if (counter < 20) {                 // if the user has entered fewer
        col = 0;                        // than 20 letters, dot color is black
    } 

    if (counter > 20 & col < 240) {    // if the user has entered more than
        col += 0.5;                     // 20 letters, dot color lightens
    }

    if (counter > 20) {                 // if the user has entered more than
        col += 1;                       // 20 letters, dot color lightens
    } 

    if (col > 200) {                    // if the dot color is whitish,
        background(back += 1);          // de-draw the background, lighter
        col = 255;                      // dot color is black.
    } 

    if (back >= 255) {                  // if the background is white,
        col = 1;                        // dot color is black
        back -= 0.25;                   // background darkens
    }

    if (counter >= 150) {
        background (255);
        col = 0;
        noLoop();
    }
}

function keyPressed() {

    var t1 = makeTurtle (dotX, dotY);
    print (keyCode);

    if (keyIsPressed) {     // when a key is pressed, increase the counter;
        counter += 1;       // move the Turtle over to mimic space between letters.
        print (counter);
        dotX += 26;
    }

    if (keyCode == 8) {     // when the delete key is pressed, 
        background (255);   // clear the canvas and reset the turtle position.
        dotX = 10;          // clear the counter back to 0;
        dotY = 10;
        counter = 0;
        draw();
    }

    if (dotX > (width - 5)) {   // when the dotX goes beyond the canvas, reset it to keep it on
        dotY += 45;
        dotX = 10;
    }
    if (dotY > (height - 5)) {  // if tying goes beyond the canvas, fix it.
        dotY = 10;
        dotX = 10;
        background(255);
    }
    if (keyCode == 32) {    // creating a space w/ spacebar;
        makeSpace(t1);
    }
    if (keyCode == 65) {
        makeA(t1);
    }
    if (keyCode == 66) {
        makeB(t1);
    }
    if (keyCode == 67) {
        makeC(t1);
    }
    if (keyCode == 68) {
        makeD(t1);
    }
    if (keyCode == 69) {
        makeE(t1);
    }
    if (keyCode == 70) {
        makeF(t1);
    }
    if (keyCode == 71) {
        makeG(t1);
    }
    if (keyCode == 72) {
        makeH(t1);
    }
    if (keyCode == 73) {
        makeI(t1);
    }
    if (keyCode == 74) {
        makeJ(t1);
    }
    if (keyCode == 75) {
        makeK(t1);
    }
    if (keyCode == 76) {
        makeL(t1);
    }
    if (keyCode == 77) {
        makeM(t1);
    }
    if (keyCode == 78) {
        makeN(t1);
    }
    if (keyCode == 79) {
        makeO(t1);
    }
    if (keyCode == 80) {
        makeP(t1);
    }
    if (keyCode == 81) {
        makeQ(t1);
    }
    if (keyCode == 82) {
        makeR(t1);
    }
    if (keyCode == 83) {
        makeS(t1);
    }
    if (keyCode == 84) {
        makeT(t1);
    }
    if (keyCode == 85) {
        makeU(t1);
    }
    if (keyCode == 86) {
        makeV(t1);
    }
    if (keyCode == 87) {
        makeW(t1);
    }
    if (keyCode == 88) {
        makeX(t1);
    }
    if (keyCode == 89) {
        makeY(t1);
    }
    if (keyCode == 90) {
        makeZ(t1);
    }
    if (keyCode == 191) {
        makeQuestion(t1);
    }
    if (keyCode == 13) {
        dotY += 45;
        dotX = 10;
    }
}

function makeA (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeB (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
    t1.penUp();
}

function makeC (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

}

function makeD (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeE (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

}

function makeF (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeG (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeH (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeI (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeJ (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeK (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeL (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeM (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeN (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeO (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeP (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeQ (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeR (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeS (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeT (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeU (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeV (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeW (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeX (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeY (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);
}

function makeZ (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeSpace (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

function makeQuestion (t1) {

    t1.setColor(col);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.forward(dotDis / 20);
}

// makeTurtle(x, y) -- make a turtle at x, y, facing right, pen down
// left(d) -- turn left by d degrees
// right(d) -- turn right by d degrees
// forward(p) -- move forward by p pixels
// back(p) -- move back by p pixels
// penDown() -- pen down
// penUp() -- pen up
// goto(x, y) -- go straight to this location
// setColor(color) -- set the drawing color
// setWeight(w) -- set line width to w
// face(d) -- turn to this absolute direction in degrees
// angleTo(x, y) -- what is the angle from my heading to location x, y?
// turnToward(x, y, d) -- turn by d degrees toward location x, y
// distanceTo(x, y) -- how far is it to location x, y?

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;


/*function TEMPLATE (t1) {

    t1.setColor(0);                 // defining the top left
    t1.setWeight(dotSize);
    t1.penUp();
    t1.forward(dotDis);
    t1.right(90);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the mid left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining the bottom left;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining "turn into second column"
    t1.left(90);                    // and bottom right
    t1.forward(dotDis);
    t1.penDown();
    t1.left(90);
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining mid right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

    t1.penUp();                     // defining top right;
    t1.forward(dotDis);
    t1.penDown();
    t1.forward(dotDis / 20);

}

    Keycodes for letters:
    a = 65, b = 66, c = 67, d = 68
    e = 69, f = 70, g = 71, h = 72,
    i = 73, j = 74, k = 75, l = 76,
    m = 77, n = 78, o = 79, p = 80,
    q = 81, r = 82, s = 83, t = 84,
    u = 85, v = 86, w = 87, x = 88,
    y = 89, z = 90;
    */
    
    /*noStroke();
    fill (0);

    ellipse (dotX, dotY, dotSize, dotSize);         // top left;
    ellipse (dotX * 2, dotY, dotSize, dotSize);     // top right;
    ellipse (dotX, dotY * 2, dotSize, dotSize);     // mid left;
    ellipse (dotX * 2, dotY * 2, dotSize, dotSize); // mid right;
    ellipse (dotX, dotY * 3, dotSize, dotSize);     // bottom left;
    ellipse (dotX * 2, dotY * 3, daotSize, dotSize); // bottom right;

    //ellipse (10, 10, 10, 10); // defining the top left;
    //ellipse (20, 10, 10, 10); // defining the top right;
    //ellipse (10, 20, 10, 10); // defining the mid left;
    //ellipse (20, 20, 10, 10); // defining the mid right;
    //ellipse (10, 30, 10, 10); // defining the bottom left;
    //ellipse (10, 30, 10, 10); // defining the bottom right;
*/
}

mjeong1-Final Project-Section A

To play, use the array keys to move the player(waiter) to left,right,up and down. And you may use space bar to create bullets(hamburger). If the waiter collides with the burger, the game is over.

sketch

//Min Young Jeong
//mjeong1@andrew.cmu.edu
//section A
//Final Project

var screenwidth = 500;
var screenheight = 300;
//setting up three functions each for the player,bullets,and targets
//waiter(player)

var waiter = {
    x : 280,
    width : 60,
    y : 240,
    height: 60,
    draw : function(){
        image(img_waiter, this.x, this.y, this.width, this.height);
    }
}

//burger
var burger  = [];
function Burger(I){
    I.active = true;
    I.x =random(500);
    I.y = 0;
    I.width = 50;
    I.height = 50;
    I.speed = 2;
    I.inBounds = function(){
        return I.x >= 0 & I.y >= 0 && I.x < screenwidth - I.width && I.y < screenheight - I.height;
    }
    I.draw = function(){
        image(img_Burger, I.x, I.y, I.width, I.height);
    }
    I.update= function(){
        I.active = I.active & I.inBounds();
        I.y += I.speed;
    }
    return I;
}

//Coke(bullets)

var coke = [];
function Coke(I){
    I.active = true;
    I.x = waiter.x;//use the same x and y for the initial origin point
    I.y = waiter.y;
    I.width = 30;
    I.height = 30;
    I.speed = 20;
    I.inBounds = function(){
        return I.x >= 0 & I.y >= 0 && I.x < screenwidth - I.width && I.y < screenheight -  I.height;
    }
    I.update = function(){
        I.active  = I.active & I.inBounds();
        I.y -= I.speed;
    }
    I.draw = function(){
        image(img_Coke, I.x, I.y, I.width, I.height);
    }
    return I;
}

//shooting function

function shooting(Burger, Coke){
    return Coke.x + Coke.width >= Burger.x & Coke.x < Burger.x + Burger.width &&
            Coke.y + Coke.height >= Burger.y && Coke.y < Burger.y + Burger.height;
}
//canvas functions 
var img_Burger, img_waiter, img_Coke,img_background;
var score = 0;

function preload(){
    img_Burger = loadImage("https://i.imgur.com/4qXtEIR.png");
    img_waiter = loadImage("https://i.imgur.com/7IGyR4c.png");
    img_Coke = loadImage("https://i.imgur.com/ugtVBKn.png");
    img_background = loadImage("https://i.imgur.com/eHRSSik.jpg");
}//preloading images for each characters

function setup(){
    createCanvas(screenwidth, screenheight);
    noCursor();
}

function draw(){
    clear();
    image(img_background,0,0);
    fill(0);
    text("score : " + score, 10, 10);
    if(keyIsDown(LEFT_ARROW)){
        if(waiter.x-5 >= 0)
            waiter.x -= 5;
        else
            waiter.x = 0;
    }//left key to move the player to the left 
    if(keyIsDown(RIGHT_ARROW)){
        if(waiter.x + 5 <= screenwidth-waiter.width)
            waiter.x += 5;
        else
            waiter.x = screenwidth - waiter.width;
    }//right key to move the player to the right
    if(keyIsDown(UP_ARROW)){
        if(waiter.y-5 >= 0)
            waiter.y -= 5;
        else
            waiter.y = 0;
    }//upward key to move the player upward
    if(keyIsDown(DOWN_ARROW)){
        if(waiter.y + 5 <= screenheight-waiter.height)
            waiter.y += 5;
        else
            waiter.y = screenheight - waiter.height;
    }//downward key to move the player downward 
    if(keyIsDown(32)){
        coke.push(Coke({}));
    }//space to make bullets moving upward
    waiter.draw();//draw waiter

    coke.forEach(function(Coke){
        Coke.update();
        Coke.draw();
    });

    if(Math.random()<0.05){
        burger.push(Burger({}));
    }
    burger = burger.filter(function(Burger){
        return Burger.active;
    });
    burger.forEach(function(Burger){
        Burger.update();
        Burger.draw();
    });

    coke.forEach(function(Coke){
        burger.forEach(function(Burger){
            if(shooting(Burger, Coke)){
                Burger.active = false;
                Coke.active = false;
                score++;
            }
        });
    });

    burger.forEach(function(Burger){
        if(shooting(Burger, waiter)){
            Burger.active = false;
            noLoop();
            textSize(100);
            fill(0);
            text("TOO FULL", 10, 150);
        }
    });
}

For this assignment, I explored the forEach function for the array of bullets and targets and how they collide each other in order to disappear. I also played with the inserting image files into the js file.

jiheek1 – dnoh – SectionD – Final Project

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

intro
playing
game over

atraylor – Final Project

For my final project I made a boredom simulator. Please, enjoy the fun that awaits you in this blandly furnished room with plenty of fun and exciting activities to entertain yourself with. If you become bored, that’s okay! Just click again and find another riveting thing to do to take your mind off the boredom! Along with engaging visuals, treat your weary mind with the wondrous sounds that accompany the many fascinating capabilities of this program. You won’t be disappointed…

atraylor final project

To open this project, I suggest using a local server because it contains several sound files.

To use the simulator, click on an object to entertain yourself, once you are done, click “i’m bored” to return to the room.

ablackbu-Final Project

For my final project I made a game called Meteor Flyer. You can play a version below but some effects are missing. For the best performance, download the game in the “PLAY” link below.

To play, the user:

  1. Navigates a UFO with their mouse through a meteor field.
  2. When the mouse is close to the meteors, they grow.
  3. UFO can shoot a meteor and break it by the user clicking the mouse.
  4. If the UFO makes it to the bottom of the canvas, the player wins
  5. if the UFO hits a meteor, the player loses.
  6. the colors can be changed with the “ENTER” key.
  7. The instructions can be shown by holding down the “SHIFT” key.

Please download the file and use the local file to access the html file to play!!

***********

PLAY ******

***********

 

Here are some snapshots of a winning game and a losing game.

Winning Game:

____________________________________________

Losing Game:

 

Like I said before, this version on WordPress is scaled and some effects don’t work. For the best performance, download the game in the “PLAY” link above.

sketch

var bubbles = [];
var colCount = 0;
var loseF = false;
var rocketX = 300;
var rocketY = 80;
var ropeX = 300;
var ropeY = 80;
var len = 150; //length of array
var on = false;
var gettime;

//pop sound
var sound1;

//background colors
var a = ("#292b29");
var b = ("#fbf49c");
var c = ("#f69b9c");
var d = ("#a3bfe4");
var e = ("#a9dbcf");
var f = ("#9a97ca");
var back = [a, b, c, d, e, f];

//bubble colors
var ba = ("#a5a5a5");
var bb = ("#918c60");
var bc = ("#7a3f42");
var bd = ("#4f5863");
var be = ("#67827b");
var bf = ("#474769");
var bub = [ba, bb, bc, bd, be, bf];

//text colors
var ta = ("#292b29");
var tb = ("#a5a5a5");
var tex = [ta, tb]


function preload() {
    // load sound and image files
    //sound1 = loadSound('sounds/pop.wav');
    mouse1 = loadImage("https://i.imgur.com/vWALILY.png")
}

function setup() {
    createCanvas(600, 600);
    textFont("Courier")
    //set up bubbles object
    for (var i = 0; i < len; i++){
        bubbles[i] = {
            
            x:random(0, width) , 
            y:random(80, height) , 
            diam:random(10, 55) , 
            pointx : 0,
            pointy : 0,
            //make the bubbles
            display : function(){
                stroke(back[colCount]);
                fill(bub[colCount]);
                ellipse(this.x, this.y, this.diam);
            }
        }
    }
}

function draw() {
    background(back[colCount]);
    if(frameCount > 400){
            on = true
    }
    
    for (var i = 0; i < len; i++){
        //display bubbles
        bubbles[i].display();
        //move bubbles to make them shake
        
        if(on == true){
            bubbles[i].x += random(-1,1);
            bubbles[i].y += random(-1,1);
        }
        if(on == false){
            bubbles[i].x += 0
            bubbles[i].y += 0
        }  

        strokeWeight(.5);
        stroke(bub[colCount]);
        //create a line from the mouse to the bubbles if they are 100 pix away
        if(dist(bubbles[i].x, bubbles[i].y, mouseX,mouseY) < 100){
            line(bubbles[i].x, bubbles[i].y, mouseX,mouseY);
            
            //increase bubbles size if the line connects them
            //stop increasing at 150 pix
            if(frameCount > 400){
                if (bubbles[i].diam <= 150){
                    bubbles[i].diam += .3;
                }
            }   
        }
        //test if the rocket is touching a bubble
        var roc = dist(mouseX, mouseY-50, bubbles[i].x, bubbles[i].y);
        if(frameCount > 400){
            if(roc <= 15 + bubbles[i].diam/2){
                loseF = true      
            }
        }

        //if shift is held down, pause the game
        if (keyIsDown(SHIFT)){
            on = false
        }
    }
    
    //if shift is held down the instructions pop up
    if (keyIsDown(SHIFT)){
        on = false
        instructions();
    }

    //put instructions up for a few seconds when page reloads
    if(frameCount > 30 & frameCount < 400){
        //show where to put mouse flashing
        if(frameCount % 10){
            fill("green");
            strokeWeight(0);
            ellipse(ropeX, ropeY, 40, 40, 20)
            //mouse image
            push();
            scale(.08);
            image(mouse1, ropeX * 12.3, ropeY * 12);
            pop();
        }
        instructions();
    }

    //make rocket
    rocket();
    
    //winning message if rocket makes it accross
    if(rocketY >= height + 35){
        end();
    }
    
    //losing message if rocket hits a bubble
    if(loseF == true){
        noLoop();
        lose();
    }

    //countdown
    if(frameCount < 400){
        ticker();
    }

    if(mouseIsPressed){
        var gettime = frameCount
    }
    
    //make beam lasers when pressing on a bubble
    if(frameCount >= gettime & frameCount < gettime + 3){
        strokeWeight(3)
        stroke("red");
        line(ropeX - 5, ropeY, rocketX - 5, rocketY - 50); 
        line(ropeX + 5, ropeY, rocketX + 5, rocketY - 50); 
    }
}

function mousePressed(){   
    for (var i = 0; i < len; i++){
        var g = dist(mouseX, mouseY, bubbles[i].x, bubbles[i].y);
        //if you click on an bubble it pops
        if(g <= bubbles[i].diam/2){
            bubbles[i] = bubbles[len - 1];
            len -= 1;

            //pop sound plays
            //sound1.play();
        }
    }
}

function keyPressed(){
    //if the enter key is pressed, the color of the porgram changes
    //so that the colors cycle through from the array
    if (keyCode == ENTER)  {
        colCount ++;
        if(colCount == 6){
            colCount = 0;
        }
    }
}

function instructions(){
    rectMode(CENTER);
    textAlign(CENTER);
    
    //instrucitons text
    fill(255);
    rect(width/2, height/2 + 5, 420, 150, 20);
    fill(tex[5*frameCount%2]);
    
    textSize(10);
    text("Place Mouse Here --->", ropeX - 90, ropeY + 6);

    textSize(18);
    text("LEAD THE UFO THROUGH THE METEORS", width/2, height/2 - 30);
    text("REACH THE BOTTOM WITHOUT CRASHING", width/2, height/2 - 10);
    
    fill("#292b29");
    textSize(14);
    text("Click to destroy meteors", width/2, height/2 + 20);
    
    textSize(10);
    text("Press 'ENTER' to change colors", width/2-100, height/2 + 55);
    fill("#a3bfe4")
    textSize(10);
    text("Hold 'SHIFT' to pause", width/2+100, height/2 + 55);  
}

//make UFO
function rocket(){
    if(frameCount > 400){
        rocketX = mouseX
        rocketY = mouseY
        ropeX = mouseX
        ropeY = mouseY
    }
    strokeWeight(.5)
    stroke("black");
    line(ropeX, ropeY, rocketX, rocketY-50); 
    stroke(255);
    fill(200);
    ellipse(rocketX, rocketY-50, 30, 30);
    fill(180);
    ellipse(rocketX, rocketY-50, 15, 15);
}

//winning message
function end(){
    background("green");
    noLoop()
    fill("white");
    textSize(20);
    text("YOU WON!", width/2, height/2);
}

//losing message
function lose(){
    background("red");
    textSize(20);
    fill("white");
    text("YOU lOSE!", width/2, height/2);
    textSize(15);
    text("ctrl + R to restart game", width/2, height/2 + 25);
}

//countdown to the start
function ticker(){ 
    fill(255);
    textSize(40)
    text(floor(6 - (frameCount / 80)), 300, 150);
}

yuchienc-haewanp-Final

Overview

Hae Wan and my project in it’s original state cannot be displayed on wordpress because it uses the p5.gui library that isn’t included. We’ve made a modified version with p5 sliders that doesn’t include the full capabilities. Please scroll down to see that, but we would like the attached file to be what is graded. As per instruction of TA’s, we’ve included screenshots of how it works as well as a link to the video. Please download the packaged file below:

yuchienc-sectionC-haewanp-secionA-final

and run the index.html file. There’s no need to setup any servers; the p5.gui library is included. Simply type in any message you want in the “message” box and play around with the parameters to customize your text!

Here is a video of how it works:

https://vimeo.com/246549917

Running the index.html file in a browser with the gui created by p5.js library

Showing how text can be resized

Showing different color palettes

Type of letter randomly changes when parameters are adjusted

Size of type can be resized

The vertical height of the canvas adapts to amount of text and can be used to create a pattern.

Demo

To interact with this demo, please type a few letters (don’t use spaces or backspace or punctuation) and play with the sliders!

sketch

var aSlider;
var bSlider;
var unit;
var padding;
var message = [];
var fontA = {'A': a_a, 'B': a_b, 'C': a_c, 'D': a_d, 'E': a_e, 'F': a_f,
 			 'G': a_g, 'H': a_h, 'I': a_I, 'J': a_j, 'K': a_k, 'L': a_l, 
 			 'M': a_m, 'N': a_n, 'O': a_o, 'P': a_p, 'Q': a_q, 'R': a_r,
 			 'S': a_s, 'T': a_t, 'U': a_u, 'V': a_v, 'W': a_w, 'X': a_x,
 			 'Y': a_y, 'Z': a_z
 			}; //storing all functions of the haewan's font into an object];

function setup() {
    createCanvas(480, 480);
    noStroke();
    aSlider = createSlider(0, 100, 50);
    aSlider.position(330, 405);
    bSlider = createSlider(0, 100, 0);
    bSlider.position(330, 455);
}

function draw() {
    background(250);
    
    fill('#ef4131');
    text('SIZE', 325, 390);
    text('PADDING', 325, 440);
    
    unit = aSlider.value();
    padding = bSlider.value();
    for (i = 0; i < message.length; i++) {
        var cur = message[i];
        typeletter(cur, i);
    }
}

function typeletter(ltr, i) {
    fontA[ltr](unit * i + padding*i, 0);        
};


function keyPressed() {
    message.push(key);
    print(key);
}

////////////////////////////////////////////////////
/////////////////////TYPEFACE///////////////////////
////////////////////////////////////////////////////


function a_a(x, y) {
    trngl(x + unit / 2, y, unit, 3)
    trngl(x + unit / 2, y, unit, 4);
    crcl(x + unit / 2, y + 2 * unit / 3, unit / 3);
}

function a_b(x, y) {
    hlf_crcl(x, y + 3 * unit / 10, 3 * unit / 5, -HALF_PI);
    hlf_crcl(x, y + 7 * unit / 10, 3 * unit / 5, -HALF_PI);
    rctngl(x + unit / 6, y, unit, 'v');
}

function a_c(x, y) {
    hlf_crcl(x, y + unit / 2, unit, HALF_PI);
    crcl(x + unit / 2, y + unit / 2, unit / 3);
}

function a_d(x, y) {
    rctngl(x, y, unit, 'v');
    hlf_crcl(x - unit / 6, y + unit / 2, unit, -HALF_PI);
}

function a_e(x, y) {
    rctngl(x + unit * 0.15, y, unit, 'v');
    crcl(x + unit * 0.7, y + unit * 0.15, unit * 0.3);
    crcl(x + unit * 0.7, y + unit * 0.5, unit * 0.3);
    crcl(x + unit * 0.7, y + unit * 0.85, unit * 0.3);
}

function a_f(x, y) {
    rctngl(x + unit * 0.15, y, unit, 'v');
    crcl(x + unit * 0.7, y + unit * 0.15, unit * 0.3);
    crcl(x + unit * 0.7, y + unit * 0.5, unit * 0.3);
}

function a_g(x, y) {
    hlf_crcl(x, y + unit / 2, unit, 0);
    hlf_crcl(x, y + unit / 2, unit, HALF_PI + QUARTER_PI);
}

function a_h(x, y) {
    rctngl(x, y, unit, 'v');
    crcl(x + unit * 0.5, y + unit * 0.5, unit * 0.3);
    rctngl(x + 2 * unit / 3, y, unit, 'v');
}

function a_I(x, y) {
    rctngl(x + unit / 3, y, unit, 'v');
}

function a_j(x, y) {
    rctngl(x + unit / 2, y, 2 * unit / 3, 'v');
    hlf_crcl(x, y + 2 * unit / 3, 2 * unit / 3, 0);
}

function a_k(x, y) {
    trngl(x + unit / 3, y, unit, 2);
    trngl(x + unit / 3, y, unit, 4);
    rctngl(x, y, unit, 'v');
}

function a_l(x, y) {
    rctngl(x, y, unit, 'v');
    crcl(x + unit * 0.55, y + unit * 0.85, unit * 0.3);
}

function a_m(x, y) {
    trngl(x, y, unit, 4);
    trngl(x + unit / 2, y, unit, 4);
}

function a_n(x, y) {
    trngl(x, y, unit, 4);
    rctngl(x + unit / 2, y, unit, 'v');
}

function a_o(x, y) {
    crcl(x + unit / 2, y + unit / 2, unit);
}

function a_p(x, y) {
    hlf_crcl(x - unit / 6, y + 3 * unit / 10, 3 * unit / 5, -HALF_PI);
    rctngl(x, y, unit, 'v');
}

function a_q(x, y) {
    crcl(x + unit / 2, y + unit / 2, unit);
    trngl(x + unit / 2, y + unit / 2, unit / 2, 4);
}

function a_r(x, y) {
    trngl(x + unit / 3, y + unit / 2, unit / 2, 4);
    hlf_crcl(x - unit / 6, y + 3 * unit / 10, 3 * unit / 5, -HALF_PI);
    rctngl(x, y, unit, 'v');
}

function a_s(x, y) {
    hlf_crcl(x + unit * 0.11, y + unit * 0.4, 3 * unit / 4, HALF_PI + QUARTER_PI);
    hlf_crcl(x - unit * 0.11, y + unit * 0.6, 3 * unit / 4, TWO_PI - QUARTER_PI);
}

function a_t(x, y) {
    rctngl(x + unit / 3, y, unit, 'v');
    crcl(x + unit * 0.15, y + unit * 0.15, unit * 0.3);
    crcl(x + unit * 0.85, y + unit * 0.15, unit * 0.3);
}

function a_u(x, y) {
    rctngl(x, y, unit / 2, 'v');
    rctngl(x + 2 * unit / 3, y, unit / 2, 'v');
    hlf_crcl(x, y + unit / 2, unit, 0);
}

function a_v(x, y) {
    trngl(x + unit / 2, y, unit, 1)
    trngl(x + unit / 2, y, unit, 2);
    crcl(x + unit / 2, y + unit / 3, unit / 3);
}

function a_w(x, y) {
    trngl(x, y, unit, 2);
    trngl(x + unit / 2, y, unit, 2);
}

function a_x(x, y) {
    trngl(x + unit / 2, y, unit, 1);
    trngl(x + unit / 2, y, unit, 2);
    trngl(x + unit / 2, y, unit, 3);
    trngl(x + unit / 2, y, unit, 4);
}

function a_y(x, y) {
    rctngl(x + unit / 3, y + unit / 3, 2 * unit / 3, 'v');
    hlf_crcl(x, y, unit, 0);
}

function a_z(x, y) {
    push();
    translate(x + unit / 2, y + unit / 2);
    rotate(HALF_PI);
    trngl(unit/6, - unit / 2, unit, 1);
    pop();
    rctngl(x, y, unit, 'h');
    rctngl(x, y + 2 * unit / 3, unit, 'h');
}

/////////SHAPES TO DRAW///////////
 
function trngl(x, y, h, d) {
    fill(239, 65, 49);
    beginShape();
    vertex(x, y);
    vertex(x, y + h);
    if (d % 2 == 0) {
        vertex(x + h / 2, y + h * (2 % d) / 2);   
    } else {
        vertex(x - h / 2, y + h * (2 % d) / 2);
    }
    endShape();    
}

function crcl(x, y, r) {
    fill(255, 230, 0);
    ellipse(x, y, r, r);
}

function rctngl(x, y, h, d) {
    fill(46, 49, 150);
    if (d == 'v') {
        rect(x, y, unit / 3, h);
    } else {
        rect(x, y, h, unit / 3);
    }

}

function hlf_crcl(x, y, r, d) {
    fill(236, 0, 140);
    arc(x + unit / 2, y, r, r, d, d + PI);   
    
}

Reflection

We split up the work by each of us designing our own typeface (denoted in comments). Rules and patterns are common in design of typefaces– you’ll notice that there is symmetry between lowercase “d”s, “p”s, “b”s and “q”s, so it was fun applying that idea of repetition to something computational. Bettina focused on writing the code for the GUI and how to compute the spacing for moving letters to new lines, have the canvas height grow with the type, etc. (the draw() and typeletter() functions, the fontB{} functions) And then Haewan focused on the fontA{} functions, and the revised version with p5 sliders so that something can be displayed on WordPress.

NatalieKS-Final-Project

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