var speed;

    var xpos = 0;

    var duckheight = 163;

    var duckwidth = 210;

    var vroom = 0.5;

    var imageX;

    let x = 1;

    let easing = 0.025;

​

    function setup() {

      createCanvas(windowWidth, windowHeight);

      noStroke();

      tick = hour();

      lerpValue = 0;

      dusk = "nightfall"

      dawn = "daybreak"

      sunlight = "sunrise"

      moonlight = "twilight"

​

      r = height * 0.4

      theta = 0;

      speed = 0.02;

​

      startTime = millis();

​

      city = loadImage("biggercity2.png");

      quack = loadImage("quack.png");

      purplequack = loadImage("purplequack.png");

      yellowquack = loadImage("yellow.png");

      quackback = loadImage("quackback.png");

      test = width;

    purple = purplequack;

      swish = loadSound("quackwater.mp3");

​

    }

​

    function draw() {

      //background coloration

      noStroke();

      var bright = color(255, 183, 183);

      var dark = color(34, 4, 135);

      var sun = color(255, 130, 130);

      var moon = color(255);

​

      if (tick % 2 === 0) {

        night = "nightfall";

      } else {

        night = "morning";

      }

​

      if (dusk === "nightfall") {

        lerpValue = map(tick, 0, 23, 0, 1);

      } else {

        lerpValue = map(tick, 23, 0, 0, 1);

      }

​

      if (dawn === "morning") {

        lerpValue = map(tick, 23, 0, 0, 1);

      } else {

        lerpValue = map(tick, 0, 23, 0, 1);

      }

​

      if (tick < 11.5) {

        lerpValue = map(tick, 0, 11.5, 0, 1);

      } else {

        lerpValue = map(tick, 11.5, 23, 1, 0);

      }

​

      var lerpedColor = lerpColor(bright, dark, lerpValue);

      background(lerpedColor);

​

      //sun-moon

      push();

      translate(width / 2, height / 2);

      var yip = r * cos(radians(theta));

      var yap = r * sin(radians(theta));

​

      if (tick % 2 === 0) {

        halo = "sunrise";

      } else {

        halo = "twilight";

      }

​

      if (moonlight === "twilight") {

        lerpValue = map(tick, 0, 23, 0, 1);

      } else {

        lerpValue = map(tick, 23, 0, 0, 1);

      }

​

      if (sunlight === "sunrise") {

        lerpValue = map(tick, 23, 0, 0, 1);

      } else {

        lerpValue = map(tick, 0, 23, 0, 1);

      }

​

      if (tick < 11.5) {

        lerpValue = map(tick, 0, 11.5, 0, 1);

      } else {

        lerpValue = map(tick, 11.5, 23, 1, 0);

      }

​

      var lerpedColor = lerpColor(sun, moon, lerpValue);

      fill(lerpedColor);

      ellipseMode(CENTER);

      ellipse(yip, yap, 150, 150);

​

      if (theta >= 360) {

        startTime = millis();

      }

​

      var timeElapsed = millis() - startTime;

      theta = map(timeElapsed, 0, 3600000, 0, 360);

      pop();

​

      image(city, 0, height - (city.height * (windowWidth / city.width)), windowWidth, city.height * (windowWidth / city.width));

​

      xpos = xpos + 0.2;

      if (xpos > width) {

        xpos = 0;

      }

      image(purplequack, xpos, height - (duckheight / 3), (duckwidth / 3), (duckheight / 3));

​

      push();

      image(yellowquack, test, height - (duckheight / 3), (duckwidth / 3), (duckheight / 3));

      test = test - 0.5;

      if (test < 0) {

        test = width;

      }

      pop();

​

      let targetX = mouseX;

      let dx = targetX - x;

      x += dx * easing;

​

      if (mouseX >= pmouseX) {

        image(quack, x, height - (duckheight / 3), (duckwidth / 3), (duckheight / 3));

      } else {

        image(quackback, x, height - (duckheight / 3), (duckwidth / 3), (duckheight / 3));

      }

    }

​