Periodic Loop

Following along Etienne Jacob's tutorial about implementing periodic functions with offsets in Processing. This, of course, is P5.js, so I'm adapting the code as I go.

This tutorial breaks down these looping images in three parts:

1. a periodic function over [0,1];
2. a specific change to make based on the value of the periodic function; and
3. an offset function that applies different values across the sketch.

Here are a few interesting observations I made while making this sketch.

Flipping the Offset Sign

If you flip the sign between t and offset when computing the radius of each dot, the sin waves will appear to move inward, toward the center, instead of outward.

context.circle(cx, cy, this.dotSize(t - offset));

Easier Grids with map()

Creating a grid of dots is a whole lot easier than I thought. This sketch has been a good lesson in keeping things simple and not over-abstracting too early.

for (let y = 0; y < ROWS; y++) {
    for (let x = 0; x < COLS; x++) {
        const cx = context.map(x, 0, COLS - 1, -300 + MARGIN, 300 - MARGIN);
        const cy = context.map(y, 0, ROWS - 1, -300 + MARGIN, 300 - MARGIN);
        context.circle(cx, cy, 4);
    }
}

Using map() is killer. You can map an index value from the range of rows into the range of pixel values for the center point. This sketch is 600 px wide and tall, and the origin is at the center (it's in WEBGL mode), so these map calls convert from row and column indexes to pixel values, accounting for some margin.

dist() Stands for "Distance"

dist() is a function in the P5 library that calculates the distance between two points. The lack of specificity in the name of this function has tripped me up several times. I thought it stood for "distribute" or "distribution" on more than one occasion.