let y = 150; 

let ySpeed = 1;

let yDirection = 1;

let xSpeed = 1;

let xDirection = 1;

let isUmbrellaOpen = true;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

  strokeWeight(2);

​

  if (isUmbrellaOpen) {

    // Japanese Umbrella (open)

    fill(200, 200, 255, 200);

    beginShape();

    vertex(x, y);

    bezierVertex(x - 60, y, x - 60, y + 60, x, y + 60);  // Left side

    bezierVertex(x + 60, y + 60, x + 60, y, x, y);  // Right side

    endShape();

    // Ribs of the umbrella

    for (let i = -4; i <= 4; i++) {

      let xOffset = i * 15;

      let yOffset = Math.abs(i) * 7; // Makes the central ribs longer and outer ones shorter

    // Umbrella (closed)

    line(x, y - 15, x, y + 85); 

  }

​

  // Move umbrella vertically

  y = y + ySpeed * yDirection;

  // Move umbrella horizontally

  x = x + xSpeed * xDirection;

​

  // Bouncing logic for vertical movement

  if (y > height - 60) {  

    yDirection = -1;

  } else if (y <= 60) {

    yDirection = 1;

  }

​

  // Bouncing logic for horizontal movement

  if (x > width - 60 || x < 60) {

    xDirection *= -1;

  }

  // Randomly change horizontal direction

  if (random() < 0.01) {

    xDirection *= -1;

  }

}

​

function mousePressed() {

  isUmbrellaOpen = !isUmbrellaOpen;

}

​

​

​