Jasmine Lee – Project 10 – Sonic Sketch

sonicsketch

//Jasmine Lee
//jasmine4@andrew.cmu.edu
//Section C
//Project-10 (Sonic Sketch)

var mySnd1; //variables to hold sound (cauldron, coins, pumpkin)
var mySnd2;
var mySnd3;
var noteC; //variables to hold sound (colored flasks)
var noteD;
var noteE;
var noteF;
var noteG;
var noteA;
var noteB;
var spiderB; //control spider's movement
var bounce; //control bubbles' movement
var bounce2;
var jingle; //control coins' movement
var bounce3;


function preload() {
    // call loadImage() and loadSound() for all media files here
    mySnd1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bubble.wav");
    mySnd2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/coins.wav");
    mySnd3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/surprise.wav");
    noteC = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielC.wav")
    noteD = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielD.wav")
    noteE = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielE.wav")
    noteF = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielF.wav")
    noteG = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielG.wav")
    noteA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielA.wav")
    noteB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielB.wav")
    mySnd1.setVolume(0.5);
    mySnd2.setVolume(0.5);
    mySnd3.setVolume(0.5);
    noteC.setVolume(0.5);
    noteD.setVolume(0.5);
    noteE.setVolume(0.5);
    noteF.setVolume(0.5);
    noteG.setVolume(0.5);
    noteA.setVolume(0.5);
    noteB.setVolume(0.5);
}

 function setup() {
     createCanvas(600, 600);
 }

function mousePressed() {
    //red-flask-sound
    if (mouseX > 77 & mouseX < 107 && mouseY > 270 & mouseY < 350){
        noteC.play();
    }

    //orange-flask-sound
    if (mouseX > 147 & mouseX < 177 && mouseY > 270 & mouseY < 350){
        noteD.play();
    }

    //yellow-flask-sound
    if (mouseX > 217 & mouseX < 247 && mouseY > 270 & mouseY < 350){
        noteE.play();
    }

    //green-flask-sound
    if (mouseX > 287 & mouseX < 317 && mouseY > 270 & mouseY < 350){
        noteF.play();
    }

    //blue-flask-sound
    if (mouseX > 357 & mouseX < 387 && mouseY > 270 & mouseY < 350){
        noteG.play();
    }

    //purple-flask-sound
    if (mouseX > 427 & mouseX < 457 && mouseY > 270 & mouseY < 350){
        noteA.play();
    }

    //pink-flask-sound
    if (mouseX > 497 & mouseX < 527 && mouseY > 270 & mouseY < 350){
        noteB.play();
    }

    //cauldron-sound
    if (mouseX > 100 & mouseX < 200 && mouseY > 420 & mouseY < 500){
        mySnd1.play();
    }
    //coins-sound
    if (mouseX > 245 & mouseX < 380 && mouseY > 455 & mouseY < 500){
        mySnd2.play();
    }

    //pumpkin-sound
    if (mouseX > 400 & mouseX < 515 && mouseY > 405 & mouseY < 500){
        mySnd3.play();
    }
} 


function draw() {
    // you can replace any of this with your own code:
    background(109, 142, 143);
    angleMode(DEGREES);
    drawings();
    }

