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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// 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();
});
}
// 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(); }); }
// 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.

Leave a Reply