Final Project

//global variables
var houseDayImg;
var houseNightImg;
var dayPeriod = 2000;
var numTrees = 4;
var numStars = 20;
var trees = [];
var stars = [];

class Star {
    constructor() {
        this.x = random(width);
        this.y = random(height/4);
    }

    display() {
        fill(255,255,255);
        ellipse(this.x, this.y, 3, 3);
    }
}

class Tree {
    constructor() {
        var choice = random(1);
        if(choice < 0.5){
            this.x = random(width/3);  
        }else {
            this.x = random(2 * width / 3, width - 10); 
        }
        choice = random(1);
        if(choice < 0.5){
            this.color = color(135, 167, 126);  
        }else {
            this.color = color(73, 126, 97);
        }
        this.y = random(280, 300)
        this.w = random(50, 70);
        this.h = random(60, 90);
    }
       
    display() {
        fill(109, 86, 53);
        rect(this.x - 5, this.y + 10, 10, 50);
        fill(this.color)
        ellipse(this.x, this.y, this.w, this.h);
    }
}

function preload() {
    //preload images
    houseDayImg = loadImage("https://i.imgur.com/DguMSkN.png");
    houseNightImg = loadImage("https://i.imgur.com/eXNWSkN.png");
    panelImg = loadImage("https://i.imgur.com/VFf1Rr8.png");
    batteryImg = loadImage("https://i.imgur.com/rw8ScZs.png");
}

function setup() {
    createCanvas(400, 400);
    for(i = 0; i < numStars; i++){ //draw stars at night
        stars.push(new Star())
    }
    
    for(i = 0; i < numTrees; i++){ //draw trees
        trees.push(new Tree())
    }

}

function draw() {
    time = frameCount % dayPeriod;
    bgDark = time;
    batteryLife = (frameCount + dayPeriod / 4) % dayPeriod;
    if (bgDark > dayPeriod/2) {
        bgDark = dayPeriod - bgDark;
    }
    if (batteryLife > dayPeriod/2) {
        batteryLife = dayPeriod - batteryLife;
    }
    background(207 - bgDark / dayPeriod*255*2, 226 - bgDark / dayPeriod*255*2, 243 - bgDark / dayPeriod*255*2);

    //ground
    fill(143-bgDark*(143-66)/dayPeriod*2, 206-bgDark*(206-95)/dayPeriod*2, 0);
    noStroke();
    ellipse(200, 400, 500, 180);
    
    //panel
    image(panelImg, 125, 156, 80, 80);
    
    //battery
    image(batteryImg, 140, -15, 100, 100);
    fill(255 - batteryLife / dayPeriod * 255 * 2, batteryLife / dayPeriod * 255 * 2, 0);
    rect(167, 18, batteryLife / dayPeriod * 61 * 2, 34);
  
    //during daytime
    if (time < dayPeriod/4 || time > dayPeriod*3/4) {
       
       //house
       image(houseDayImg, 130, 200, 130, 130);

    } else { //during nighttime
       
        //house 
        drawStars();
        image(houseNightImg, 130, 200, 130, 130);
   }

    frameCount += 1;

    //function
    drawSun(time);
    drawTrees();
}


function drawSun(time) { 
   push();
   translate(200, 400);
    rotate(frameCount * 2 * PI / dayPeriod);
   fill(255, 206, 59);
   ellipse(0, -300, 70, 70);
   pop();
}

function drawStars() { //draw stars at random locations in the sky when it becomes night and disappear when it becomes daytime again
    for(i = 0; i < stars.length; i++){
        stars[i].display();
    }
}

function drawTrees(){ //draw trees at random locations every time you refresh 
    for(i = 0; i < trees.length; i++){
        trees[i].display();
    }
}