Final Project

var picfiles = ["S0UUF6k.png", "QRebAPt.png", "kPzEtew.png", "GDfUrs9.png", 
"RdaK8Db.png", "rJua0RK.png", "OFcSHV3.png", "MOsS3A0.png", "gqBXY2d.png",
"O6M0opw.png", "dMPlHtH.png", "KQPXYro.png", "0k3Synd.png", "lXtNJ7L.png",
"046RWzZ.png", "gybarRF.png"];
var soundfiles = ["a.mp3", "b.mp3", "c.mp3", "d.mp3", "e.mp3", "f.mp3","g.mp3",
"h.mp3", "i.mp3", "j.mp3", "k.mp3", "l.mp3", "m.mp3", "n.mp3", "o.mp3", "p.mp3"]; //Will add more sound files later
var pics = [];
var sounds = [];
var channelobj = [];
var oldindex = -1;
var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p"];
var colors = [];
var titles = ["Australia fire", "BLM protest", "Chadwick Bosewman death", "Death of Chadwick Boseman", "Explosion in Beirut",
"Florida man saves his dog from an alligator", "Gas explosion in Nigeria", "Harvey Weinstein convicted",
"Impeachment trial of Trump", "Joe Biden wins", "Kobe Bryant death", "Locust swarm", "Murder hornets in US",
"NASA's Mars 2020", "Olympics postponed", "Presidential election"]
var relkey=-1;

function preload(){
    //sound files
    for (var i = 0; i < soundfiles.length; i++){
       sounds[i] = createAudio(concat ("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/", soundfiles[i])); //stop() doesn't work with loadSound
        //image files
       pics[i] = loadImage(concat ("https://i.imgur.com/", picfiles[i]));
    }
}

function makeChannel(letter, letterColor){ //Using object to combine letters and their color
    ch = {l: letter, lc: letterColor
         }
    return ch;
}

function setup(){
    createCanvas(500, 500);
    rectMode(CENTER);
    imageMode(CENTER);
    //Giving all letters the same gray color in the beginning
    for (var i = 0; i < letters.length; i++){
        channelobj[i] = makeChannel(letters[i], color(222, 217, 209));
    }
}

function draw(){
    background(240, 255, 254);
    TV();
    drawTitle(relkey);
    drawText(relkey);
}

function drawText(nSelect){
    if (nSelect > -1 & nSelect < letters.length){ //Making selected letter to turn black
        channelobj[nSelect].lc = color(0);
    }
    for (var i = 0; i < channelobj.length; i++){ //Giving characteristics and placement to the letters
        textFont('Baskerville')
        textAlign(CENTER);
        fill(channelobj[i].lc);
        textSize(25);
        text(channelobj[i].l, 20 * i + 100, 450);
    }
    if (nSelect > -1 & nSelect < letters.length){ //Making the letters to turn back to gray
        channelobj[nSelect].lc = color(222, 217, 209);
    }
}

function drawTitle(nSelect){
    noStroke();
    fill(240, 255, 254);
    rect(250, 60, 500, 120); //drawing rect to cover previous titles
    if (nSelect > -1 & nSelect < titles.length){
        textFont('Baskerville')
        textAlign(CENTER);
        fill(0);
        textSize(25);
        text(titles[nSelect], 250, 90);
    }
}

function keyPressed(){
    loop();
    relkey = keyCode - 65; //65 = 'a' keycode, found on p5js.org
    if (relkey > channelobj.length - 1 || relkey < 0){ //Checking the pressed key is in between a~p
        return; //returning any key that is not a~p
    }

    for(var i = 0; i < sounds.length; i++){ //Stopping the audio from previous channel (isPlaying found on p5js.org)
          sounds[i].stop(0);
    }
    sounds[relkey].play(); //Calling the correct audio
    started = true;
}

function TV(){
    //Drawing TV
    stroke(200);
    fill(168, 237, 170);
    rect(250, 270, 370, 270, 35);
    fill(209, 196, 186);
    circle(390, 200, 30);
    circle(390, 250, 30);
    for (var i = 300; i < 360; i += 10){
        rect(390, i, 20, 5);
    }
    fill(100);
       if (relkey > - 1 & relkey < channelobj.length ) {
     image(pics[relkey], 220, 270); //Calling the correct image
    } else {
    rect(220, 270, 260, 220);
    loading();
    for(var i = 0; i < sounds.length; i++){ //Stopping the audio from previous channel
          sounds[i].stop(0);
        }
    }
}

function loading(){ //drawing loading screen
    fill(255);
    push();
    translate(220, 270);
    for (var i = 0; i < 6; i++){
        push();
        rotate(radians(frameCount + 60 * i));
        ellipse(30, 0, 20, 10);
        pop();
    }
    pop();
}