let colors = {

  uk: ["#577455", "#8C3F4D", "#6B8E9B"], // Muted green, Burgundy, Desaturated blue-gray

  ny: ["#EE8838", "#F4F2EF", "#6B8E9B"], // Warm orange, Soft off-white, Desaturated blue-gray

};

​

function setup() {

  createCanvas(600, 600);

  // Create 200 raindrops and store them in the drops array

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

    drops.push(createDrop()); // Use a function instead of class constructor

  }

}

​

function draw() {

  background(34, 34, 34, 25); // Dark background with slight transparency

​

  // Update and display each raindrop

  for (let drop of drops) {

    fall(drop); // Update position based on gravity

    show(drop); // Display the raindrop on the canvas

  }

​

  // Draw circular self-portrait in the center of the canvas

  fill(244, 242, 239, 45);  // Soft off-white for the circle with transparency

  stroke(244, 242, 239, 100); // Soft off-white for the circle outline

  ellipse(width / 2, height / 2, 200, 200); // Draw the circle at the center

}

​

// Function to create a single raindrop with all necessary properties

function createDrop() {

  let drop = {}; // Create an empty object to represent a drop

  drop.x = random(width); // Random x-position on the canvas

  drop.y = random(-500, -50); // Random starting y-position above the canvas

  drop.z = random(0, 20); // Depth value (used for speed, length, etc.)

  drop.len = map(drop.z, 0, 20, 10, 20); // Length of the raindrop based on depth

  drop.yspeed = map(drop.z, 0, 20, 1, 20); // Speed of the raindrop based on depth

  drop.type = random() > 0.5 ? "uk" : "ny"; // Randomly choose between UK or NY color schemes

  drop.color = color(random(colors[drop.type])); // Set the color from the chosen scheme

  return drop; // Return the drop object

}

​

// Function to simulate the fall of the raindrop

function fall(drop) {

  drop.y += drop.yspeed; // Update the y-position by adding the current speed

  let grav = map(drop.z, 0, 20, 0, 0.2); // Gravity increases with depth

  drop.yspeed += grav; // Accelerate the drop based on gravity

​

  // If the drop reaches the bottom of the canvas, reset its position to the top

  if (drop.y > height) {

    drop.y = random(-200, -100); // Reset y-position above the canvas

    drop.yspeed = map(drop.z, 0, 20, 4, 10); // Reset speed based on depth

  }

}

​

// Function to display the raindrop on the canvas

function show(drop) {

  strokeWeight(map(drop.z, 0, 20, 1, 3)); // Adjust the thickness of the raindrop based on depth

  stroke(drop.color); // Set the stroke color to the raindrop's assigned color

  line(drop.x, drop.y, drop.x, drop.y + drop.len); // Draw the raindrop as a vertical line

}

​