createCanvas(400, 400);

}

​

let balls = [];

​

class Ball {

  constructor(x, y, diameter, color, petalNumber) {

    this.x = x; // X position of the ball

    this.y = y; // Y position of the ball

    this.diameter = diameter; // Diameter of the ball

    this.color = color; // Color of the ball

    this.ySpeed = 0; // Initial vertical speed

    this.gravity = 0.3; // Gravity effect

    this.petalNumber = petalNumber; // Number of petals

  }

​

  display() {

    push();

    translate(this.x, this.y); // Move to ball position

    fill(this.color);

    noStroke();

​

    let petalWidth = 10; // Width of the petal

    let petalHeight = 20; // Height of the petal

    let angleIncrement = 360 / this.petalNumber; // Angle between petals

​

    // Draw petals

    for (let i = 0; i < this.petalNumber; i++) {

      let angle = i * angleIncrement;

​

      push();

      rotate(radians(angle)); // Rotate for each petal

      ellipse(0, petalHeight / 2, petalWidth, petalHeight); // Draw petal

      pop();

    }

​

    // Draw the center of the flower

    fill(0); // Center color (black)

    ellipse(0, 0, 10, 10); // Draw the center

    pop(); // Restore transformation

  }

​

  drop() {

    this.ySpeed += this.gravity; // Update speed with gravity

    this.y += this.ySpeed; // Update position with speed

​

    // if hits the ground

    if (this.y + this.diameter / 2 > height) {

      this.y = height - this.diameter / 2; // Stop at the ground

      this.ySpeed *= -0.7; // Reverse speed and reduce it to bounce

    }

  }

}

​

function mousePressed() {

  let pinkBall = new Ball(mouseX, mouseY, 20, 'pink', 10); // Create a new ball with petals

  balls.push(pinkBall); // Add the ball to the array

}

​

function draw() {

  background(255); // Clear background

  for (let ball of balls) {

    ball.drop(); // Update ball position

    ball.display(); // Display the ball with petals

  }

}

​