let y = 150; // Start from a bit below the middle for visualization

let z = 50;

let a = 0;

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) {

    // Bubble Umbrella (open)

    fill(200, 200, 255, 100); // semi-transparent for bubble appearance

    ellipse(x, y, 120, 120);  // more circular shape for bubble umbrella

​

    // Handle for the bubble umbrella (when open)

    stroke(0); 

    line(x, y + 60, x, y + 100); 

​

  } else {

    // Umbrella (closed)

    fill(200, 200, 255, 100);

    line(x, y - 15, x, y + 85); // longer line to represent closed bubble umbrella

  }

​

  // Move umbrella vertically

  y = y + ySpeed * yDirection;

  // Move umbrella horizontally

  x = x + xSpeed * xDirection;

​

  // Bouncing logic for vertical movement

  if (y > height - 60) {  // considering 60 as half the height of the bubble umbrella when open

    yDirection = -1;

  } else if (y <= 60) {

    yDirection = 1;

  }

​

  // Bouncing logic for horizontal movement

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

    xDirection *= -1; // reverse direction

  }

  // Randomly change horizontal direction

  if (random() < 0.01) {

    xDirection *= -1;

  }

}

​

function mousePressed() {

  isUmbrellaOpen = !isUmbrellaOpen;

}

​