/*
Hyejo Seo
Section A
hyejos@andrew.cmu.edu
Project 10 - Sonic Sketch
*/
var backgroundPic;
var rainSound;
var thunderSound;
var kettleSound;
var matchesSound;
function preload() {
// loading my background image
var backgroundURL = "https://i.imgur.com/pIas40A.jpg";
backgroundPic = loadImage(backgroundURL);
// loading the sound files
rainSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/rain.wav");
rainSound.setVolume(1);
thunderSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/thunder.wav");
thunderSound.setVolume(1);
kettleSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/kettle.wav");
kettleSound.setVolume(1);
matchesSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/matches.wav");
matchesSound.setVolume(1);
}
function setup() {
createCanvas(500, 400);
backgroundPic.resize(500, 400); // resizing my background picture to fit the canvas
// useSound();
}
function draw() {
image(backgroundPic, 0, 0);
noFill();
stroke(255, 248, 240);
strokeWeight(2);
// Thunder cloud area
rect(3, 4, 223, 130);
// Rain cloud area
rect(285, 18, 215, 110);
// Candles area
rect(5, 240, 220, 155);
// Tea area
rect(310, 295, 137, 95);
}
function mousePressed() {
// thunder sound conditional statement
if(mouseX > 3 & mouseX < 226 && mouseY < height / 2){
if(thunderSound.isLooping()){
thunderSound.pause();
} else {
thunderSound.loop();
}
}
// rain sound conditional statement
if(mouseX > 285 & mouseX < 500 && mouseY < height / 2){
if(rainSound.isLooping()){
rainSound.pause();
} else {
rainSound.loop();
}
}
// candle sound conditional statement
if(mouseX > 5 & mouseX < 225 && mouseY > height / 2){
if(matchesSound.isLooping()){
matchesSound.pause();
} else {
matchesSound.loop();
}
}
// kettle sound conditional statement
if(mouseX > 310 & mouseX < 447 && mouseY > height / 2){
if(kettleSound.isLooping()){
kettleSound.pause();
} else {
kettleSound.loop();
}
}
}
When I was brainstorming about what to do for this project, it happened to be pouring outside with thunder and lightening (yesterday). Hence, I decided to create this cozy night starter pack on rainy days. Since I created my background image on Illustrator, I had to define each icon by using rect() function. This was just for myself to write the conditional functions. Overall, I am happy with my work.