Category: Project-10-Sonic-Sketch

To hear the animal’s sound, click on the image. The four sounds are a dog barking, duck quacking, cat meowing, and cow mooing. To turn the sound off, click the image again.

sound

/* 
Emma Nicklas-Morris
Section B
enicklas
Project-10
Interactive Sound
*/


var cowSound;
var duckSound;
var catSound;
var dogSound;

var dogImg;
var cowImg;
var duckImg;
var catImg;
var adj = 10;


function preload() {
    // load my 4 animal sounds and images
    cowSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/cow.wav");
    duckSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/duck.wav");
    catSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/cat.wav");
    dogSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/dog.wav");

    catImg = loadImage("https://i.imgur.com/nliPYUx.jpg");
    duckImg = loadImage("https://i.imgur.com/mwzKbS9.jpg");
    cowImg = loadImage("https://i.imgur.com/u6LpEOD.jpg");
    dogImg = loadImage("https://i.imgur.com/0tT7kPQ.jpg");

}


function setup() {
    createCanvas(500, 400);
    useSound();

}


function soundSetup() {
    cowSound.setVolume(.5);
    catSound.setVolume(2);

}


function draw() {

    background("lightblue");

    // display the 4 animal images
    image(catImg, width/2 - adj, 0, catImg.width/2, catImg.height/2);
    image(duckImg, 0, 0, duckImg.width/5, duckImg.height/5);
    image(dogImg, -3 * adj, height/2, dogImg.width/2, dogImg.height/2);
    image(cowImg, width/2 + adj + 6, height/2, cowImg.width/1.5 , cowImg.height/1.5);

}



function mousePressed() {
    // when you click on duck picture, play quack sound
    // to turn off, click again.
    if ((mouseX < duckImg.width/5) & (mouseY < duckImg.height/5)) {
        if (duckSound.isLooping()) {
            duckSound.stop();
        }
        else {
            duckSound.loop();
        }

    }

    // when you click on cat picture, play meow sound
    // to turn off, click again.
    else if ((mouseX > duckImg.width/5) & (mouseY < height/2)) {
        if (catSound.isLooping()) {
            catSound.stop();
        }
        else {
            catSound.loop();
        }

    }

    // when you click on dog picture, play barking sound
    // to turn off, click again.
    else if ((mouseX < width/2 + adj + 6) & (mouseY > duckImg.height/5)) {
        if (dogSound.isLooping()) {
            dogSound.stop();
        }
        else {
            dogSound.loop();
        }

    }

    // when you click on cow picture, play mooing sound
    // to turn off, click again.
    else if ((mouseX > width/2 + adj + 6) & (mouseY > height/2)) {
        if (cowSound.isLooping()) {
            cowSound.stop();
        }
        else {
            cowSound.loop();
        }

    }
}

I struggled a lot to get my sounds to work, most of it was something I didn’t quite understand with how p5.js needs to have the sound library called in the html. I also learned that sounds take up a lot of browsing cache, so to help keep your page refreshing properly, you need to clear your cache often when using sounds. My idea is geared towards a pre-school/kindergarten activity. It would allow them to learn what animals make what sounds.

SonicSketch

/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-10
*/
//important variables
var myWind;
var myOcean;
var myBirds;
var mySands;

function preload() {
    //load ocean image 
    var myImage = "https://i.imgur.com/cvlqecN.png"
    currentImage = loadImage(myImage);
    currentImage.loadPixels();
    //loading sounds
    //sound of wind
    myWind = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/winds.wav");
    myWind.setVolume(0.1);
    //sound of ocean
    myOcean = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/oceans.wav");
    myOcean.setVolume(0.1);
    //sound of birds
    myBirds = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/birds.wav");
    myBirds.setVolume(0.1);
    //sound of sand
    mySand = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/sand.wav");
    mySand.setVolume(0.1);
    //birds https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/birds.wav
    //oceans https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/oceans.wav
    //sands https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/sand.wav
    //winds https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/winds.wav
}

function soundSetup() { // setup for audio generation
}

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

