Julia Nishizaki – Project 10 – Sonic Sketch

sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 10

var night; //nighttime sounds
var daytime; //daytime sounds
var field; //sound of fields
var river; //river sounds

function preload() {
    // loads four sounds
    field = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/field.wav");
    night = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/night.wav");
    daytime = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/day.wav");
    river = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/river.wav");
}

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

function soundSetup() { // setup for audio generation
    field.setVolume(0.1); //sets Volume for all four sounds at a quarter the volume
    night.setVolume(0.1);
    daytime.setVolume(0.1);
    river.setVolume(0.1);
}

function draw() {
    background(200);

    noStroke();
    colorMode(HSB, 100); //switches color mode to HSB, easier to manipulate with mouse
    var constMouseX = constrain(mouseX, 0, width); //constrains X direction of mouse within canvas
    var constMouseY = constrain(mouseY, 0, height); //constrains Y direction of mouse within canvas

    //variables for the different colors
    var skyColor = color(55, 55, map(constMouseX, 0, width, 25, 100)); //sky changes color w/ mouse position between light and dark blue
    var mountainColor = color(25, 55, map(constMouseX, 0, width, 0, 85)); //mountains change color w/ mouse between light and dark green
    var desertColor = color(map(constMouseY, 0, height, 10, 25), 67, 75); //field or desert changes color w/ mouse between brown and green
    var riverColor = color(48, 70, map(constMouseY, height, 0, 50, 100)); //river changes color w/ mouse slightly from light to dark blue
    
    //sky
    createSky(skyColor);
    //background mountains
    createMountains(mountainColor);
    //desert or field
    createDesert(desertColor);
    //river
    createRiver(riverColor);
    
}
function mousePressed() {
    if (mouseX < (width / 2)) {
        night.play(0, 1, 2); //plays nighttime sounds
    } else {
        night.pause();
    }
    if (mouseX > (width / 2)) {
        daytime.play(0, 1, 2); //plays daytime sounds
    } else {
        daytime.pause();
    }
    if (mouseY < (height / 2)) {
        field.play(0, 1, 2); //plays field sounds
    } else {
        field.pause();
    }
    if (mouseY > (height / 2)) {
        river.play(0, 1, 2); //plays river sounds
    } else {
        river.pause();
    }
}

function createSky(fillColor) { //function creates the sky
    fill(fillColor);
    rect(0, 0, width, height);
}
function createMountains(fillColor) { //function creates background hills
    var mountainY = height * 2 / 3;
    fill(fillColor);
    ellipse(width / 5, mountainY, width / 2, height / 2);
    ellipse(width * 2 / 3, mountainY, width * 3 / 4, height * 4 / 5);
}
function createDesert(fillColor) { //function creates desert/field
    var desertY = height * 5 / 8;
    fill(fillColor);
    rect(0, desertY, width, desertY);
}
function createRiver(fillColor) { //function creates river
    var riverY = height * 7 / 8;
    fill(fillColor);
    var constRivMouseY = constrain(mouseY, height / 2, height); //river only starts to appear when the mouse is below the halfway mark
    rect(0, map(constRivMouseY, height, height / 2, riverY, height), width, riverY);
}

For this project, I wanted to create a landscape that responded to the position of your mouse both visually and through sound. When you click your mouse, depending on the mouse’s position, different sounds will play. The four sounds I chose were chirping birds to represent the daytime, insects to represent the night, wind blowing through grass for the field/desert, and water flowing for the river.