Ankitha Vasudev – Project 10 – Interactive Sonic Sketch

sketch

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