Category: SectionD

//keep track of number of runs
var count = 0;
//used for locating each item of clothing
var item;
//array for textbox, textbox is t
var t = [];
var textInfo = [
    'COTTON T-SHIRT:\n2,700 litres of water\n15kg of CO2\n200+ years to\ndecompose', 
    'JEANS:\n7000 litres of water\n33kg of CO2\n50 years to decompose',
    'SNEAKERS:\n8500 litres of water\n10kg of CO2\n40 years to decompose'
];
var textY = [30, 165, 355];
var textColor = ["lavender", "DarkSlateBlue"];

function preload(){
    rack = loadImage('https://i.imgur.com/YpMqJ3Z.png');
    shirt = loadImage('https://i.imgur.com/54EAgyC.png');
    jeans = loadImage('https://i.imgur.com/qzkFSXI.png');
    shoes = loadImage('https://i.imgur.com/D7paBLS.png');
    bag = loadImage('https://i.imgur.com/Xyv6IGe.png');
    water = loadImage('https://i.imgur.com/3ONgfhP.png');
    co2 = loadImage('https://i.imgur.com/me0Lg0A.png');
    clock = loadImage('https://i.imgur.com/gw7QVpQ.png');
}



//draw water
function drawWater() {
    image(water, this.x, this.y, 20, 20);
}

//draw co2
function drawCarbon(cx, cy) {
    image(co2, this.x, this.y, 20, 20);
}

//draw clock
function drawClock(clx, cly) {
    image(clock, this.x, this.y, 20, 20);
}

//create new water bucket object with position
function makeWater(wx, wy) {
    w = {x: wx, y: wy, 
         drawFunction: drawWater
        }
    return w;
}

//create new co2 object with position
function makeCarbon(cx, cy) {
    c = {x: cx, y: cy, 
         drawFunction: drawCarbon
        }
    return c;
}

//create new clock object with position
function makeClock(clx, cly) {
    cl = {x: clx, y: cly, 
         drawFunction: drawClock
        }
    return cl;
}

//arrays to store new symbol
var waters = [];
var carbons = [];
var clocks = [];
    
function setup() {
    createCanvas(400, 500);
    background("lightsteelblue");
    //set up the base rack
    image(rack, 200, 0, 200, 500);
    imageMode(CENTER);
    image(shirt, 300, 80, 120, 100);
    image(jeans, 300, 250, 80, 150);
    image(shoes, 300, 450, 100, 60);
    //create array of objects of the three info textboxes
    for (var i = 0; i < 3; i ++) {
        t[i] = new Object();
        t[i].info = textInfo[i];
        t[i].x = 170;
        t[i].y = textY[i];
        t[i].w = 110;
        t[i].h = 70;
        t[i].size = 10;
        t[i].c = textColor[i];
        t[i].font = 'verdana';
        t[i].stroke = "thistle"
        t[i].sWeight = 5;
    }

    //make a water bucket
    for (var i = 0; i < 20; i ++) {
        var w = makeWater(random(100), random(20, 100));
        waters.push(w);
    }
    //make a co2
    for (var i = 0; i < 20; i ++) {
        var w = makeCarbon(random(100), random(100, 200));
        carbons.push(c);
    }    
    //make a clock
    for (var i = 0; i < 20; i ++) {
        var cl = makeClock(random(50), random(200, 300));
        clocks.push(cl);
    }    
}


function draw() {
    //instruction
    textSize(20);
    fill("white");
    textFont(t[0].font);
    text('click to shop, hover to see price!', 20, 18);
    //draw textbox 
    if(mouseX >= 200 & mouseX <= 400) {
        if(mouseY >= 3 && mouseY <= 120) {
                stroke(t[0].stroke);
                strokeWeight(t[0].sWeight);
                fill(t[0].c);
                rect(t[0].x-5, t[0].y-5, t[0].w+10, t[0].h+10);
                noStroke();
                textSize(t[0].size);
                fill(t[1].c);
                text(t[0].info, t[0].x, t[0].y, t[0].w, t[0].h);
                item = 1;

        }
        else if(mouseY >= 150 & mouseY <= 300) {
            stroke(t[0].stroke);
            strokeWeight(t[0].sWeight);
            fill(t[0].c);
            rect(t[1].x-5, t[1].y-5, t[1].w+10, t[1].h+10);
            noStroke();
            textSize(t[0].size);
            fill(t[1].c);
            text(t[1].info, t[1].x, t[1].y, t[0].w, t[0].h);
            item = 2;

        }
        else if(mouseY >= 330 & mouseY <= 480) {
            stroke(t[0].stroke);
            strokeWeight(t[0].sWeight);
            fill(t[0].c);
            rect(t[2].x-5, t[2].y-5, t[2].w+10, t[2].h+10);
            noStroke();
            textSize(t[0].size);
            fill(t[1].c);
            text(t[2].info, t[2].x, t[2].y, t[2].w, t[2].h);
            item = 3;
        }
    }
    //place shopping bag
    shoppingBag();

    //place key
    drawKey(0, 400);

    //if 50 buckets of water used, display end page
    if(count >= 50) {
        endPage();
    }  
}
function mousePressed() {

    //when clicked into each area, item goes to shopping bag
    if(item == 1) {
        buyShirt(120, 450);

        //3 water buckets
        push();
        for (var i = 0; i < 3; i ++) {
            var w = waters[i];
            w.drawFunction();
            translate(random(10, 15), random(10, 15));  
        }
        pop();

        //3 co2
        push();
        for (var i = 0; i < 3; i ++) {
            var c = carbons[i];
            c.drawFunction();
            translate(random(10, 15), random(10, 15));  
        }
        pop();

        //20 clocks
        push();
        for (var i = 0; i < 20; i ++) {
            var cl = clocks[i];
            cl.drawFunction();
            translate(random(5, 10), random(5, 10));  
        }
        pop();      
        //add 3 to overall count
        count += 3;
    } 
    else if(item == 2) {
        buyJeans(120, 470);

        //7 water buckets
        push();
        for (var i = 0; i < 7; i ++) {
            var w = waters[i];
            w.drawFunction();
            translate(random(10, 15), random(10, 15));
        }
        pop();
        //6 co2
        push();
        for (var i = 0; i < 6; i ++) {
            var c = carbons[i];
            c.drawFunction();
            translate(random(10, 15), random(10, 15));  
        }
        pop();

        //5 clocks
        push();
        for (var i = 0; i < 5; i ++) {
            var cl = clocks[i];
            cl.drawFunction();
            translate(random(5, 10), random(5, 10));  
        }
        pop();   
        //add 7 to overall count
        count += 7;
    }
    else {
        buyShoes(120, 450);

        //8 water buckets
        push();
        for (var i = 0; i < 8; i ++) {
            var w = waters[i];
            w.drawFunction();
            translate(random(10, 15), random(10, 15));
        }
        pop();

        //2 co2
        push();
        for (var i = 0; i < 2; i ++) {
            var c = carbons[i];
            c.drawFunction();
            translate(random(10, 15), random(10, 15));  
        }
        pop();

        //4 clocks
        push();
        for (var i = 0; i < 4; i ++) {
            var cl = clocks[i];
            cl.drawFunction();
            translate(random(5, 10), random(5, 10));  
        }
        pop();  
        //add 8 to overall count
        count += 8;
    }

}

