![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2020/08/stop-banner.png)
// Ankitha Vasudev
// Section B
// ankithav@andrew.cmu.edu
// Project 10 - Sonic Sketch
//global variables
var rx = 80; //x position of stereo
var ry = 150; //y position of stereo
var stereoImg; //stereo image
var radiosong; //slow song
var catchysong; //fast song
var static; //static/interference sound
var phonering; //phone ring sound
var switcheffect; //play/pause switch sound effect
var Amp = 0;
// preloading sounds and image
function preload() {
// stereo image
var ImageURL = "https://i.imgur.com/MX0qMoE.jpg"
stereoImg = loadImage(ImageURL);
// Loading five sounds
radiosong = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/basic.wav");
catchysong = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/bg.mp3");
static = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/interference.wav");
phonering = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/ringing.wav");
switcheffect = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/switch.wav");
}
function setup() {
createCanvas(450, 450);
background(0);
}
function soundSetup() {
//volume for individual sounds
radiosong.setVolume(1);
catchysong.setVolume(0.5);
static.setVolume(0.5);
phonering.setVolume(0.4);
switcheffect.setVolume(0.6);
}
function draw() {
noStroke();
// grey background behind stereo
fill(220);
rect(0, 0, width, 300);
// brown table
fill(130, 80, 50);
rect(0, ry+150, width, 200);
// phone on table
push();
translate(75, 410);
rotate(5);
fill(80);
rect(0, 0, 50, 90);
fill(240);
rect(5, 5, 40, 80);
fill(30);
rect(5, 10, 40, 70);
pop();
// antennae behind stereo
fill(75);
rect(350, 40, 5, 150);
// stereo img
image(stereoImg, rx, ry);
// pause button
fill(200, 60, 60);
rect(width/2+10, 200, 15, 20);
stroke(30);
strokeWeight(2);
line(width/2+16, 205, width/2+16, 215);
line(width/2+20, 205, width/2+20, 215);
// play button
noStroke();
fill(200, 60, 60);
rect(width/2-10, 200, 15, 20);
fill(50);
triangle(width/2-7, 205, width/2-7, 215, width/2+2, 210);
}
function mousePressed() {
//Play music when play button is pressed - switch between two songs
if (mouseX>=(width/2)-10 & mouseX<=(width/2)+5 & mouseY<=220 & mouseY>=200) {
if (radiosong.isLooping()) {
catchysong.loop();
radiosong.pause();
} else {
switcheffect.play();
radiosong.loop();
catchysong.pause();
}
}
//Click on pause switch to stop music
if (mouseX>=width/2+10 & mouseX<=width/2+25 & mouseY<=220 & mouseY>=200) {
if (catchysong.isLooping || radiosong.isLooping) {
switcheffect.play();
catchysong.pause();
radiosong.pause();
}
}
//Play static when antennae is clicked on
if (mouseX>=350 & mouseX<=355 & mouseY<=190 && mouseY>=40) {
if (static.isLooping()) {
static.pause();
} else {
catchysong.pause();
radiosong.pause();
static.loop();
}
} else {
static.pause();
}
//Play phone ring when phone is clicked on
if (mouseX>100 & mouseX<160 & mouseY>375 && mouseY<440) {
if (phonering.isLooping()) {
phonering.pause();
} else {
catchysong.pause();
radiosong.pause();
static.pause();
phonering.loop();
}
}
}This project was tricky but fun to create. I decided to create a stereo with different sound effects that can play multiple songs when clicked on. Overall, there are five sounds in this project.
When the play button is pressed a song is played and can be changed to the next song by clicking the button again. The pause button stops the music. I added a clicking sound effect every time one of the buttons are pressed to make it more realistic.When the antennae is clicked a static noise plays and can be stopped by clicking anywhere else on the canvas. When the phone is clicked on, a ringing noises plays and can be stopped by re-clicking on the phone.
