Angela Lee – Project 10 – Sonic Sketches

Long ago, the four nations lived together in harmony. Then, everything changed when the Fire Nation attacked…

sketch

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Project 10 Sonic Sketch
*/

// illustrations of the avatar characters
// illustrations created by me :)
var imageLinks = [
    "https://i.imgur.com/b8bcUw6.png",
    "https://i.imgur.com/CNlT1Ed.png",
    "https://i.imgur.com/vmDdgoD.png",
    "https://i.imgur.com/yOvvKhm.png"];

// variables in which images will be loaded into
var katara;
var aang; 
var toph; 
var zuko; 

// variables for sound
var waterSound; 
var airSound;
var earthSound; 
var fireSound;  


// loading the images and sounds
function preload() {
    // call loadImage() and loadSound() for all media files here
    aang = loadImage("https://i.imgur.com/b8bcUw6.png");
    katara = loadImage("https://i.imgur.com/CNlT1Ed.png");
    toph = loadImage("https://i.imgur.com/vmDdgoD.png");
    zuko = loadImage("https://i.imgur.com/yOvvKhm.png");

    waterSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/water-3.wav");
    airSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/wind.wav");
    earthSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/earth.wav");
    fireSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/fire.wav");
}


function setup() {
    createCanvas(480, 480);
    //======== call the following to use sound =========
    useSound();
}


function soundSetup() { // setup for audio generation
    waterSound.setVolume(1);
    airSound.setVolume(1.25);
    earthSound.setVolume(1);
    fireSound.setVolume(1);
}


function draw() {
    background(200);

    // images of the characters
    image(aang, 0, 0, width/2, height/2);
    image(katara, width/2, 0, width/2, height/2);
    image(toph, 0, height/2, width/2, height/2);
    image(zuko, width/2, height/2, width/2, height/2);
}

function mousePressed() {

    // airbending sounds play if user clicks in aang's space
    if (mouseX >= 0 & mouseX < width/2 && 
        mouseY >= 0 && mouseY < height/2) {
        airSound.play();
    } else { // if user clicks away, sound stops
        airSound.pause();
    }

    // waterbending sounds play if user clicks in katara's space
    /*
    note: the water sound has some silence in it, so if you 
    hear silence even after pressing on katara, it may be 
    the silent part of the file. click again to start from 
    the beginning of that sound file.
    */ 
    if (mouseX >= width/2 & mouseX < width &&
        mouseY >= 0 && mouseY < height/2) {
        waterSound.play();
    } else { // if user clicks away, sound stops
        waterSound.pause(); 
    }

    // earthbending sounds play if user clicks in toph's space
    if (mouseX >= 0 & mouseX < width/2 &&
        mouseY >= height/2 && mouseY < height) {
        earthSound.play();
    } else { // if user clicks away, sound stops
        earthSound.pause();
    }

    // firebending sounds play if user clicks in zuko's space
    if (mouseX >= width/2 & mouseX < width &&
        mouseY >= height/2 && mouseY < height) {
        fireSound.play();
    } else { // if user clicks away, sound stops
        fireSound.pause();
    }
}

Because one of the requirements was to feature at least 4 sounds, I thought of things that came in four and could be represented. There are 4 nations in the world of Avatar, which is a show I love. To introduce people who haven’t watched the show before, I used sound to communicate which nation each major character is from. The sounds of earth, air, water, and fire are all pretty distinct and recognizable, so I think it was successful in communicating those nations. Plus, I had a lot of fun creating the illustrations for the characters.