function shoppingBag() {
    image(bag, 120, 470, 170, 170);
    fill("white");
    textSize(20);
    text('your bag', 75, 480);
}

function drawKey(x, y) {
    //key box
    stroke("thistle");
    strokeWeight(5);
    fill("lavender");
    rect(x, y, 70, 80);
    //symbols
    image(water, x+15, y+20, 20, 20);
    image(co2, x+15, y+45, 20, 20);
    image(clock, x+15, y+65, 20, 20);
    //text 
    textSize(7);
    fill("black");
    noStroke();
    text('1000L water\n\n5kg co2\n\n10 years', x+30, y+15, 40, 80);
    stroke("thistle");
}


//clothing item goes into shopping bag
function buyShirt(x, y) {
    push();
    rotate(radians(random(-2, 2)));
    image(shirt, x, y, 120, 100);
    pop();
    }

function buyJeans(x, y) {
    push();
    rotate(radians(random(-2, 2)));
    image(jeans, x, y, 80, 150);
    pop();
}

function buyShoes(x, y) {
    push();
    rotate(radians(random(-2, 2)));
    image(shoes, x, y, 100, 60);
    pop();
}

function endPage() {
        background("steelblue");
        fill("lavender");
        noStroke();
        textSize(30);
        text('Sorry,\nYou have used up \n50 years worth of \ndrinking water.\n\nRefresh to shop again',
            50, 100)
    
}

/*
 * Eric Zhao
 * ezhao2
 * 15-104D
 * Final Project: Pandemic Simulation
 */

var p;
var noiseStep = 0.005;
var noiseParam = 0;
var particles = []; //all particles
var numParticles = 50;
var infectedList = []; //all the particles that are infected
var generation = 0; //what "round" of infection the dots are on
var colorList = []; //list of colors to mark the generation of infection
var paused = false; //is the program paused?
var numCols = 8; //number of dots per row (color picker)
var menuMode = 0; //shows controls or visualizations
var masksOn = false; //are the particles wearing masks
var filterCol = 0; //color 
var filterState = false; //is the program filtering dots?
var masksOn = false; //are the dots wearing masks?
var sketchState = 0; //affects if title screen is displayed


function setup() {
    //makes array of particles and infects the first one
    createCanvas(400, 600);
    background(100);
    colorMode(HSB);
    for(var i = 0; i < numParticles; i++){
        p = makeParticle(random(0, width), random(0, height), 3, 3,
            random(0, 100), i);
        particles.push(p);
    }
    var startColor = color(0, 100, 100);
    colorList.push(startColor);

    particles[0].infectedBy = 0;
    particles[0].size = 25;
    particles[0].infectColor = colorList[0];
    infectedList.push(particles[0]);

}

function draw(){
    stroke(100);
    background(50, 20, 20);
    fill(100);
    for(var i = 0; i < numParticles; i++){
        if(particles[i].infectedBy != -1){
            drawConnections(particles[i]);
        } 
    }
    for(var i = 0; i < numParticles; i++){
        particles[i].draw();
        if(paused == false){
            particles[i].step();
        }
    }
    if(paused == false){
        noiseParam+=noiseStep;
    }
    drawUI();
}


function makeParticle(px, py, dpx, dpy, noiseOffset, index){
    p = {x: px, y: py, dx: dpx, dy: dpy,
         infectedBy: -1, //if infected, which dot infected it?
         ID: index, //the dot's position in the original array
         infectColor: color(0, 0, 100), //color of the dot
         size: 10, //size of the dot
         offset: noiseOffset,
         step: stepParticle,
         draw: drawParticle};
    return p;
}

function stepParticle(){
    //moves particle based on Perlin noise

    this.x = width * map(noise(noiseParam + this.offset), 0, 1, -0.4, 1.4);
    this.y = width * map(noise(noiseParam + this.offset + 5), 0, 1, -0.4, 1.4);
}

function drawParticle(){
    fill(255);
    push();
    noStroke();
    if(this.infectedBy > -1){
            fill(this.infectColor); 
    }
    //show dot only if not filtering or if it matches filter color
    if(filterState == true){
        var tempCLR = getRGB(this.infectColor);
        if(compareColors(tempCLR, filterCol) == false){
            noFill();
        }
    }
    circle(this.x, this.y, this.size);
    pop();
}

function drawConnections(infectedP){
    //draws a line between a dot and its infector
    push();
    var ind = infectedP.infectedBy;
    if(infectedP.infectedBy > -1){
        var tempCLR = particles[ind].infectColor;
        strokeWeight(1);
        stroke(tempCLR);
    }
    //show line only if it matches the filter color
    if(filterState == true){
        var infectedRGB = getRGB(tempCLR);
        if(compareColors(tempCLR, filterCol) == false){
            noStroke();
        }
    }
    line(infectedP.x, infectedP.y, particles[ind].x, particles[ind].y);   
    pop();
}

function infection(population, infected){
    //make empty array, push newly infected particles here

    //if particles were infected, generate a new fill color
    //for them

    //adjust size of infected particles
    var base = infected.length;
    var newCases = [];
    print("Previous number: "+infected.length);

    //the basic logic: for all infected particles, check
    //if any non-infected particles are nearby. If so,
    //infect the particle and push it to an empty array.
    //add this array to the whole list of infected particles
    //at the end.
    for(var i = 0; i < infected.length; i++){
        for(var j = 0; j < numParticles; j++){
            if(dist(population[j].x, population[j].y,
            infected[i].x, infected[i].y) < 25
            & population[j].infectedBy == -1){
                if(masksOn == true){
                    if(random(0,1) > 0.66){
                        population[j].infectedBy = infected[i].ID;
                        newCases.push(population[j]);
                    }
                } else {
                    population[j].infectedBy = infected[i].ID;
                    newCases.push(population[j]);
                }
            }
        }
    }

    if(newCases.length > 0) {
        for(var i = 0; i < newCases.length; i++){
            infected.push(newCases[i]);
        }
        generation++;
        var newC = color(random(360), random(25, 100), 100);
        colorList.push(newC);
        print(infected.length);
        print(colorList.length);
        for(i = 0; i < (infected.length-base); i++){
            //makes particle size 90 percent of the one it was infected by
            infected[base+i].size =
                0.9*(particles[infected[base+i].infectedBy].size);
            //changes color to a new random fill (per generation)
            infected[base+i].infectColor = colorList[generation]; //
        }
    }
    print("Number infected: " + infected.length);
    print("Generation: "+ generation);
    print(colorList.length);
    print("__________h_______");
}

function mousePressed(){
    if(sketchState == 0){
        sketchState = 1;
    } else {
        if(mouseY < width){
            infection(particles, infectedList);
        } else if(mouseY >= width & mouseY <= height){
            filterStatus(get(mouseX, mouseY));
        }
    }
}

