Caroline Song – Project 10 – Sonic Sketch

sketch

//Caroline Song
//chsong@andrew.cmu.edu
//Section E
//Project 10 - Sonic Sketch

var crashCymbal;
var rideCymbal;
var bassDrum;
var highTom;
var midTom;

function preload() {
    // call loadImage() and loadSound() for all media files here
    crashCymbal = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/cymbals_1.wav");
    rideCymbal = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/ridecymbal.wav");
    bassDrum = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bassdrum.wav");
    highTom = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hightomdrum.wav");
    midTom = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/midtomdrum.wav");
}


function setup() {
    createCanvas(550, 420);
}


function draw() {
    background("pink");

    //drawing right cymbal stand
    push();
    strokeWeight(3)
    line(420, 75, 495, height/2);
    line(495, height/2, 450, 350);
    line(450, 350, 485, 380);
    line(450, 350, 450, 380);
    line(450, 350, 415, 380);
    pop();

    //drawing right cymbal
    push();
    fill(255, 218, 130);
    noStroke();
    translate(420, 75);
    rotate(10/3);
    ellipse(0, 0, 150, 30);
    pop();

    //drawing left cymbal stand
    push();
    strokeWeight(3);
    line(120, 75, 45, height/2);
    line(45, height/2, 90, 350);
    line(90, 350, 55, 380);
    line(90, 350, 90, 380);
    line(90, 350, 125, 380);

    //drawing left cymbal
    push();
    fill(255, 218, 130);
    noStroke();
    translate(120, 75);
    rotate(-10/3);
    ellipse(0, 0, 150, 30);
    pop();

    //drawing middle (bass) drum
    push();
    fill(191, 6, 0);
    noStroke();
    ellipse(width/2 - 15, 280, 200, 200);
    fill(240);
    ellipse(width/2 - 15, 280, 170, 170);
    fill(0);
    rect(width/2 + 65, 280, 25, 10);
    rect(width/2 - 15, 280 + 80, 10, 25);
    rect(width/2 - 120, 280, 25, 10);
    pop();


    //drawing top left drum
    push();
    fill(191, 6, 0);
    noStroke();
    translate(168, 160);
    rotate(10/3);
    rect(-45, -45, 89, 60);
    pop();

    push();
    fill(191, 6, 0);
    noStroke();
    translate(171, 145);
    rotate(10/3);
    ellipse(0, 0, 90, 30);
    pop();

    push();
    fill(240);
    noStroke();
    translate(160, 200);
    rotate(10/3);
    ellipse(0, 0, 90, 30);
    pop();

    //drawing top right drum
    push();
    fill(191, 6, 0);
    noStroke();
    translate(350, 160);
    rotate(-10/3);
    rect(-45, -45, 89, 60);
    pop();

    push();
    fill(191, 6, 0);
    noStroke();
    translate(348, 145);
    rotate(-10/3);
    ellipse(0, 0, 90, 30);
    pop();

    push();
    fill(240);
    noStroke();
    translate(358, 200);
    rotate(-10/3);
    ellipse(0, 0, 90, 30);
    pop();

}

function mousePressed() {
    //crash cymbal sound when clicking on right cymbal
    if(mouseX > 345 & mouseX < 495 && mouseY > 55 && mouseY < 95){
       crashCymbal.play();
   }

   //ride cymbal sound when clicking on left cymbal
   if(mouseX > 40 & mouseX < 190 && mouseY > 55 && mouseY < 95){
       rideCymbal.play();
   }

   //bass drum sound when clicking on middle drum
   if(mouseX > 160 & mouseX < 350 && mouseY > 180 && mouseY < 370){
       bassDrum.play();
   }

   //high tom sound when clicking on right small drum
   if(mouseX > 310 & mouseX < 400 && mouseY > 130 && mouseY < 210){
       highTom.play();
   }

   //mid tom sound when clicking on left small drum
   if(mouseX > 50 & mouseX < 200 && mouseY > 130 && mouseY < 210){
        midTom.play();
   }
}

I had a lot of fun creating this sonic sketch. For this project, I wanted to create a simplified drum set using 5 sounds. When clicking on the different drums and cymbals, the different sounds, in accordance to what the drum or cymbal is, will play.

The bass drum sound will activate when clicking on the middle/ biggest drum

The high tom sound will activate when clicking on the high tom drum (the right small drum)

The low tom sound will activate when clicking on the low tom drum (the left small drum)

The crash cymbal sound will activate when clicking on the right cymbal

The ride cymbal sound will activate when clicking on the left cymbal