Week 3 Assignment – Khalifa Alshamsi

 

For this assignment, I drew inspiration from the rainfall in the UAE this past weekend, a truly cherished occurrence. Given my lack of color perception, I aimed to infuse this natural phenomenon with a vibrant spectrum of colors.

The Sketch:

Description:

The sketch simulates colorful raindrops falling against a light lavender background, which Is meant to be a blue-tinted window on a foggy morning; at least, that’s the color I see when I look at it. Each ‘raindrop’ object tracks its position, speed, and color. The raindrops reset once they fall off the bottom of the canvas, simulating a continuous rainfall.

Script:

// Defing the Raindrop's class 
class Raindrop {
  constructor() {
    this.x = random(width);
    this.y = 0; // Start from the top
    this.length = random(10, 20);
    this.speed = random(1, 5);
    this.color = color(random(255), random(255), random(255), 200); 
    // Semi-transparent
  }

  // Method to update raindrop properties for each frame
  fall() {
    this.y += this.speed;
    // Reset the drop when it goes off screen
    if (this.y > height) {
      this.y = 0;
      this.x = random(width);
      this.color = color(random(255), random(255), random(255), 200);
    }
  }

  // Method to draw the raindrop
  show() {
    stroke(this.color);
    line(this.x, this.y, this.x, this.y + this.length);
  }
}

let raindrops = []; // Array to hold Raindrop objects
const numDrops = 400; // Total number of raindrops

function setup() {
  createCanvas(640, 684);
  // Initialize raindrops
  for (let i = 0; i < numDrops; i++) {
    raindrops.push(new Raindrop());
  }
}

function draw() {
  background(230, 230, 250); // Light lavender background
  // Update and draw each raindrop
  raindrops.forEach(drop => {
    drop.fall();
    drop.show();
  });
}

Problems Encountered:

The challenge was ensuring the raindrops’ continuous flow and dynamic color changes without creating visual clutter. To address this, I implemented a reset mechanism for each raindrop once it fell off the screen and used semi-transparent colors to soften the visual impact.