function keyTyped(){
    if(key === 'p'){
        //pause function that freezes movement but allows infection
        pauseMove();
    }
    if(key === 'r'){
    //Resets dot states but not entire sketch
        resetSketch();
    }
    if(key === 'h'){
    //switches menu between guide and data visualization
        if(menuMode == 0){
        menuMode = 1;
        print('data');
        } else {
            menuMode = 0;
            print('help');
        }
    }
    if(key === 'm'){
    //toggles masks on/off
        if (masksOn){
            masksOn = false;
        } else{
            masksOn = true;
        }
    }
}

function titleScreen(){
    push();
        translate(25, 75);
        stroke(100);
        fill(50, 5, 100, 0.9);
        textSize(14);
        var rectW = width - 50;
        var rectH = 0.48*height;
        var backgroundTxt = "This is a simple simulation of a viral outbreak \
such as COVID-19 modeled with a number of colored dots.";
        var inst_1 = "1) Each time you click, all infected (colored) dots \
        will infect those nearby."
        var inst_2 = "2) Connections between the infector and newly infected \
            dot are shown."
        var inst_3 = "3) Make the dots wear masks by pressing [ W ]."
        var inst_4 = "4) Filter infected dots by pressing [ H ]."
        var inst_5 = "5) Reset all dots with [ R ]."
        var inst_6 = "(click anywhere to hide)"

        rect(0, 0, rectW, rectH, 10);
        fill(0);
        textSize(18);
        textStyle(BOLD);
        text("Visualizing a Pandemic", 20, 30);
        textSize(14);
        text("How to Use:", 20, 105);
        textSize(12);
        textStyle(NORMAL);
        text(backgroundTxt, 20, 50, 300, 150);
        text(inst_1, 20, 120, 300, 150);
        text(inst_2, 20, 160, 300, 150);
        text(inst_3, 20, 200, 300, 150);
        text(inst_4, 20, 225, 300, 150);
        text(inst_5, 20, 260);
        text(inst_6, 215, 28);
        stroke(0);
        line(20, 40, rectW-20, 40);
    pop();
}

function drawUI(){
    push();
        if(sketchState == 0)
            titleScreen();
        translate(25, width);
        fill(50, 20, 25, 0.75);
        textSize(14);
        var rectW = width - 50;
        var rectH = (height-width)-25;
        rect(0, 0, rectW, rectH, 10);
        noStroke();
        fill(100);
        textSize(14);
        textStyle(BOLD);

        if(masksOn){
            fill(120, 72, 90);
            text("Masks ON", 275, -10);
        } else{
            fill(0, 72, 90);
            text("Masks OFF", 275, -10);
        }

        fill(100);
        if(menuMode == 0){
            displayHelp();
        } else{
            displayData();
        }
    pop();
    push();
    if(paused){
        rect(width-50, 25, 8, 25);
        rect(width-34, 25, 8, 25);
    } else {
        triangle(width-50, 25, width-50, 50, width-25, 37.5);
    }
}

function displayHelp(){
        textSize(14);
        textStyle(BOLD);
        text("Guide", 20, 30);
        textStyle(NORMAL);
        textSize(12);
        text("( Press [ H ] to switch to filters )", 65, 30);
        text("[ P ] : Freeze / Unfreeze dots", 20, 100);
        text("[ R ] : Disinfect all dots (except Patient Zero)", 20, 80);
        text("[ CLICK ] to infect nearby dots", 20, 60);
        text("[ M ] : Toggle masks ON / OFF", 20, 120);
        text("[ H ] : Show / Hide controls", 20, 140);
        stroke(100);
}

function displayData(){
        noStroke();
        fill(100);
        textSize(14);
        textStyle(BOLD);
        text("Filter Data", 20, 30);
        textStyle(NORMAL);
        textSize(12);
        if(filterState){
            text("( CLICK away from squares to show all )", 90, 30);
        } else{
            text("( CLICK to isolate )", 90, 30);
        }
        drawPalette();
}

function resetSketch(){
    //code modified from setup();
    for(var i = 0; i < numParticles; i++){
            particles[i].infectedBy = -1;
            particles[i].infectColor = color(0, 0, 100);
            particles[i].size = 10;
    }
    //wipes all modifier arrays
    filterState = false;
    generation = 0;  
    infectedList = [];
    colorList = [];
    var startColor = color(0, 100, 100);
    colorList.push(startColor);

    //reinfects first dot
    particles[0].infectedBy = 0;
    particles[0].size = 25;
    particles[0].infectColor = colorList[0];
    infectedList.push(particles[0]);
}

function pauseMove(){
    if(paused === true){
        paused = false;
        print('resumed');
    } else {
        paused = true;
        print('paused');
    }
}

function drawPalette() {
    //on visualization UI, draw color palette to filter dots
    translate(20, 50);
    var count = 0;
    numRows = ceil(colorList.length / numCols);
    for(var i = 0; i < numRows; i++) {
        for(var j = 0; j < numCols; j++) {
            if(count < colorList.length) {
                fill(colorList[(i * 6) + j]);
                drawColor(40 * (j), 40*i, 30);
                count++;
            }
        }
    }
}

function drawColor(x, y, rSize) {
    rect(x, y, rSize, rSize, 0.125*rSize);
}

function filterStatus(currentColor){
    //reads color of cursor location, enables filtering
    //if the mouse is over a colored square
    if(menuMode != 0){
        for(var i = 0; i < colorList.length; i++){
            print("Infected Color "+i);
            var infectRGB = getRGB(colorList[i]);
            var cursorRGB = getRGB(currentColor);
            print("infected color: " + infectRGB);
            print("cursor color: " + cursorRGB);

            if(compareColors(infectRGB, cursorRGB) == true){
                filterCol = cursorRGB;
                filterState = true;
                return;
            }
        }
    }
    filterState = false;
}

function getRGB(inputColor){
    //converts a color into RGB
    push();
    sampledColor = inputColor;
    colorMode(RGB, 255, 255, 255, 1);
    var r = red(sampledColor);
    var g = green(sampledColor);
    var b = blue(sampledColor);
    sampledColor = color(r, g, b);
    pop();
    return sampledColor;
}

function compareColors(color1, color2){
    //approximates two colors and checks if they are identical
    var r1 = round(red(color1));
    var g1 = round(green(color1));
    var b1 = round(blue(color1));
    var r2 = round(red(color2));
    var g2 = round(green(color2));
    var b2 = round(blue(color2));

    if(r1 == r2 & g1 == g2 && b1 == b2){
        return true;
    }

    return false;

}

//Jessie Chen
//D
//Final Project
//Self Care Roulette

//global variables
var title;
var activities = [];
//homepage
var home = true;
//boolean for all categories are not selected
var rel = false;
var soc = false;
var phy = false;
var lng = false;
var qck = false;
//buttons
var play;
var homeButton;
var refresh;
var next;
//cateogies
var relax;
var quick; 
var long;
var social;
var physical;

