Author: Alex

Instructions:

To operate the television, click the power button and use the up and down buttons to cycle through the channels. Come back at a different time of the day to see what else is on! Make sure your webcam access is allowed as well.

Turn on the TV!

var power = false; // power starts off

var h; // hour

var gCLickCount; // track mouse clicks
var channelIsCurrently = 0; // what index of the array is at
var channel = []; // array to store current videos

var myCaptureDevice; // laptop camera

var chanDistUp; // distance to channel up
var chanDistDown; // distance to channel down
var powDist; // distance to power button

var videos;

var buttonsPositionX = 485;

var powerbutton = {x: buttonsPositionX, y: 230, d: 60, render:drawPowerButton, 
                   strokecol:'burlywood', col:'lightyellow', 
                   labelcol:'burlywood'};
var channelUp = {x: buttonsPositionX, y:390 , w:60 , h:60 , render:drawChannelUp, 
                strokecol:'burlywood', col:'lightyellow'};
var channelDown = {x: buttonsPositionX, y:450 , w:60 , h:60 , render:drawChannelDown, 
                   strokecol:'burlywood', col:'lightyellow'};
                   
function setup() {
    createCanvas(550, 600);


    frameRate(30);
    myCaptureDevice = createCapture(VIDEO);
    myCaptureDevice.size(350, 308); // attempt to size the camera. 
    myCaptureDevice.hide(); // this hides unnecessary extra view.

    h = hour(); // what time is it?

    //load videos, assign each video a variable
    var mVid1 = createVideo('https://i.imgur.com/6OBMn2v.mp4');
    var mVid2 = createVideo('https://i.imgur.com/X73HsOP.mp4');
    var mVid3 = createVideo('https://i.imgur.com/AHmztFm.mp4');
    var aVid1 = createVideo('https://i.imgur.com/wNWUrAi.mp4');
    var aVid2 = createVideo('https://i.imgur.com/5nEKwzC.mp4');
    var aVid3 = createVideo('https://i.imgur.com/FbpKnv0.mp4');
    var eVid1 = createVideo('https://i.imgur.com/ziaEsYx.mp4');
    var eVid2 = createVideo('https://i.imgur.com/4kGyLnf.mp4');
    var eVid3 = createVideo('https://i.imgur.com/arD9T0D.mp4');
    var nVid1 = createVideo('https://i.imgur.com/5IfBxXm.mp4');
    var nVid2 = createVideo('https://i.imgur.com/ziyI0g4.mp4');
    var nVid3 = createVideo('https://i.imgur.com/fPyKK17.mp4');

    videos = [mVid1, mVid2, mVid3, aVid1, aVid2, aVid3, eVid1, 
              eVid2, eVid3, nVid1, nVid2, nVid3]; // array of video variables

    for (var i = 0; i < videos.length; i++){
        videos[i].hide(); //hide off canvas videos
        videos[i].loop(); // play videos on loop
    }
    // Which videos are on the different channels
    // if the hour is before 6 am
    if(h <= 6){ 
        channel = [mVid1, mVid2, mVid3];
    // if hour is between 6am and 12 pm
    }else if (h > 6 & h <= 12){ 
        channel = [aVid1,aVid2, aVid3];
    // if hour is between 12apm and 6pm
    }else if(h > 12 & h <= 18){
        channel = [eVid1, eVid2, eVid3];
    // if hour is after 6pm
    }else{
        channel = [nVid1,nVid2, nVid3];
    } 

}

function draw() {
     scale(0.8, 0.8)
    // distance between mouse click and the different buttons
    chanDistUp = dist(mouseX, mouseY, channelUp.x * 0.8, channelUp.y * 0.8); 
    chanDistDown = dist(mouseX, mouseY, channelDown.x * 0.8, channelDown.y * 0.8);
    powDist = dist(mouseX, mouseY, powerbutton.x * 0.8, powerbutton.y *0.8);

    television(0, 40);

    // if the tv is on, show the video on the current channel
    if(power === true){
        image(channel[channelIsCurrently % channel.length], 
            buttonsPositionX - 444, 192, buttonsPositionX - 138, 305);
    }

    //if tv is off, you see your reflection on the screen
    if(power === false){
        myCaptureDevice.loadPixels(); // this must be done on each frame.
        push();
        tint(100, 50); // Display at half opacity
        image(myCaptureDevice, buttonsPositionX - 440, 190); // draw the camera
        pop();
    } 

    //random tv noise, higher mouseY and mouseX is more noise
    if(power === true){
        for (var i = 0; i < mouseY + mouseX * 2; i++) {
            var r = random(0, 255);
            var g = random(0, 255);
            var b = random(0, 255);
            stroke(r, g, b);
            point(random(buttonsPositionX - 445, 388), 
                random(buttonsPositionX - 298, 497));
        }
    }
}

