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
}
}
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2020/08/stop-banner.png)