//load illustration

function preload() {
    //
    title = loadImage("https://i.imgur.com/Q6l9wlM.png");
    play = loadImage("https://i.imgur.com/U4YlZmG.png");


    var activitiesPage = [];
    //long
    activitiesPage[0] = "https://i.imgur.com/sNZV5FH.png"; //sewing
    activitiesPage[1] = "https://i.imgur.com/82QiPiY.png"; //read
    activitiesPage[2] = "https://i.imgur.com/Xld0YcB.png"; //instrument
    activitiesPage[3] = "https://i.imgur.com/4AubEbi.png"; //bake
    //quick
    activitiesPage[4] = "https://i.imgur.com/W1H2LbU.png"; //music
    activitiesPage[5] = "https://i.imgur.com/VJqD19E.png"; //draw
    activitiesPage[6] = "https://i.imgur.com/3wyiMdR.png"; //breakfast
    activitiesPage[7] = "https://i.imgur.com/5wUW5VD.png"; //water plants
    //social
    activitiesPage[8] = "https://i.imgur.com/jtYM2kP.png"; //call
    activitiesPage[9] = "https://i.imgur.com/jrhmmlA.png"; //game
    activitiesPage[10] = "https://i.imgur.com/W4TCa01.png"; //facemask
    activitiesPage[11] = "https://i.imgur.com/fot757c.png"; //movies
    
    //physical
    activitiesPage[12] = "https://i.imgur.com/0zokbRX.png"; //laundry
    activitiesPage[13] = "https://i.imgur.com/pO77RCB.png"; //stretch
    activitiesPage[14] = "https://i.imgur.com/PpYiJD3.png"; //swim
    activitiesPage[15] = "https://i.imgur.com/ew1Hfa5.png"; //run
    //relaxing
    activitiesPage[16] = "https://i.imgur.com/Yg5lxNt.png" //to do list
    activitiesPage[17] = "https://i.imgur.com/TtuDd51.png"; //bath
    activitiesPage[18] = "https://i.imgur.com/8bqSaWf.png"; //cloud
    activitiesPage[19] = "https://i.imgur.com/2oOvf88.png"; //stars

    for (var i = 0; i < activitiesPage.length; i++) {
        activities[i] = loadImage(activitiesPage[i]);
    }
    //buttons
    homeButton = loadImage("https://i.imgur.com/b1m90d7.png");
    categoryPage = loadImage("https://i.imgur.com/ZhCdUXE.png");
    refresh = loadImage("https://i.imgur.com/zR5a1pG.png");
    next = loadImage("https://i.imgur.com/tWvuonn.png");
    end = loadImage("https://i.imgur.com/KEkaCCC.png");

    //categories
    relax = loadImage("https://i.imgur.com/nuImFqN.png");
    quick = loadImage("https://i.imgur.com/K7NvO7p.png");
    long = loadImage("https://i.imgur.com/yWSUDxx.png");
    social = loadImage("https://i.imgur.com/1GUldUu.png");
    physical = loadImage("https://i.imgur.com/Hpf91kH.png");
}

function setup() {
    createCanvas(600, 450);
}

//set to home page, when home is false, shows categories page
function draw() {
    homePage();
    if (home == false) {
            categories();
}
}

//home page, when home is true
function homePage() {
    if (home) {
    background(215, 167, 167);
    circles();
    image(title, 0, 0, width, height);
    image(play, 0, 0, width, height);
    
    }
}

//categories page
function categories() {
    
    background(215, 167, 167);
    circles();
    push();
    imageMode(CENTER);

    //when relaxing is selected it enlarges
    if (!rel) {
        image(relax, 150, 230, 200, 80);
    } else if (rel) {
         image(relax, 150, 230, 300, 130);
    }

    //when social is selected, it enlarges
    if (!soc) {
        image(social, 300, 140, 200, 80);
    } else if (soc) {
        image(social, 300, 140, 300, 130);
    }

    //when physcial is selected, it enlarges
    if (!phy) {
        image(physical, 450, 230, 200, 80);
    } else if (phy) {
        image(physical, 450, 230, 300, 130);
    }

    //when long is selected, it enlarges
    if (!lng) {
        image(long, 200, 330, 200, 80);
    } else if (lng) {
        image(long, 200, 330, 300, 130);
    }

    //when quick is selected, it enlarges
    if (!qck) {
        image(quick, 400, 330, 200, 80);
    } else if (qck) {
        image(quick, 400, 330, 300, 130);
    }
    pop();

    //buttons
    image(homeButton, 0, 0, width, height);
    image(categoryPage, 0, 0, width, height);
}

//display activities
function activity() {
    background(random(150, 200), random(150, 200), random(150, 200));
    circles();
    var r;

    //relaxing activities based on index
    if (rel) {
        if (hour() > 6 & hour() < 18) { //mornings, excluding the stars
            r = int(random([16, 17, 18]));
        } else if (hour(0 > 20 & hour() < 4)) { //night time, excluding the clouds
            r = int(random([16, 17, 19]));
        }
    //long activities
    } else if (lng) { 
        r = int(random(0, 4));
    //physical activities
    } else if (phy) { 
        r = int(random(12, 16));
    //quick activities
    } else if (qck) { 
        if (hour() > 4 & hour() < 12) { //morning including breakfast
            r = int(random(4, 8));
        } else {
            r = int(random([4, 5, 7])); //excluding breakfast past morning
        }
    //social activities
    } else if (soc) {
        r = int(random(8, 12));
    }

    //display image
    image(activities[r], 0, 0, width, height);
    //buttons
    image(next, 0, 0, width, height);
    image(refresh, 0, 0, width, height);
    noLoop();
}

//thanks for playing
function endPage() {
    background(215, 167, 167);
    circles();
    image(end, 0, 0, width, height);
}    

//circles in the background
function circles() {
    for (var x = 0; x <= width; x += 20) {
        for (var y = 0; y<= height; y += 20) {
            noStroke();
            fill(242, 220, 203, 120);
            ellipse(x, y, 10, 10);
        }
    }
}

function mousePressed() {
    //returns to the home page
    if(mouseX >= 30 & mouseX <= 80 && mouseY >= 30 && mouseY <= 80) {
        home = true;
        homePage();
    } 
    // play button brings to categories page
    if (mouseX >= 220 & mouseX <= 380 && mouseY >= 250 && mouseY <= 320) {
        home = false;
        categories();
    //next button displays activies
    } else if(mouseX >= 510 & mouseY >= 370 && mouseX <= 560 && mouseY <= 415) {
        activity();
    //refresh button displays another activity
    } else if(mouseX <= 80 & mouseX >= 25 && mouseY <= 420 && mouseY >= 360) {
        activity();
    //end button to thanks for playing
    } else if (mouseX >= 515 & mouseY >= 15 && mouseX <= 570 && mouseY <= 70) {
        endPage();
    }

    //checks to see if boolean is selected by the user, can click to select and unselect
    if (mouseX >= 10 & mouseX <= 230 && mouseY <= 250 && mouseY >= 210) {
        rel = !rel;
    } else if(mouseX >= 230 & mouseY >= 125 && mouseX <= 360 && mouseY <= 150) {
        soc = !soc;
    } else if(mouseX >= 375 & mouseY >= 210 && mouseX <= 530 && mouseY <= 245) {
        phy = !phy;
    } else if(mouseX >= 145 & mouseY >= 310 && mouseX <= 250 && mouseY <= 340) {
        lng = !lng;
    } else if(mouseX >= 340 & mouseY >= 320 && mouseX <= 455 && mouseY <= 345) {
        qck = !qck;
    }
}

    

