# Rainfall

Under Construction

How does rain work?

## Data Structures

### p5.Vector

You’ve probably used graph paper to draw ordered pairs of the form $(x, y)$, 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 $p$ has coordinates $(100, 50)$ relative to the origin. We would express the same idea as $\vec{p}=(100, 50)$ using vector notation. $\vec{p}$ has components $p_x=100$ and $p_y=50$. You can create vectors in p5.js like so.

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

function draw() {
background(220);
strokeWeight(5);
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 $\vec{p}+\vec{v}=(p_{x}+v_{x}, p_{y}+v_{y})$.

If $\vec{p}=(100, 50)$ and $\vec{v}=(100, 200)$, then $\vec{p}+\vec{v}=(100+100, 50+200)=(200, 250)$.

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

### Arrays

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);
}

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