function sandDraw() {
    noStroke();
    //sand background color
    fill(255, 204, 153);
    rect(0, height-height/4, width, height/4);
    //sand movement
    for (i=0; i<1000; i++) {
        var sandX = random(0, width);
        var sandY = random(height-height/4, height);
        fill(255, 191, 128);
        ellipse(sandX, sandY, 5, 5);
    }
}

var x = 0;
var cloudmove = 1;

function skyDraw() {
    noStroke();
    //sky color
    fill(179, 236, 255);
    rect(0, 0, width, height/2);
    //cloud color
    fill(255);
    //cloud move
    x = x + cloudmove;
    if(x>=width+100){
        x = 0;
    }
    //cloud parts and drawing multiple clouds in sky section 
    for (i=0; i<=4; i++) {
        push();
        translate(-200*i, 0);
        ellipse(x + 10, height / 6, 50, 50);
        ellipse(x + 50, height / 6 + 5, 50, 50);
        ellipse(x + 90, height / 6, 50, 40);
        ellipse(x + 30, height / 6 - 20, 40, 40);
        ellipse(x + 70, height / 6 - 20, 40, 35);
        pop();
    }
}
function birdDraw() {
    noFill();
    stroke(0);
    strokeWeight(3);
    //Birds and their random coordinates (not randomized 
    //because I chose coordinates for aesthetic reasons)
    curve(100, 150, 120, 120, 140, 120, 160, 140);
    curve(120, 140, 140, 120, 160, 120, 180, 150);
    push();
    translate(-110, 0);
    curve(100, 150, 120, 120, 140, 120, 160, 140);
    curve(120, 140, 140, 120, 160, 120, 180, 150);
    pop();
    push();
    translate(-100, 80);
    curve(100, 150, 120, 120, 140, 120, 160, 140);
    curve(120, 140, 140, 120, 160, 120, 180, 150);
    pop();
    push();
    translate(-30, 40);
    curve(100, 150, 120, 120, 140, 120, 160, 140);
    curve(120, 140, 140, 120, 160, 120, 180, 150);
    pop();
    push();
    translate(70, 50);
    curve(100, 150, 120, 120, 140, 120, 160, 140);
    curve(120, 140, 140, 120, 160, 120, 180, 150);
    pop();
    push();
    translate(100, 100);
    curve(100, 150, 120, 120, 140, 120, 160, 140);
    curve(120, 140, 140, 120, 160, 120, 180, 150);
    pop();
    push();
    translate(150, 25);
    curve(100, 150, 120, 120, 140, 120, 160, 140);
    curve(120, 140, 140, 120, 160, 120, 180, 150);
    pop();
    push();
    translate(200, 75);
    curve(100, 150, 120, 120, 140, 120, 160, 140);
    curve(120, 140, 140, 120, 160, 120, 180, 150);
    pop();
    push();
    translate(250, 13);
    curve(100, 150, 120, 120, 140, 120, 160, 140);
    curve(120, 140, 140, 120, 160, 120, 180, 150);
    pop();
}
function draw() {
    //draw sand 
    sandDraw();
    //draw ocean
    image(currentImage, 0, height/2);
    //draw sky
    skyDraw();
    //draw birds
    birdDraw();
    //implement sound when mouse is pressed
    mousePressed();
}
function mousePressed() {
    //if mouse is in section of canvas where clouds are
    if (mouseIsPressed & mouseY>=0 && mouseY<=height/4) {
        //sound of wind
        myWind.play();
    }
    //if mouse is in section of canvas where birds are
    if (mouseIsPressed & mouseY>height/4 && mouseY<=height/2) {
        //sound of birds
        myBirds.play();
    }
    //if mouse is in section of canvas where ocean is
    if (mouseIsPressed & mouseY>height/2 && mouseY<=3*height/4) {
        //sound of waves
        myOcean.play();
    }
    //if mouse is in section of canvas where sand is
    if (mouseIsPressed & mouseY>3*height/4 && mouseY<=height) {
        //sound of sand
        mySand.play();
    }
}

My code has four different sounds (sounds of wind, birds, waves, and sand). Each is enabled by clicking on the respective quarter of the canvas. For example, the wind sound is enabled by clicking the top layer where the clouds are located.

This took me a very long time because I couldn’t get the sounds to work. But, the idea of having an ocean landscape with different sounds came quickly to me.