var count = 0; //counter for effects timing

var hint; //variable to hold the "hint" object

var hintcooldown = 0;
var hinttimer = 0;

var scene1bg;
var scene1;    //variable to hold scene images
var scene2;
var scene3;

var scene = 1; //which scene (level) the player is currently on


var margin = 5;   //tolerence for guess clicks

var scene1DifferencesLinks = ["https://i.imgur.com/ohzNdw0.jpg", "https://i.imgur.com/I33D4yq.png", "https://i.imgur.com/4NeqeQR.png", "https://i.imgur.com/awJOkKc.png", "https://i.imgur.com/qLzzqz7.png", "https://i.imgur.com/QbUGoQQ.png", "https://i.imgur.com/a1iMYvd.png"];  //the "differences" are small .jpgs of edited pieces of the image. They will be placed on top of the image to create the "difference"
var scene2DifferencesLinks = ["https://i.imgur.com/f6goqZk.png", "https://i.imgur.com/YdMfKCs.png", "https://i.imgur.com/n3I5MAl.png", "https://i.imgur.com/EYIHAZV.png", "https://i.imgur.com/uu3811U.png", "https://i.imgur.com/e7dqm0J.png", "https://i.imgur.com/V4bhJe8.png"];
var scene3DifferencesLinks = ["https://i.imgur.com/tvCjM0d.png", "https://i.imgur.com/OhlyeMv.png", "https://i.imgur.com/Cr3qy7U.png", "https://i.imgur.com/RttUtn3.png", "https://i.imgur.com/y9AJnzC.png", "https://i.imgur.com/XqaebA2.png", "https://i.imgur.com/wF5Jwgm.png"];

var scene1Differences = [];
var scene2Differences = [];
var scene3Differences = [];

var scene1DifObjs = [];
var scene2DifObjs = [];
var scene3DifObjs = [];

var bgmusic;
var successnoise;

var difsremaining = 7; //tests how many difs left

function preload() {

    scene1bg = loadImage("https://i.imgur.com/oibVoIs.jpg");

    scene1 = loadImage("https://i.imgur.com/oehMn23.png");  //main images for the 3 scenes
    scene2 = loadImage("https://i.imgur.com/PsOlXha.png");
    scene3 = loadImage("https://i.imgur.com/lVsD9Nu.png");
    
    for(i=0; i<scene1DifferencesLinks.length; i++){
        scene1Differences[i] = loadImage(scene1DifferencesLinks[i]);
    }

    for(i=0; i<scene2DifferencesLinks.length; i++){
        scene2Differences[i] = loadImage(scene2DifferencesLinks[i]);
    }

    for(i=0; i<scene3DifferencesLinks.length; i++){
        scene3Differences[i] = loadImage(scene3DifferencesLinks[i]);
    }

    scene1DifObjs.push(makeDifference(scene1Differences[0], 467, 115, 12, 9));  //make the differences. Each difference object contains the x, y, w, and h of the difference. this is the information the rest of the program functions will need to figure out where to place the difference and when the difference is discovered
    scene1DifObjs.push(makeDifference(scene1Differences[1], 213, 15, 2, 11));
    scene1DifObjs.push(makeDifference(scene1Differences[2], 81, 26, 27, 13));
    scene1DifObjs.push(makeDifference(scene1Differences[3], 12, 211, 14, 20));
    scene1DifObjs.push(makeDifference(scene1Differences[4], 281, 329, 25, 26));
    scene1DifObjs.push(makeDifference(scene1Differences[5], 491, 250, 99, 6));
    scene1DifObjs.push(makeDifference(scene1Differences[6], 317, 195, 15, 11));

    scene2DifObjs.push(makeDifference(scene2Differences[0], 527, 219, 47, 8));
    scene2DifObjs.push(makeDifference(scene2Differences[1], 319, 252, 24, 17));
    scene2DifObjs.push(makeDifference(scene2Differences[2], 388, 185, 12, 43));
    scene2DifObjs.push(makeDifference(scene2Differences[3], 47, 339, 82, 33));
    scene2DifObjs.push(makeDifference(scene2Differences[4], 573, 81, 34, 40));
    scene2DifObjs.push(makeDifference(scene2Differences[5], 211, 158, 8, 93));
    scene2DifObjs.push(makeDifference(scene2Differences[6], 413, 352, 19, 16));

    scene3DifObjs.push(makeDifference(scene3Differences[0], 328, 209, 19, 21));
    scene3DifObjs.push(makeDifference(scene3Differences[1], 475, 30, 17, 41));
    scene3DifObjs.push(makeDifference(scene3Differences[2], 262, 293, 12, 53));
    scene3DifObjs.push(makeDifference(scene3Differences[3], -16, 155, 56, 64));
    scene3DifObjs.push(makeDifference(scene3Differences[4], 284, 183, 15, 13));
    scene3DifObjs.push(makeDifference(scene3Differences[5], 172, 298, 56, 60));
    scene3DifObjs.push(makeDifference(scene3Differences[6], 73, 274, 29, 21));


    
    bgmusic = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/104music.mp3");
    successnoise = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/success.wav");


}


function setup() {
    createCanvas(600, 800);
    useSound();
    scene1bg.resize(600, 400);
    frameRate(12);

    hint = {x: 0, y: 0, w: 1, h: 1, alph: 0, drawit: hintDraw, stepit: hintStep};
    
}


function soundSetup() { // setup for audio generation
    bgmusic.setVolume(0.3);
    successnoise.setVolume(1);


}