function drawings() {
    noStroke();

    //picture frames
    if (second() % 3 == 0) {
        spiderB = 25;
    } else {
        spiderB = -15;
    }

    push();
    translate(120, 50);
    strokeWeight(8);
    stroke(46, 45, 41);
    fill(255, 255, 255, 100); //black frames
    rect(0, 0, 160, 190);
    rect(300, 120, 70, 70);
    stroke(189, 182, 157); //beige frame
    rect(220, -10, 80, 80);
    noStroke();

    //crack in beige frame
    if (second() % 2 == 0) {
        fill(199, 201, 32, 150);
    } else {
        fill(199, 201, 32, 0);
    }
    triangle(296, 3, 296, -5, 250, 50);

    //crack in black frame
    if (second() % 6 == 0) {
        fill(133, 209, 237, 0);
    } else {
        fill(133, 209, 237, 150);
    }
    triangle(366, 124, 366, 134, 310, 180);
    pop();

    push();
    translate(130, 57);
    strokeWeight(4); //cobwebs
    stroke(200, 200, 200);
    line(0, 0, 0, 40);
    line(10, 0, 10, 30);
    line(30, 0, 30, 70 + spiderB);
    line(70, 0, 70, 7);
    line(80, 0, 80, 20);
    line(120, 0, 120, 35);
    line(130, 0, 130, 5);
    line(140, 0, 140, 90);
    noStroke();
    fill(46, 45, 41);
    ellipse(30, 70 + spiderB, 7, 10);
    pop();


    //top-shelf left bracket
    push();
    translate(60, 350);
    fill(46, 45, 41);
    rect(0, 0, 15, 60);
    pop();

    //top-shelf right bracket
    push();
    translate(525, 350);
    fill(46, 45, 41);
    rect(0, 0, 15, 60);
    pop();

    //top-shelf
    push();
    translate(50, 350);
    fill(189, 182, 157);
    rect(0, 0, 500, 15);
    pop();

    //bottom-shelf left bracket
    push();
    translate(60, 500);
    fill(46, 45, 41);
    rect(0, 0, 15, 60);
    pop();

    //bottom-shelf right bracket
    push();
    translate(525, 500);
    fill(46, 45, 41);
    rect(0, 0, 15, 60);
    pop();

    //bottom-shelf
    push();
    translate(50, 500);
    fill(189, 182, 157);
    rect(0, 0, 500, 15);
    pop();

    //flask-1
    push();
    translate(77, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(204, 18, 18, 150); //red
    rect(2, 10, 26, 70);
    pop();

    //flask-2
    push();
    translate(147, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(184, 133, 24, 150); //orange
    rect(2, 15, 26, 65);
    pop();

    //flask-3
    push();
    translate(217, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(199, 201, 32, 150); //yellow
    rect(2, 20, 26, 60);
    pop();

    //flask-4
    push();
    translate(287, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(87, 163, 69, 150); //green
    rect(2, 25, 26, 55);
    pop();

    //flask-5
    push();
    translate(357, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(52, 98, 133, 150); //blue
    rect(2, 30, 26, 50);
    pop();

    //flask-6
    push();
    translate(427, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(102, 64, 168, 150); //purple
    rect(2, 35, 26, 45);
    pop();

    //flask-7
    push();
    translate(497, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(212, 125, 196, 150); //pink
    rect(2, 40, 26, 40);
    pop();

    //cauldron
    if (second() % 2 == 0) { //controls bounce of 1st and 4th bubble
        bounce = -2;
    } else {
        bounce = 2;
    }

    if (second() % 2 == 0) { //controls bounce of 2nd and 3rd bubble
        bounce2 = 3;
    } else {
        bounce2 = -3;
    }

    push();
    translate(150, 460);
    fill(46, 45, 41); //cauldron
    ellipse(0, 0, 100, 80);
    ellipse(0, -30, 100, 20);
    fill(89, 255, 122, 150); //bubbles
    ellipse(0, -30, 80, 10); 
    ellipse(-15, -30 + bounce2, 25, 25);
    ellipse(15, -40 + bounce, 20, 20);
    ellipse(5, -60 + bounce, 10, 10);
    ellipse(25, -75 + bounce2, 7, 7);
    pop();

    //coins
    if (second() % 2 == 0) { //angle at which the coins rotate
        jingle = -2;
    } else {
        jingle = 2;
    }

    if (second() % 2 == 0) { //controls bounce of top coin
        bounce3 = 6;
    } else {
        bounce3 = -6;
    }

    push();
    translate(260, 497);
    rotate(jingle);
    fill(156, 140, 39); //coin-shadows (4th row)
    ellipse(0, 0, 30, 10);
    ellipse(35, 0 + bounce, 30 , 10);
    ellipse(70, 0, 30, 10);
    ellipse(105, 0, 30, 10);
    fill(201, 184, 68); //coins (4th row)
    ellipse(0, -3, 30, 10);
    ellipse(35, -3 + bounce, 30, 10);
    ellipse(70, -3, 30, 10);
    ellipse(105, -3, 30, 10);

    fill(156, 140, 39); //coin-shadows (3rd row)
    ellipse(17, -10 + bounce, 30, 10);
    ellipse(52, -10, 30, 10);
    ellipse(87, -10 + bounce, 30, 10);
    fill(201, 184, 68); //coins (3rd row)
    ellipse(17, -13 + bounce, 30, 10);
    ellipse(52, -13, 30, 10);
    ellipse(87, -13 + bounce, 30, 10);

    fill(156, 140, 39); //coin-shadows (2nd row)
    ellipse(35, -20 + bounce2, 30, 10);
    ellipse(70, -20 + bounce2, 30, 10);
    fill(201, 184, 68); //coins (2nd row)
    ellipse(35, -23 + bounce2, 30, 10);
    ellipse(70, -23 + bounce2, 30, 10);

    fill(156, 140, 39); //coin-shadows (1st row)
    ellipse(52, -30 + bounce3, 30, 10);
    fill(201, 184, 68); //coins (1st row)
    ellipse(52, -33 + bounce3, 30, 10);
    pop();

    //pumpkin
    push();
    translate(460, 460);
    fill(83, 105, 88);
    rect(-5, -55, 15, 30);
    fill(135, 100, 26) //pumpkin-shadow
    ellipse(10, 0, 90, 80);
    ellipse(-10, 0, 90, 80);
    fill(184, 133, 24); //pumpkin
    ellipse(0, 0, 90, 80);
    fill(135, 100, 26, 130) //pumpkin-shadow front
    ellipse(0, 0, 40, 80); 

    //changes pumpkin face color
    if (second() % 2 == 0) {
        fill(0, 0, 0, 175);
    }else {
        fill(250, 227, 72, 175);
    }

    ellipse(-20, -5, 10, 20);
    ellipse(20, -5, 10, 20);
    ellipse(0, 15, 15, 15);
    pop();
}

The sounds included in my project are bubbling sounds, coins jingling, and a surprised noise. These can be played by clicking on the cauldron, coins, and pumpkins, respectively. The colored flasks on the top shelf can also be played, and they sound out glockenspiel notes C, D, E, F, G, A, B (from left to right). I wanted to create a project which could play notes once you clicked in different areas, and I decided to make it colorful. The flasks were the first things I designed, and I thought a Halloween motif would work for fitting in the other sounds.