Rainfall

Under Construction

How does rain work?

p5.js Web Editor

Simulation

Motion

Randomness

Simulation Review

Data Structures

p5.Vector

Arrays

Data Structures Review

let position;
let velocity;
let strength;
let sky;

function setup() {
  createCanvas(400, 400);
  strength = 100;
  sky = color(220);
  position = new Array(strength);
  velocity = new Array(strength);
  for (let i = 0; i < strength; i = i + 1) {
    position[i] = createVector(random(width), random(height));
    velocity[i] = createVector(0, random(2, 3));
  }
}

function draw() {
  background(sky);
  strokeWeight(5);
  for (let i = 0; i < strength; i = i + 1) {
    position[i].add(velocity[i]);
    point(position[i].x, position[i].y);
    if (position[i].y > height) {
      position[i].y = 0;
    }
  }
}

function mousePressed() {
  // flash
  sky = color(255);
}

function mouseReleased() {
  // back to normal
  sky = color(220);
}

Project Ideas

Forces Add wind and gravity.

Precipitation Animate different types of precipitation (hail, snow, etc.).


This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.