let numLeaves = 15; // Number of leaves to be displayed

let treeImage; // Variable to store the image of the tree

let imgWidth, imgHeight; // Variables for storing the dimensions of the image

let canvasWidth, canvasHeight; // Variables for canvas dimensions

​

​

function preload() {

  treeImage = loadImage('https://res.cloudinary.com/dxftgskwa/image/upload/v1725562135/leaves_k2aspy.jpg', 

    // Callback to set the image width and height after the image is loaded

    (img) => {

      imgWidth = img.width;

      imgHeight = img.height;

    });

}

​

// setup function to initialize the canvas and create the leaves

function setup() {

  canvasWidth = windowWidth;

  canvasHeight = windowHeight;

  // Create a canvas that takes up the full window

  createCanvas(canvasWidth, canvasHeight);

  // Loop to create the leaves with random properties

  for (let i = 0; i < numLeaves; i++) {

    // Random fall speed for each leaf to mimic natural differences

    let fallSpeed = random(0.5, 2); 

    // Random starting height of the leaf (above the visible canvas)

    let startHeight = random(-200, -50); 

    // Random direction in which the leaf will drift (-1 for left, 1 for right, or 0 for straight down)

    let driftDirection = random([-1, 0, 1]); 

    // Random color for each leaf to simulate autumn colors

    let leafColor = color(random(100, 200), random(50, 150), random(0, 50)); 

    // Random horizontal starting position for each leaf (within a section of the canvas)

    let startX = random(canvasWidth * 0.2, canvasWidth * 0.8); 

    // Push a new leaf object into the leaves array

    leaves.push(new Leaf(startHeight, driftDirection, fallSpeed, leafColor, startX)); 

  }

}

​

// draw() function that runs in a loop to render the scene

function draw() {

  background(255); 

  // Calculate aspect ratio of the tree image

  let imgAspect = imgWidth / imgHeight;

  // Calculate aspect ratio of the canvas

  let canvasAspect = canvasWidth / canvasHeight;

  let newImgWidth, newImgHeight;

  // If the canvas is wider than the image, scale the image to fit the canvas width

  if (canvasAspect > imgAspect) {

    newImgWidth = canvasWidth;

    newImgHeight = canvasWidth / imgAspect;

  } 

  // Otherwise, scale the image to fit the canvas height

  else {

    newImgHeight = canvasHeight;

    newImgWidth = canvasHeight * imgAspect;

  }

  // Display the tree image in the center of the canvas

  imageMode(CENTER);

  image(treeImage, canvasWidth / 2, canvasHeight / 2, newImgWidth, newImgHeight);

  // Loop through all the leaves and apply forces, update positions, and display them

  for (let leaf of leaves) {

    // Apply gravity force to the leaf (fallSpeed controls how fast it falls)

    leaf.applyForce(createVector(0, leaf.fallSpeed * 0.1)); 

    // Random wind strength to add lateral movement (drift) to the leaf

    let windStrength = random(0, 0.05); 

    // Apply wind force in the direction determined by the leaf's drift

    leaf.applyForce(createVector(windStrength * leaf.drift, 0)); 

    // Update the leaf's position based on its velocity and acceleration

    leaf.update();

    // Display the leaf on the canvas

    leaf.display();

  }

}

​

// Class definition for a leaf object

class Leaf {

  constructor(startHeight, driftDirection, fallSpeed, leafColor, startX) {

    // Position of the leaf (starting at random height and X position)

    this.position = createVector(startX, startHeight);

    // Initial velocity (starting at 0)

    this.velocity = createVector(0, 0);

    // Initial acceleration (starting at 0)

    this.acceleration = createVector(0, 0);

    // Random size for the leaf

    this.size = random(20, 50);

    // Random angle for the leaf to rotate during its fall

    this.angle = random(TWO_PI);

    // Random angular velocity to rotate the leaf at a different speed

    this.angularVelocity = random(0.01, 0.03);

    // Drift direction of the leaf (left, right, or none)

    this.drift = driftDirection;

    // Falling speed of the leaf

    this.fallSpeed = fallSpeed;

    // Color of the leaf

    this.color = leafColor;

  }

​

  // Method to apply a force (like gravity or wind) to the leaf

  applyForce(force) {

    // Add the force to the leaf's acceleration

    this.acceleration.add(force);

  }

​

  // Method to update the leaf's position and velocity based on acceleration

  update() {

    // Update velocity based on acceleration

    this.velocity.add(this.acceleration);

    // Update position based on velocity

    this.position.add(this.velocity);

    // Increment the leaf's angle to simulate rotation

    this.angle += this.angularVelocity;

    // Reset acceleration to 0 after applying the forces

    this.acceleration.mult(0);

    // If the leaf moves off the bottom of the screen, reset its position to the top

    if (this.position.y > canvasHeight) {

      this.position.y = random(-100, -50);

      this.position.x = random(canvasWidth * 0.2, canvasWidth * 0.8);

      this.velocity.mult(0);  // Reset velocity when the leaf reappears

    }

  }

​

  // Method to display the leaf on the canvas

  display() {

    // Save the current drawing state

    push();

    // Move to the leaf's current position

    translate(this.position.x, this.position.y);

    // Rotate the leaf by its current angle

    rotate(this.angle);

    // Set the fill color to the leaf's color

    fill(this.color);

    // No outline for the leaf

    noStroke();

    // Draw the shape of the leaf using bezier curves

    beginShape();

    vertex(0, -this.size / 2);

    bezierVertex(this.size / 4, -this.size / 4, this.size / 2, this.size / 4, 0, this.size / 2);

    bezierVertex(-this.size / 2, this.size / 4, -this.size / 4, -this.size / 4, 0, -this.size / 2);

    endShape(CLOSE);

    // Restore the previous drawing state

    pop();

  }

}

​