function draw() {
    // you can replace any of this with your own code:
    background(255);
    bgmusic.play();
    print(difsremaining);
    print(count);

    if(count % 3000 == 0){
        bgmusic.play();
    }

    if(difsremaining == 0){
        difsremaining = 7;
        if (scene == 1) {
            scene = 2;
        } else if (scene == 2){
            scene = 3;
        } else {
            scene = 4;
            count = 1;
        }
    }

    

    if (scene == 1){
        image(scene1bg, 0, 0);
        image(scene1bg, 0, height/2);
        push();
        fill(255, 255, 255, 20);
        rect(0, 0, 600, 800);
        pop();
        image(scene1, 0, 0);
        image(scene1, 0, height/2);  //draw two base scene images

        push();
        fill(255, 255, 255, 150);
        textSize(10);
        text("Differences remaining: " + difsremaining, 470, 15);
        //text("Differences remaining: " + difsremaining, 470, 415);
        pop();

        for(i=0; i<scene1DifObjs.length; i++){
            if(scene1DifObjs[i].found == false){
                scene1DifObjs[i].drawit();
            }
        
        }
        
    }

    if (scene == 2){
        image(scene2, 0, 0);
        image(scene2, 0, height/2);

        push();
        fill(255, 255, 255, 150);
        textSize(10);
        text("Differences remaining: " + difsremaining, 470, 15);
        //text("Differences remaining: " + difsremaining, 470, 415);
        pop();

        for(i=0; i<scene2DifObjs.length; i++){
            if(scene2DifObjs[i].found == false){
                scene2DifObjs[i].drawit();
            }
        
        }

    }

    if (scene == 3){
        image(scene3, 0, 0);
        image(scene3, 0, height/2);

        push();
        fill(255, 255, 255, 150);
        textSize(10);
        text("Differences remaining: " + difsremaining, 470, 15);
        //text("Differences remaining: " + difsremaining, 470, 415);
        pop();

        for(i=0; i<scene3DifObjs.length; i++){
            if(scene3DifObjs[i].found == false){
                scene3DifObjs[i].drawit();
            }
        
        }

    }

    if (hintcooldown > 0){
        push();
        textSize(10);
        fill(255, 255, 255, 150);
        text(hintcooldown, 540, 31);
    }
    if (hinttimer % 12 == 0){
        hintcooldown --;
    }



    hint.drawit(); //hint functions
    hint.stepit();

    drawhintbutton();

    if (scene == 4){
        push();
        image(scene3, 0, 0);
        image(scene3, 0, height/2);
        
        fill(0, 0, 0, count*2.5);
        rect(0, 0, width, height);

        fill(255, 255, 255, count*2.5);
        textSize(50);
        text("END", width/2-50, height/2-10);
        textSize(15);
        text("THANK YOU FOR PLAYING", 205, 450);
        pop();

    }


    
    


    
    if(scene != 4){
        fill(0, 0, 0, 255-count*2.5); //fades in from black

        rect(0, 0, width, height);

    }
  
 
   count++;
   hinttimer++;
}

function mousePressed() {

    if (mouseX>=470 & mouseX<=532 && mouseY>=20 && mouseY<=36 && hintcooldown<0) {
        givehint();
    }

    if(scene == 1) {
        for(i=0; i<scene1DifObjs.length; i++){
            if((scene1DifObjs[i].found == false) & (mouseX >= scene1DifObjs[i].x - margin && mouseX <= scene1DifObjs[i].x + scene1DifObjs[i].w + margin) && (mouseY >= scene1DifObjs[i].y - margin && mouseY <= scene1DifObjs[i].y + scene1DifObjs[i].h + margin)) {
                scene1DifObjs[i].found = true;
                successnoise.play();
                difsremaining--;
                flashDif(scene1Differences[i], scene1DifObjs[i].x, scene1DifObjs[i].y);

            }
            if((scene1DifObjs[i].found == false) & (mouseX >= scene1DifObjs[i].x - margin && mouseX <= scene1DifObjs[i].x + scene1DifObjs[i].w + margin) && (mouseY >= scene1DifObjs[i].y + 400 - margin && mouseY <= scene1DifObjs[i].y + 400 + scene1DifObjs[i].h + margin)) {
                scene1DifObjs[i].found = true;
                successnoise.play();
                difsremaining--;
                flashDif(scene1Differences[i], scene1DifObjs[i].x, scene1DifObjs[i].y);

            }
        }

    }
    print(scene1DifObjs[0].found);

    if(scene == 2) {
        for(i=0; i<scene2DifObjs.length; i++){
            if((scene2DifObjs[i].found == false) & (mouseX >= scene2DifObjs[i].x - margin && mouseX <= scene2DifObjs[i].x + scene2DifObjs[i].w + margin) && (mouseY >= scene2DifObjs[i].y - margin && mouseY <= scene2DifObjs[i].y + scene2DifObjs[i].h + margin)) {
                scene2DifObjs[i].found = true;
                successnoise.play();
                difsremaining--;
                flashDif(scene2Differences[i], scene2DifObjs[i].x, scene2DifObjs[i].y);

            }
            if((scene2DifObjs[i].found == false) & (mouseX >= scene2DifObjs[i].x - margin && mouseX <= scene2DifObjs[i].x + scene2DifObjs[i].w + margin) && (mouseY >= scene2DifObjs[i].y + 400 - margin && mouseY <= scene2DifObjs[i].y + 400 + scene2DifObjs[i].h + margin)) {
                scene2DifObjs[i].found = true;
                successnoise.play();
                difsremaining--;
                flashDif(scene2Differences[i], scene2DifObjs[i].x, scene2DifObjs[i].y);

            }
        }

    }

    if(scene == 3) {
        for(i=0; i<scene3DifObjs.length; i++){
            if((scene3DifObjs[i].found == false) & (mouseX >= scene3DifObjs[i].x - margin && mouseX <= scene3DifObjs[i].x + scene3DifObjs[i].w + margin) && (mouseY >= scene3DifObjs[i].y - margin && mouseY <= scene3DifObjs[i].y + scene3DifObjs[i].h + margin)) {
                scene3DifObjs[i].found = true;
                successnoise.play();
                difsremaining--;
                flashDif(scene3Differences[i], scene3DifObjs[i].x, scene3DifObjs[i].y);

            }
            if((scene3DifObjs[i].found == false) & (mouseX >= scene3DifObjs[i].x - margin && mouseX <= scene3DifObjs[i].x + scene3DifObjs[i].w + margin) && (mouseY >= scene3DifObjs[i].y + 400 - margin && mouseY <= scene3DifObjs[i].y + 400 + scene3DifObjs[i].h + margin)) {
                scene3DifObjs[i].found = true;
                successnoise.play();
                difsremaining--;
                flashDif(scene3Differences[i], scene3DifObjs[i].x, scene3DifObjs[i].y);

            }
        }

    }


    

}

function flashDif(img, x, y){   //difference flashes when found
    image(img, x, y);
    image(img, x, y + 400);
  
        img.style.visibility = 'visible';
        img.style.visibility = 'hidden';

    
}


function makeDifference(img, dx, dy, dw, dh) {          //create the difference image as an object
    var difFound = false;                               //keeps track of whether or not the difference has been found
    var dif = {difimage: img, x: dx, y: dy, w: dw, h: dh, drawit: differenceDraw, found: difFound}
    return dif;

}

function differenceDraw() {       //place the difference image on the screen
    image(this.difimage, this.x, this.y);

}

function drawhintbutton() {
    push();
    noStroke();
    if (mouseX>=470 & mouseX<=532 && mouseY>=20 && mouseY<=36 && hintcooldown<0) {
        fill(255, 255, 0, 40);
    } else {
        fill(255, 255, 255, 40);
    }
    
    rect(470, 20, 62, 16);
    push();
    if (mouseX>=470 & mouseX<=532 && mouseY>=20 && mouseY<=36 && hintcooldown<0) {
        fill(255, 255, 0, 170);
    } else {
        fill(255, 255, 255, 170);
    }
    textSize(10);
    text("Hint please!", 474, 31);
    pop();
    pop();
}

