Kimberlyn Cho- Project 10- SonicSketch

I created a sound to represent the static on the TV. I then used mouseX and mouseY to control the frequency and volume of the sound respectively. To change the TV screen or the “channel”, I uploaded different images and sounds so that when the mouse leaves the TV to the left and right, the channels would change accordingly.

sketch

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project-10 */

/* directions:
move vertically = control the volume of the beep
move horizontally = control the frequency of the beep & change TV screens 
    - move to the left or right of the TV to change TV "channels" */

var screenW = 360
var screenH = 300
var rectW = 10
var rectH = 20
var angle = 0
var myImageURL = ["https://i.imgur.com/Q5CjhQu.jpg?2", "https://i.imgur.com/TFlpQiF.png?2"]
var imageA;
var imageB;
//original sound file names 
var mySndURL = ["rickandmorty.wav", "porter.wav"]
var sndA;
var sndB;
var sndAstart;
var sndBstart;

function preload() {
    //loading images and sounds and setting them as variables
    sndA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/rickandmorty.wav");
    sndB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/porter.wav")
    imageA = loadImage(myImageURL[0]);
    imageB = loadImage(myImageURL[1]);
}

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

function soundSetup() {
    //creating a beep to represent the screen with static
    osc = new p5.SinOsc();
    osc.freq(880.0);
    osc.amp(0.1);
    osc.start();
}

function draw() {
    //drawing background based on mouse location even beyond canvas size (so there will always be a background)
    background(256, mouseX, mouseY);
    rectMode(CENTER);
    //function to create TV features
    drawTVoptions();
    //function to control TV screens
    drawTVscreen();
}

function drawTVoptions() {
    //constraining TV to appear only if mouse is within canvas limits
    if (mouseX < width & mouseY < height) {

        //antenna
        stroke("pink");
        strokeWeight(5);
        line(320, 95, 370, 10);
        line(320, 95, 250, 5);
        strokeWeight(0);
        fill("white");
        ellipse(320, 95, 100, 50);

        //tv
        fill("pink");
        rect(320, 280, 500, 380, 50);
        fill("white");
        rect(290, 280, 380, 320, 30);

        //tv controls
        ellipse(525, 175, 50, 50);
        ellipse(525, 250, 50, 50);
        fill("pink"); 

        //rotating dials
        push();
        translate(525, 175);
        rotate(radians((angle + 20) + mouseX / 2));
        rect(0, 0, 40, 10);
        pop();
        push();
        translate(525, 250);
        rotate(radians(-angle + mouseX / 2));
        rect(0, 0, 40, 10);
        pop();

        //slider
        fill("white");
        rect(525, 360, 6, 136);
        var slider = map(mouseY, 0, height, 292, 428);
        slider = constrain(slider, 292, 428)
        rect(525, slider, 25, 25);
    }
}

function drawTVscreen() {
    //changing channel to rick and morty if mouse is to the left of the TV
    if (mouseX < width / 10 & mouseY < height) {
        image(imageA, 110, 130);
        if (sndAstart) {
            sndA.play(0, 1, 2)
        }
        sndAstart = false
    } else {
        sndA.stop()
        sndAstart = true
    }

    //static screen and sounds play if mouse is on TV
    if (mouseX > width / 10 & mouseX < 9 * width / 10 && mouseY < height) {
        //tv screen
        fill("black");
        rect(290, 280, screenW, screenH);
        
        //to imitate static
        var color = random(0, 255);
        //to constrain static heights within screen
        
        length = map(mouseY, 0, height, 292, 428);
        var length2 = constrain(length, 0, height);

        var staticH = height - length2;

        //static
        fill(200);
        translate(110, 130);
        fill(color, mouseX, color);
        rect(screenW * 0.02, screenH / 2, rectW, staticH * .3);
        rect(screenW * 0.06, screenH / 2, rectW, staticH * .8);   
        rect(screenW * 0.10, screenH / 2, rectW, staticH * .6);
        rect(screenW * 0.14, screenH / 2, rectW, staticH * .4);
        rect(screenW * 0.18, screenH / 2, rectW, staticH * .7);
        rect(screenW * 0.22, screenH / 2, rectW, staticH * .3);
        rect(screenW * 0.26, screenH / 2, rectW, staticH * .5);
        rect(screenW * 0.30, screenH / 2, rectW, staticH * .8);
        rect(screenW * 0.34, screenH / 2, rectW, staticH * .4);
        rect(screenW * 0.38, screenH / 2, rectW, staticH * .3);
        rect(screenW * 0.42, screenH / 2, rectW, staticH * .6);
        rect(screenW * 0.46, screenH / 2, rectW, staticH * .7);
        rect(screenW * 0.50, screenH / 2, rectW, staticH * .8);
        rect(screenW * 0.54, screenH / 2, rectW, staticH * .5);
        rect(screenW * 0.58, screenH / 2, rectW, staticH * .7);
        rect(screenW * 0.62, screenH / 2, rectW, staticH * .6);
        rect(screenW * 0.66, screenH / 2, rectW, staticH * .4);
        rect(screenW * 0.70, screenH / 2, rectW, staticH * .4);
        rect(screenW * 0.74, screenH / 2, rectW, staticH * .2);
        rect(screenW * 0.78, screenH / 2, rectW, staticH * .3);
        rect(screenW * 0.82, screenH / 2, rectW, staticH * .5);
        rect(screenW * 0.86, screenH / 2, rectW, staticH * .7);
        rect(screenW * 0.90, screenH / 2, rectW, staticH * .6);
        rect(screenW * 0.94, screenH / 2, rectW, staticH * .8);
        rect(screenW * 0.98, screenH / 2, rectW, staticH * .4);

        //controlling frequency with mouseX
        var newpitch = map(width - mouseX, 0, width, 800, 50)
        osc.freq(newpitch)

        //controlling volume with mouseY
        var newvolume = map(height - mouseY, 0, height, 0.1, 3)
        osc.amp(newvolume)
    } else {
        //muting beep if mouse goes beyond range
        osc.amp(0);
    }

    //changing channel to porter robinson if mouse is to the left of the TV
    if (mouseX > 9 * width / 10 & mouseX < width && mouseY < height) {
        image(imageB, 110, 130);
        if (sndBstart) {
            sndB.play(0, 1, 2);
        }
        sndBstart = false
    } else {
        sndB.stop()
        sndBstart = true
    }
}