let blinkDuration = 300;

let interval = 2500;

let lastBlink = 0;

​

class Cloud {

  constructor(x, y, w, h, speed) {

    // Init cloud class with all variables

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.r = 50;

    this.speed = speed;

  }

​

  display() {

    // Draw cloud and then move it by speed

    fill(color(255, 250, 220));

    this.x += this.speed;

    rect(this.x, this.y, this.w, this.h, this.r);

    // If cloud out of the screen then move it back to left

    if (this.x > width) {

      this.x = -200;

    }

  }

}

​

function setup() {

  createCanvas(500, 500);

  noStroke();

  // Init 4 clouds with different coords

  CLOUDS.push(

    new Cloud(230, 110, 225, 75, 1),

    new Cloud(325, 70, 100, 50, 2),

    new Cloud(-100, 175, 200, 75, 2),

    new Cloud(50, 230, 125, 50, 0.5)

  );

}

​

function draw() {

  background(color(85, 170, 230));

​

  // Ground

  fill(color(255, 210, 180));

  rect(0, 350, width, height);

​

  // Sun

  fill(color(247, 239, 72));

  circle(100, 100, 60);

​

  // Draw clouds and update them every iteration

  for (let i = 0; i < CLOUDS.length; i++) {

    CLOUDS[i].display();

  }

​

  // Body

  fill(color(0, 130, 165));

  ellipse(350, 650, 250, 500);

​

  // Strawberry hat

  // Using rotation move elements

  fill(color(5, 70, 75));

  push();

  translate(350, 250);

  rotate(QUARTER_PI);

  ellipse(-20, 40, 75, 50);

  pop();

  push();

  translate(350, 250);

  rotate(-PI - QUARTER_PI);

  ellipse(-20, -40, 75, 50);

  pop();

  ellipse(350, 250, 50, 75);

​

  // Head

  fill(color(240, 115, 105));

  ellipse(350, 375, 250, 200);

  fill(color(255, 250, 220));

  rect(275, 350, 150, 100, 50);

​

  // If time between now and last blink is more than interval of the blink

  // Draw line eyes instead of circle eyes when character blinks

  // P.S using time from start of the sketch to count intervals

  if (millis() - lastBlink > interval) {

    push();

    fill(0);

    stroke(0);

    strokeWeight(3);

    line(295, 400, 335, 400);

    line(355, 400, 405, 400);

    pop();

​

    // If character blinked for blinkDuration then save lastBlink time

    if (millis() - lastBlink > interval + blinkDuration) {

      lastBlink = millis();

    }

  } else {

    // Draw circle eyes

    fill(0);

    circle(315, 400, 25);

    circle(385, 400, 25);

  }

​

  // Mouth

  fill(color(240, 115, 105));

  arc(350, 420, 25, 25, 0, PI);

}

​