//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.