Rainfall

Under Construction

How does rain work?

p5.js Web Editor

Simulation

Models

Physics

Noise

Simulation Review

Data Structures

p5.Vector

Arrays

Data Structures Review

let stormStrength;
let position, velocity, acceleration;
let t, dt;
let wind, gravity;

function setup() {
  createCanvas(400, 400);

  stormStrength = 1000;
  position = new Array(stormStrength);
  velocity = new Array(stormStrength);
  acceleration = new Array(stormStrength);
  t = createVector(0, 10000);
  dt = createVector(1, 1);
  wind = createVector(0.01, 0);
  gravity = createVector(0, 0.01);

  for (let i = 0; i < stormStrength; i++) {
    let x = width*noise(t.x);
    let y = height*noise(t.y);
    position[i] = createVector(x, y);
    velocity[i] = createVector(1, 1);
    acceleration[i] = createVector(0, 0);
    acceleration[i].add(gravity).add(wind);
    t.add(dt);
  }

  strokeWeight(2);
}

function draw() {
  background(220);

  for (let i = 0; i < stormStrength; i++) {
    push();
    translate(position[i].x, position[i].y);
    point(0, 0);
    pop();

    acceleration[i].sub(wind);
    wind.x = map(noise(t.x), 0, 1, 0, 0.02);
    acceleration[i].add(gravity).add(wind);
    velocity[i].add(acceleration[i]);
    velocity[i].limit(15);
    position[i].add(velocity[i]);

    if ((position[i].x > width) || (position[i].y > height)) {
      let x = width*noise(t.x);
      let y = height*noise(t.y);
      position[i] = createVector(-abs(x), -abs(y));
    }

    t.add(dt);
  }
}

Project Ideas

Interactivity Make wind respond to your mouse position.

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


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