// these are to set up my image files

let img_morning;

// yellow dots = (228, 176, 92)

let not_morning;

let img_afternoon;

let img_night;

//these images are the 3 different times of day

let img_plant_berry

let img_plant_picked

//these images are the plants

let img_hand_open

let img_hand_closed

//this is just to show in class, delete later *@*@*@*@*@*@

let img_berries_planted

​

// these images are for the cursor, img_hand_open is for the general cursor, img_hand_closed is for clicking

​

​

function setup() {

  createCanvas(120, 92);//this is the resolution of the background image

​

  //this is my image library

  img_morning = loadImage('assets/morningwithdots.png');

  img_afternoon = loadImage('assets/afternoon.png');

  img_night = loadImage('assets/night.png');

   img_plant_berry = loadImage('assets/plant.png');

  img_plant_picked = loadImage('assets/berries.png');

  img_hand_open = loadImage('assets/hand.png');

  img_hand_closed = loadImage('assets/grab.png');

  //this is just to show in class, delete later *@*@*@*@*@*@

  img_berries_planted = loadImage('assets/berryimg.png');

​

// look at the image (morningwithdots.png) and find the pixels with the RGB values (228, 176, 92)

  // this function asks, given an x/y coordinate, is this pixel this color?

    function isColor(image, x, y, red, green, blue) {

    let index = (x + y * image.width) * 4;

    return image.pixels[index] == red &&

    image.pixels[index + 1] == green &&

    image.pixels[index + 2] == blue}

    function writeColor(image, x, y, red, green, blue) {

    let index = (x + y * image.width) * 4;

    image.pixels[index] = red;

    image.pixels[index + 1] = green;

    image.pixels[index + 2] = blue

  }

  img_morning.loadPixels()

  //this function searches rows and columns, which will search for the orange pixel

  let x, y;

  for (y = 0; y < img_morning.height; y++) {

    for (x = 0; x < img_morning.width; x++) {

​

  // this tells the script to load a color; if the previous function finds the plant_dot, it will load the color red (255,0,0)

  if (true || isColor(img_morning, x, y, 228, 176, 92)) {

   writeColor(img_morning, x, y, 255,0,0) ;

    }

    }

}

  img_morning.updatePixels()

​

​

​

}

​

​

//this is to set up the images to load for the times of day

​

  // if it's morning, then display the morning img; if it's afternoon, then display afternoon img' if it's night, then display night img. if it's not morning, then it's either afternoon, or night.

​

function draw() {  

   //this chunk STARTING HERE can be moved from the draw function to the set up function to determine how it loads

  //----------------------------

  //this is to define the hour

let h = hour();

  //this is to define hour ranges, because ranges arent directly expressed in javascript

  is_morning = h > 6 && h < 12

  is_afternoon = h > 11 && h < 21

  is_night = (h > 20 && h < 24) || (h == 0) || (h > 0 && h < 7) 

     //this chunk END HERE

  //----------------------------------------------

  //this defines when to load images

  if (is_morning) {

    image(img_morning, 0, 0);}

  if (is_afternoon) {

    image(img_afternoon,0,0);}

  if (is_night) {

    image(img_night, 0,0)}

​

  //this is to set up the times of day and the desired background

​

  //this is just to show in class, delete later *@*@*@*@*@*@

​

    image(img_berries_planted,0,0)

​

​

}

​