function givehint(){ //gives the player a hint based on which differences are not found
    if(scene == 1){
        for(i=0; i<=scene1DifObjs.length; i++){
            if(scene1DifObjs[i].found == false){
                hint.x = scene1DifObjs[i].x + random(-60, 60);
                hint.y = scene1DifObjs[i].y + random(-60, 60);
                hint.alph = 200;
                hintcooldown = 20;
                counttimer = 0;
                return;
            }
        }
    }

}

function hintDraw(){
    
    push();
    strokeWeight(2);
    fill(255, 255, 0, 0);
    stroke(255, 255, 0, this.alph);
    ellipse(this.x, this.y, 220, 220);
    pop();
}

function hintStep(){
    this.alph-= 2;
}

//Caitlyn Baensch
//cbaensch@andrew.cmu.edu
//Section D

var shelf;
var bedroom;
var wind;
var steam;
var birds = [];
var fish = [];
var enter = false;
var phoneon = false;
var fadeg = 140;
var fadeb = 150;
var steamy = 266;
var steamdy = .5;

//load illustrations
function preload() {
    shelf = loadImage("https://i.imgur.com/FCmktLo.png");
    bedroom = loadImage("https://i.imgur.com/WVYB6XA.png");
    wind = loadImage("https://i.imgur.com/qjTV5Rs.png");
    steam = loadImage("https://i.imgur.com/k561c6E.png");
}

function setup() {
    createCanvas(600, 425);
    
    //setup for birds
    for(var i = 0; i < 6; i++) {
        birdsx = random(width);
        birds[i] = makeBirds(birdsx);
    }

    //setup for fish
    for (var i = 0; i < 12; i++) {
        fishx = random(325, 385);
        fish[i] = makeFish(fishx);
    }

    frameRate(12);
    angleMode(DEGREES);
}

function draw() {
    background(0);

    //show intro screen with instructions
    intro();

    //show the room when enter button is clicked
    if(enter == true) {
        room();
    }
}


//birds helper functions
//update the bird positions and display them
function displayBirds() {
    for (var i = 0; i < birds.length; i++) {
        birds[i].move();
        birds[i].draw();
    }
}

//remove birds that are off the canvas from the array
function removeBirds() {
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++) {
        if (birds[i].x + birds[i].w > 0) {
            birdsToKeep.push(birds[i]);
        }
    }
    birds = birdsToKeep;
}

//with a small probability, add a new bird to end of the array
function addNewBirds() {
    var newBirdLikelihood = 0.12;
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBirds(width+20));
    }
}

function moveBird() {
    this.x += this.speed;
}

function drawBird() {
    push();
    translate(this.x, this.y);
    fill(249, 228, 222);
    noStroke();
    triangle(0, 0, this.w, -this.h, this.w, 0);
    triangle(0, 0, this.w/2, -this.h, this.w/2, 0);
    pop();
}

//bird constructor (random location, size, and speed)
function makeBirds(birdsx) {
    var b = {x: birdsx, y: random(height),
            w: random(8, 16), h: random(4, 8),
            speed: random(-5, -10),
            move: moveBird,
            draw: drawBird
    }
    return b;
}


//fish helper functions
function displayFish() {
    for (var i=0; i<fish.length; i++) {
        fish[i].move();
        fish[i].draw();
    }
}

function moveFish() {
    this.x += this.dx;
    if (this.x > 385 || this.x < 325) {
        this.dx = -this.dx;
    }
}

function drawFish() {
    noStroke();
    fill(this.c);
    ellipse(this.x, this.y, this.w, this.h);
    if (this.dx < 0) {
        triangle(this.x+3, this.y, this.x+6, this.y-3, this.x+6, this.y+3);
    } else {
        triangle(this.x-3, this.y, this.x-6, this.y-3, this.x-6, this.y+3);
    }
}

//fish constructor (random location, size, speed, and color)
function makeFish(fishx) {
    var f = {x: fishx, y: random(195, 240),
        w: random(8, 12), h: random(3, 7),
        dx: random(-3, 3),
        c: color(random(100, 255), random(100, 255), random(100, 255)),
        move: moveFish,
        draw: drawFish
    }
    return f;
}


//wall clock function
function clock() {
    var hr = hour();
    var mn = minute();
    var sc = second();

    //second hand
    strokeWeight(2.15);
    var s = map(sc, 0, 60, 0, 360);
    push();
    rotate(s);
    stroke(255, 176, 148);
    line(0, 0, 16, 0);
    pop();

    //minute hand
    var m = map(mn, 0, 60, 0, 360);
    push();
    rotate(m);
    stroke(110, 160, 133);
    line(0, 0, 14, 0);
    pop();

    //hour hand
    var h = map(hr % 12, 0, 12, 0, 360);
    push();
    rotate(h);
    stroke(110, 160, 133);
    line(0, 0, 10, 0);
    pop();
}


//interactions for tip screens helper functions
//headphones: listen to music
function headphones() {
    if (mouseX > 22 & mouseX < 80 && mouseY > 150 && mouseY < 170) {
        tip('Listen to your favorite music.', 'Listening to music can help you focus, feel better, and relax.');
    }
}

//journals: reflect
function journals() {
    if (mouseX > 73 & mouseX < 102 && mouseY > 110 && mouseY < 122) {
        tip('Reflect on how you are feeling.', 'Try keeping a journal or taking some time each day to check in with yourself.');
    }
}

//tea: stay hydrated
function tea() {
    if (mouseX > 113 & mouseX < 134 && mouseY > 287 && mouseY < 308) {
        tip('Stay hydrated with water or a cup of hot tea.', 'Being well-hydrated improves sleep quality, cognition, and mood.');
    }
}

//phone: check in with friends
function phone() {
    if (mouseX > 137 & mouseX < 171 && mouseY > 303 && mouseY < 312) {
        tip('Check in with friends and family.', 'Catch up over text or phone call and see how everyone is doing.');
    }
}

//window: go for a walk
function win() {
    if (mouseX > 158.5 & mouseX < 268.5 && mouseY > 107 && mouseY < 217) {
        tip('Go outside for a 10-minute walk.', 'A walk can improve your mood and cognitive function as well as reduce stress.');
    }
}

//fish tank and cat: spend time with pets
function pets() {
    if ((mouseX > 313 & mouseX < 401 && mouseY > 187 && mouseY < 251) || (mouseX > 543 && mouseX < 594 && mouseY > 245 && mouseY < 274)) {
        tip('Spend time with pets.', 'Some quality time with your animal friends is sure to make you smile.');
    }
}

//books: read a book
function books() {
    if (mouseX > 325 & mouseX < 367 && mouseY > 278 && mouseY < 308) {
        tip('Get lost in a book.', 'Reading is the perfect way to unwind. Try it before bed instead of using your phone.');
    }
}

