let leafColors = ["#963990", "#4B2454"];

​

class Leaf {

  // x0 and y0 specify the center of the cluster of leaves (one of the 3 clusters)

  constructor(x0, y0, clusterWidth, clusterHeight) {

    // using a separate variable for the initial position of x since xPos will

    // always be changing in draw() and this will cause abrupt behavior in the

    // leaf's x-movement if used along with noise inside move()

​

    // positioning initialX, xPos, and yPos within the cluster

    this.initialX = random(x0 - clusterWidth, x0 + clusterWidth);

    this.xPos = random(x0 - clusterWidth, x0 + clusterWidth);

    this.yPos = random(y0 - clusterHeight, y0 + clusterHeight);

​

    // random width and height for the leaves

    this.width = random(10, 20);

    this.height = random(10, 15);

​

    // random y speed

    this.ySpeed = random(0.5, 2);

​

    // variables for x-noise

    this.xoff = 0.0;

    this.xincrement = 0.01;

​

    // to check if the leaf has fallen beneath the canvas

    this.alive = true;

​

    // leaf only falls when this is true

    this.fall = false;

​

    // choosing a random shade of purple from the two specified in the global array

    this.color = leafColors[int(random(0, 2))];

  }

​

  // for the leaf's falling movement

  move() {

    // only make the leaf fall if the fall attribute of the object is true

    if (this.fall) {

      // giving some noise in the x direction to give a natural feel while falling

      this.xPos = this.initialX + noise(this.xoff) * 100;

      this.xoff += this.xincrement;

      // incrementing y to make the leaf fall vertically

      this.yPos += this.ySpeed;

    }

  }

​

  // to check for collisions of leaves with the bottom of the canvas

  checkForCollisions() {

    // check if the leaf has fallen beneath the canvas

    if (

      this.xPos <= -15 ||

      this.xPos >= width + 15 ||

      this.yPos >= height + 15

    ) {

      this.alive = false;

    }

​

    // attempting to make the leaf stop when it hits the pot

    // it does stop but the noise at the end causes it to end on a slightly abrupt position

​

    // if (this.yPos >= 535 && this.xPos <= 425 && this.xPos >= 175) {

    //   this.ySpeed = 0;

    //   this.xoff = 0;

    // }

  }

​

  // drawing the leaf

  draw() {

    noStroke();

    fill(this.color);

    ellipse(this.xPos, this.yPos, this.width, this.height);

  }

}

​

// drawing the window frame

function drawWindow() {

  noStroke();

  fill("#130F26");

  rect(50, 250, 20, 500);

  rect(180, 250, 20, 500);

  rect(420, 250, 20, 500);

  rect(300, 150, 500, 20);

  rect(550, 250, 20, 500);

  rect(300, 500, 520, 100);

  fill(50);

  rect(300, 550, 250, 40);

}

​

// drawing the beautiful moon

function drawMoon() {

  noStroke();

  fill("#B88CAA");

  circle(300, 120, 420);

  fill("#FCDCDA");

  circle(300, 120, 350);

}

​

// aesthetic light purple sky

function drawSky() {

  fill("#9675A7");

  rect(300, 200, 500, 500);

}

​

// beziers for the Japanese tree trunk

function drawTrunk() {

  noFill();

  stroke("#301822");

  strokeWeight(25);

  bezier(300, 550, 200, 400, 450, 450, 350, 300);

  bezier(320, 420, 100, 300, 300, 450, 150, 220);

​

  // drawing pot over the trunk

  fill("#584B42");

  noStroke();

  rect(300, 550, 250, 40);

  rect(300, 730, 150, 400);

  fill(255);

}

​

// array to store all the leaf objects

let leaves = [];

​

// setting number of leaves of the tree

let numLeaves = 600;

​

function setup() {

  createCanvas(600, 600);

  rectMode(CENTER);

​

  // populating the array with leaf objects

​

  // cluster 1: topmost

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

    leaves[i] = new Leaf(170, 220, 80, 30);

  }

​

  // cluster 2: bottom-most

  for (let i = numLeaves - 400; i < numLeaves - 200; i++) {

    leaves[i] = new Leaf(200, 380, 90, 30);

  }

​

  // cluster3: rightmost

  for (let i = numLeaves - 200; i < numLeaves; i++) {

    leaves[i] = new Leaf(420, 280, 100, 40);

  }

}

​

function draw() {

  background("#8B647F");

​

  drawSky();

  drawMoon();

  drawWindow();

  drawTrunk();

​

  // drawing all the leaves and removing the ones which have reached the bottom of the canvas

  for (let i = leaves.length - 1; i >= 0; i--) {

    leaves[i].move();

    leaves[i].draw();

    leaves[i].checkForCollisions();

​

    if (!leaves[i].alive) {

      leaves.splice(i, 1);

    }

  }

​

  // choosing a random leaf to fall every 20 frames

​

  // if the leaves[] array becomes empty, it causes an error because the length is 0 but

  // the 0th element doesn't exist anymore so we provide a check for that as well

​

  if (frameCount % 25 == 0 && leaves.length != 0) {

    // choosing a random leaf index to make it fall from the tree

    index = int(random(0, leaves.length));

​

    // check if the leaf at the random index is alive and present inside the array

    if (leaves[index].alive) {

      // if yes then make the leaf fall

      leaves[index].fall = true;

    }

  }

​

  // to confirm if the array objects are being deleted

  console.log(leaves.length);

}

​