let h;

let xmap;

let ymap;

let greenVal = 100;

let peaColor;

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  mapBackground(greenVal); // greenVal = how much green to add to the background (0,255)

  // set these for the entire sketch

  noCursor();

  noStroke();

​

  // control which creature to draw based on mouse location

  if (mouseX < width / 2) {

    // draw a summer creature

    drawSummerCreature(mouseX, mouseY);

  } else {

    // draw a winter creature

    drawWinterCreature(mouseX, mouseY);

  }

​

  /* --------------- functions defined below --------------- */

​

  // draw a winter creature

  function drawWinterCreature(x, y) {

    /* cold color palette

    #2d1b00

    #1e606e

    #5ab9a8

    #c4f0c2

    */

    push();

    translate(x, y);

​

    // creature head

    fill("#1e606e");

    ellipse(0, 0, 160, 80);

​

    // eyes

    fill("#1e606e");

    circle(-50, -40, 50);

    circle(50, -40, 50);

    fill("#2d1b00");

    circle(-50, -40, 30);

    circle(50, -40, 30);

​

    // draw

    shooters(0, 0, -130, 30, "#c4f0c2"); // (x , y point of where to translate as 'center',distance = distance between each circle, diameter = diameter of each circle.

    shooters(0, 0, 230, 30, "#c4f0c2");

​

    // mouth

    //circle(0,20,20);

    rotate(PI / 4);

    rect(0, 0, 10, 20);

    rect(0, 0, 20, 10);

​

    pop();

  }

​

  // draw a summer creature

  function drawSummerCreature(x, y) {

    /* warm color palette

    #7c3f58

    #eb6b6f

    #f9a875

    #fff6d3

    */

​

    push();

​

    translate(x, y);

​

    // creature head

    fill("#eb6b6f");

    ellipse(0, 0, 160, 80);

​

    // eyes

    fill("#eb6b6f");

    circle(-50, -40, 50);

    circle(50, -40, 50);

    fill("#fff6d3");

    circle(-50, -40, 30);

    circle(50, -40, 30);

​

    // draw

    shooters(0, 0, -130, 30, "#7c3f58"); // (x , y point of where to translate as 'center',distance = distance between each circle, diameter = diameter of each circle.

    shooters(0, 0, 230, 30, "#7c3f58");

​

    // mouth

    //circle(0,20,20);

    rotate(PI / 4);

    rect(0, 0, 10, 20);

    rect(0, 0, 20, 10);

​

    pop();

  }

​

  // drawing side circles function used in creatures.

  function shooters(x, y, distance, dia, peaColor) {

    push();

    fill(peaColor);

    translate(x, y); // shooters are alligned with creature's head now

    for (let i = 0; i < 3; i++) { // do this three times!

      circle(x + distance, y, dia);

      distance -= 50; // changes where the center of the circle is for the next circle

    }

  }

​

  // maps background color to mouseX and mouseY value

  function mapBackground(greenValue) {

    let w = width;

    let h = height;

    let xmap = map(mouseX, 0, w, 0, 255);

    let ymap = map(mouseY, 0, h, 0, 255);

​

    background(xmap, greenValue, ymap); // background rgb is mapped to mouse and there is an emphasis on green tones

  }

}

​