Under Construction

How does rain work?

p5.js Web Editor




Simulation Review

Data Structures


You’ve probably used graph paper to draw ordered pairs of the form , so you have a solid foundation for working with vectors. As we progress, you will see that these geometric objects make modeling and animation much simpler.

Let’s say the point has coordinates relative to the origin. We would express the same idea as using vector notation. has components and . You can create vectors in p5.js like so.

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

function draw() {
  let firstPoint = createVector(100, 50);
  point(firstPoint.x, firstPoint.y);

Create a few vectors and use them to draw points in a straight line.

Vector addition is a useful operation that combines the components two vectors. You could visualize vector addition by placing the tail of one vector at the head of another.

Algebraically, we would compute vector addition as .

If and , then .

Vectors support a number of useful operations in addition to addition—we’ve barely scratched the surface!


let position;
let velocity;
const numDrops = 100;

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

function draw() {
  if (mouseIsPressed) {
    background(255, 120);
    stroke(50, 100, 150, 30);
  } else {
    background(50, 100, 150, 120);
    stroke(200, 30);

  for (let i = 0; i < numDrops; i += 1) {
    point(position[i].x, position[i].y);
    if (position[i].y > height) {
      position[i].y = 0;

Data Structures Review

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.