//yoga mat: stretch
function yoga() {
    if (mouseX > 318 & mouseX < 600 && mouseY > 378 && mouseY < 425) {
        tip('Take a break and stretch.', 'Doing yoga can help break up long periods of sitting at a desk and clear your mind.');
    }
}

//decorations: surround yourself with things that make you happy
function decoration() {
    if ((mouseX > 314 & mouseX < 378 && mouseY > 122 && mouseY < 174) || (mouseX > 468 && mouseX < 496 && mouseY > 182 && mouseY < 212)) {
        tip('Surround yourself with things you love.', 'Decorate your space with photos, art, and other meaningful items. Avoid clutter!');
    }
}

//clock: keep a daily routine
function time() {
    if (mouseX > 521 & mouseX < 572 && mouseY > 112 && mouseY < 163) {
        tip('Keep a daily routine.', 'Having a daily routine can reduce anxiety and create rhythm in your day.');
    }    
}


//text formatting for headers
function header() {
    textSize(24);
    textStyle(BOLD);
    textFont('Avenir');
}

//text formatting for body
function body() {
    textSize(14);
    textStyle(NORMAL);
    textFont('Avenir');
}


//tip screens formatting
function tip(line1, line2) {
    background(250, 227, 221, 230);
    fill(237, 122, 93);
    header();
    text(line1, 40, 250);
    body();     
    text(line2, 40, 285);
}


//intro opening screen with title and instructions
function intro() {
    background(255, 136, 108);
    fill(250, 227, 221);
    image(shelf, 40, 100, 286, 95);
    textSize(36);
    textStyle(BOLD);
    textFont('Avenir');
    text('Reminders from the Room', 40, 250);
    body();    
    text('Some quick tips for working from home during the pandemic.', 40, 285);
    text('Enter and hover over elements in the illustration to see relevant tips and info.', 40, 302);
    noStroke();
    fill(250, 227, 221);
    rect(456, 335, 100, 38, 38);
    fill(255, 136, 108);
    header();
    text('Enter', 476.5, 362);
    //if enter button is hovered over
    if (mouseX > 456 & mouseX < 555 && mouseY > 335 && mouseY < 373) {
        fill(244, 181, 161);
        rect(456, 335, 100, 38, 38);
        fill(237, 122, 93);
        header();
        text('Enter', 476.5, 362);
    }
}

//if enter button is pressed, enter the room
function mousePressed() {
    if (mouseX > 456 & mouseX < 555 && mouseY > 335 && mouseY < 373) {
        enter = true;
        room();
    }
}


//room environment
function room() {
    //landscape outside window
    image(wind, 146, 100, 125, 116);
    
    //birds flying outside window
    displayBirds();
    removeBirds();
    addNewBirds();

    //bedroom
    image(bedroom, 0, 0, width, height);

    //fish swimming in fish tank
    push();
    displayFish();
    fill(178, 190, 209, 50);
    rect(326, 187, 74, 56);
    pop();

    //wall clock by bed ticking
    push();
    translate(545, 138);
    rotate(-90);
    clock();
    pop();

    //phone screen new notifications
    push();
    noStroke();
    fill(37, 66, 52);
    quad(140, 303.5, 165, 303.5, 167, 308, 139, 308);
    if (frameCount % 90 == 0) {
        phoneon = true;
        if (phoneon == true) {
            fadeg = 240;
            fadeb = 240;
            fill(249, fadeg, fadeb);
            quad(140, 303.5, 165, 303.5, 167, 308, 139, 308);
        }
    } else {
        if (fadeg >= 140 & fadeb >= 150) {
            fadeg = fadeg - 3;
            fadeb = fadeb - 3;
            fill(249, fadeg, fadeb);
            quad(140, 303.5, 165, 303.5, 167, 308, 139, 308);
            phoneon = false;
        }
    }
    pop();

    //steam floats up over cup of tea
    image(steam, 115, steamy, 14, 24);
    steamy -= steamdy;
    if (steamy <= 257 || steamy > 267) {
        steamdy = -steamdy;
    }

    //show tip screens for user interaction
    headphones();
    journals();
    tea();
    phone();
    win();
    pets();
    books();
    yoga();
    decoration();
    time();
}

/*
Bon Bhakdibhumi
bbhakdib
Section D
*/

var particles = [];


function setup() {
    createCanvas(400, 400);
    for (var i = 0; i < 50; i ++) {
        particles[i] = new Object();
        particles[i].x = random(width);
        particles[i].y = random(height);
        particles[i].dx = random(-2,5);
        particles[i].dy = random(-2,5);
        particles[i].c = color(86, 137, 179);
        particles[i].covid = false;
    }
    frameRate(25);
}

function draw() {
    background(201, 156, 105);
    for (var j = 0; j < 50; j ++) {
        drawParticles(particles[j]);
        moveParticles(particles[j]);
    }
    if (frameCount == 50 || frameCount % 100 == 0) {
        particles[2].covid = true;
    }
// calculate distance for infection
    for (var i = 0; i < particles.length; i ++) {
        for (var j = 0; j < particles.length; j ++) {
            var d = int(dist(particles[i].x, particles[i].y, particles[j].x, particles[j].y));
            if (d < 20) {
                if (particles[i].covid == true) {
                    particles[j].covid = true;
                }
            }
        }
    }
// display counter
//if all particles have covid, then display the warning text
     var covidCounter = 0;
    for (var i = 0; i < particles.length; i ++) {
        if (particles[i].covid == true) {
            covidCounter ++;
        }
    }
    noStroke();
    fill(255);
    textAlign(LEFT);
    textSize(20);
    text("Infected People:", 10, 25);
    text(covidCounter, 160, 25);
    if (covidCounter == particles.length) {
        fill(255, 253, 131);
        textAlign(CENTER);
        textSize(30);
        text('STOP CORONA!', width/2, height/2.15);
        textSize(35)
        text('KEEP YOUR DISTANCE!', width/2, height/1.75);
    }
}

// reset canvas and cure all particles
function keyPressed() {
        for (var i = 0; i < particles.length; i ++) {
            particles[i].covid = false;
        }
}

// cure covid with mouse
function mousePressed() {
    for (var i = 0; i < particles.length; i ++) {
        var mouseDistance = int(dist(mouseX, mouseY, particles[i].x, particles[i].y));
        if (mouseDistance < 10) {
            particles[i].covid = false;
        }
    }
}

function drawParticles(p) {
    if (p.covid == true) {
        stroke(1);
        fill(204, 61, 61);
    } else {
        stroke(1);
        fill(p.c);
    }
    ellipse(p.x, p.y, 12, 12);
}

function moveParticles(p) {
    p.x += p.dx;
    p.y += p.dy;
    if (p.x > width || p.x < 0) {
        var resetX = random(100);
        if (resetX < 50) {
            p.x = 0;
        } else {
            p.x = width;
        }
    p.dx = random(-2, 5);
    }
    if (p.y > height || p.y < 0) {
        var resetY = random(100);
        if (resetY < 50) {
            p.y = 0;
        } else { 
            p.y = height;
        }
    p.dy = random(-2, 5);
    }
}