function mousePressed(){

    //click the channel up/down buttons when the power is on, 
    //the video will change
    if(chanDistUp < channelUp.w / 2 & power === true) {
        channelIsCurrently += 1;
    }
    if(chanDistDown < channelDown.w / 2 & power === true){
        channelIsCurrently -= 1;
        if(channelIsCurrently < 0){ // channels cycle, never goes above 2
            channelIsCurrently = 2;
        }
    }

    // if you click the power button, the tv will turn on
    if(powDist < 30 & power === false){
        power = true;
    } else if (powDist < 30) {
        power = false;
    }
}

function drawPowerButton() {
    ellipseMode(CENTER);
    strokeWeight(10);
    stroke(powerbutton.strokecol);
    fill(powerbutton.col);
    ellipse(powerbutton.x, powerbutton.y, powerbutton.d, powerbutton.d);
   
    // power symbol
    strokeWeight(3);

    // hovering over the symbol changes its color
    if(powDist < 30){
        stroke(150);
    }else{
        stroke(powerbutton.labelcol);
    }

    // power symbol
    noFill();
    arc(buttonsPositionX, 232, 25, 25, PI + 2.5, PI + 7);
    line(buttonsPositionX, 220, buttonsPositionX, 232);
}

function drawChannelUp() {
    rectMode(CENTER);
    strokeWeight(10);
    stroke(channelUp.strokecol);
    fill(channelUp.col);
    rect(channelUp.x, channelUp.y, channelUp.w, channelUp.h, 5, 5);
    strokeWeight(0);
    // hovering over the symbol changes its color
    if(chanDistUp < 30){
        fill(150);
    }else{
        fill(channelUp.strokecol)
    }
    textAlign(CENTER);
    textSize(40);
    text('+', channelUp.x, channelUp.y + 10);
}

function drawChannelDown(){
    rectMode(CENTER);
    strokeWeight(10);
    stroke(channelDown.strokecol);
    fill(channelDown.col);
    rect(channelDown.x, channelDown.y, channelDown.w, channelDown.h, 
        5, 5);
    strokeWeight(0);
    // hovering over the symbol changes its color
    if(chanDistDown < 30){
        fill(150);
    }else{
        fill(channelDown.strokecol);
    }
    textAlign(CENTER);
    textSize(40);
    text('-', channelDown.x, channelDown.y + 10);
}

function television(x, y){
    rectMode(CORNER);

    //tv body
    stroke(63, 44, 35);
    strokeWeight(5);
    fill(63,44,35); 
    rect(0, y + 65, width, y + 440, 30, 30); 

    //tv body
    fill('lightyellow');
    rect(x + 10, y + 80, x + 425, y + 410, 10, 10); 

    // screen
    fill(131, 123, 105);
    stroke(63, 44, 35);
    rect(x + 40, 190, 350, 308); 

    // place for tv knobs
    fill(101,69,56);
    strokeWeight(15);
    rect(x + 425, y + 85, x + 115, y + 400); 
    strokeWeight(10);
    stroke(63, 44, 35);
    line(x + 320, 5, x + 390, 105);
    line(x + 420, 5, x + 400, 105);

    drawPowerButton(); // power button
    drawChannelUp(); // channel up
    drawChannelDown(); // channel down 
}

Statement:

For my final project, I wanted to create a television that had different “programs” on at different times of the day. I was able to create this with a set of 12 different videos, three each for four different times of day (12am-6am, 6am-12pm, 12pm-6pm, 6pm-12am). I also had the buttons on the tv be mouse responsive: when hovering over the buttons they change a different color. As stated in my proposal, I was able to add a webcam component for when the tv is ‘off’ as if you were reflected in the screen like a glass tv. I added some noise on top of the videos controlled by mouse x and mouse y positions.

I feel like this project solidified a lot of the concepts we have learned throughout this semester. I definitely have a better grasp on how I can use p5.js in the future on my own projects as well as the core concepts behind computer programming.