Category: 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

sketch

// Jina Lee
// jinal2@andrew.cmu.edu
// Section E
// Project 10
var x = 0;
var cloudmove = 1;
var boathorn;
var seagulls;
var wave;
var help;

function preload() {
    help = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/help.wav");
    boathorn = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/boathorn.wav");
    seagulls = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/seagulls.wav");
    waves = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/waves.wav");
}


function setup() {
    createCanvas(480, 480);
    background(173, 216, 230);
}

function draw() {

    cloudDraw();
    //person
    noStroke();
    fill(226, 63, 41);
    ellipse(300, 200, 15, 40);
    fill(229, 194, 152);
    ellipse(300, 170, 20, 20);
    //flag
    fill(255);
    triangle(200, 100, 200, 130, 250, 115);
    stroke(0);
    strokeWeight(5);
    line(200, 100, 200, 300);
    //boat
    noStroke();
    fill(101, 67, 33);
    arc(250, 200, 350, 400, 0, PI, TWO_PI);
    fill(150);
    rect(150, 170, 30, 30);
    arc(165, 160, 50, 50, 0, PI, TWO_PI);
    //waterwaves
    fill(0, 143, 198);
    rect(0, 320, width, 160);
    for (var i = 0; i < 700; i += 30) {
        push();
        translate(-200 * 1, 0);
        fill(0, 143, 198);
        triangle(i, 320, i + 20, 290, i + 40, 320);
        pop();
    }
}

function cloudDraw() {
    noStroke();
    //sky color
    fill(173, 216, 230);
    rect(0, 0, width, height/2);
    //cloud color
    fill(230);
    //cloud move
    x = x + cloudmove;
    if(x >= width + 10){
        x = 0;
    }
    //cloud parts and drawing multiple clouds in sky section
    for (i = 0; i <= 10; i++) {
        push();
        translate(-200 * i, 0);
        ellipse(x + 10, height / 4, 50, 50);
        ellipse(x + 50, height / 4 + 5, 50, 50);
        ellipse(x + 90, height / 4, 50, 40);
        ellipse(x + 30, height / 4 - 20, 40, 40);
        ellipse(x + 70, height / 4 - 20, 40, 35);
        pop();
    }
}


function mousePressed(){
    // when you press the grey horn
    // then a boat horn will start playing
    var b = dist(mouseX, mouseY, 150, 170);
    if (b < 50) {
        boathorn.play();
    }
    // when you press the person
    // the person shouts for help
    var d = dist(mouseX, mouseY, 300, 170);
    if (d < 20) {
        help.play();
    }
    // when you press the ocean
    // the waves start playing
    if (mouseX > 0 & mouseX < width && mouseY > 320 && mouseY < height) {
        waves.play();
    }
    // when you press the sky
    // seagulls will start chirpping
    if (mouseX > 0 & mouseX < width && mouseY > 0 && mouseY < 320) {
        seagulls.play();
    }
}

For this week, I wanted to create a person lost at sea. When you press the sky, you will hear seagulls everywhere. When you click on the person’s head, you can hear him saying “help, help.” When you press the water, you will hear the ocean waves. When you press the grey horn, you will hear a boat horn go off.

sketch

// Joseph
// Section E
// Project 10 - Sonic 

var px, py;
var diam = 30;
var distance = 20;
var count = 0;

//load sounds
function preload() {
    up = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/up.wav');
    right = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/right.wav');
    left = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/left.wav');
    down = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/down.wav');
    warningSound = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/warning.wav');
}

function setup() {
    // you can change the next 2 lines:
    createCanvas(400, 400);
    px = width/2;
    py = height/2;
    dx = 0;
    dy = 0;
    useSound();
}

// for some reason wont work if not included
function soundSetup() {
}

function draw() {
    background(200, 220, 250);

    //red background - DANGER
    if(px < 50 || px > 350 || py < 50 || py > 350){
        background('red');
        fill('black');
        text("COME BACK!", width / 2 - 40, height / 2);
    }
    //blue background - SAFE
    else {
        background(200, 220, 250);
        fill('black');
        text("DON'T CROSS THE LINE ;)", width / 2, 30);
    }

    //creating movable circle, square boundary, and directions

    if(count === 0){
        text('UP / DOWN / LEFT / RIGHT ARROWS TO MOVE', 67, height - 20);
    }

    rectMode(CENTER);
    noFill();
    rect(width/2, height/2, 300, 300);


    //change color if inside/outside of boundary box
    if(px > 350 || px < 50 || py > 350 || py < 50){
        fill('blue');
    } else {
        fill('yellow');
    }

    //draw ellipse
    ellipse(px, py, diam, diam);

    //when the ball moves off the screen
    if(px < 0){
        px = height - diam/2;
    } if(px > width){
        px = 0;
    }
}

function keyPressed() {
    //press left key
    if (keyCode === LEFT_ARROW) {
        px -= distance;
        if(px < 50 || px > 350 || py < 50 || py > 350){
            warningSound.play();
        }
        else{
            left.play();
            warningSound.stop();
        }
        count++;
    }
    //press right key
    else if (keyCode === RIGHT_ARROW) {
        px += distance;
        if(px < 50 || px > 350 || py < 50 || py > 350){
            warningSound.play();
        }
        else{
            right.play();
            warningSound.stop();
        }
        count++;
    }
    //press up key
    else if (keyCode === UP_ARROW) {
        py -= distance;
        if(px < 50 || px > 350 || py < 50 || py > 350){
            warningSound.play();
        }
        else{
            up.play();
            warningSound.stop();
        }
        count++;
    }
    //press down key
    else if (keyCode === DOWN_ARROW) {
        py += distance;
        if(px < 50 || px > 350 || py < 50 || py > 350){
            warningSound.play();
        }
        else{
            down.play();
            warningSound.stop();
        }
        count++;
    }
}

In this project, I used the metaphor of the ball as me as a young adult. There are boundaries that we’re given and often times we’re tempted to cross them. We’re often warned, but we’re not stopped. Ultimately, it’s up to us.