Claire Lee – Project 10 – Sonic Sketch

project10

/* 
Claire Lee
15-104 Section B
seoyounl@andrew.cmu.edu
Project-10
*/

// I'm using one of my grace days for this project!

var bearUrls = [
    "https://i.imgur.com/BOQ7Bt9.jpg", 
    "https://i.imgur.com/uhBjJf4.jpg",
    "https://i.imgur.com/UK6rJXn.jpg",
    "https://i.imgur.com/UsOhg2L.jpg" ]

var bearBrown;
var bearPolar;
var bearBlack;
var bearPanda;

var bearBrownSound;
var bearPolarSound;
var bearBlackSound;
var bearPandaSound;
//setting the global variables

function preload() {
    bearBrown  = loadImage(bearUrls[0]);
    bearPolar = loadImage(bearUrls[1]);
    bearBlack = loadImage(bearUrls[2]);
    bearPanda = loadImage(bearUrls[3]);
    //loading the images

    bearBrownSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bark.wav");
    bearPolarSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/meow.wav");
    bearBlackSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi.wav");
    bearPandaSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/moo.wav");
    //loading the sounds
}


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

function soundSetup() { // setup for audio generation
    bearBrownSound.setVolume(1);
    bearPolarSound.setVolume(1);
    bearBlackSound.setVolume(1);
    bearPandaSound.setVolume(1);
}


function draw() {
    image(bearBrown, 0, 0, width/4, height);
    image(bearPolar, width/4, 0, width/4, height);
    image(bearBlack, width/2, 0, width/4, height);
    image(bearPanda, 3*width/4, 0, width/4, height);
    //divides canvas into quarters and sets different image for each
}

function mousePressed() {
    if (mouseX > 0 & mouseX < (width/4)) {
        bearBrownSound.play();
    } else {
        bearBrownSound.pause();
    }
    // brown bear sound

    if (mouseX > (width/4) & mouseX < (width/2)) {
        bearPolarSound.play();
    } else {
        bearPolarSound.pause();
    }
    // polar bear sound

    if (mouseX > (width/2) & mouseX < (3*width/4)) {
        bearBlackSound.play();
    } else {
        bearBlackSound.pause();
    }
    // black bear sound

    if (mouseX > (3*width/4) & mouseX < width) {
        bearPandaSound.play();
    } else {
        bearPandaSound.pause();
    }
    //panda bear sound
}

I decided to do bears (with the addition of some unexpected sounds) because I wanted to make a group of cute characters with some unity. I had a lot of fun making the visuals for this project, and it was really interesting to learn how to manipulate sound files and work on a local server.