home p5.js Reference

Sine Rain

Here I use the Floor function combined with the Modulus function to replicate the kind of functionality you would want from a for-loop. I don't recommend programming like this, but it is here for educational value.

A better approach to creating rain would be to use the Random function and For-loops.

function setup() {
    createCanvas(400, 300)
    background(0);
}

let t = 0;
function draw() {
    background(0,20);
    noStroke();
    circle(
        width/2 * Math.sin(100 * Math.floor(t / height)) + width/2,
        t % height,
        5);
    circle(
        width/2 * Math.sin(100 * Math.floor((t + 1241)/ height)) + width/2,
        (t + 1241) % height,
        5);
    circle(
        width/2 * Math.sin(100 * Math.floor((t + 3141)/ height)) + width/2,
        (t + 3141) % height,
        5);

    stroke(255);
    textSize(30);
    text(t, 2, 25);
    t = t + 3;
}