osbulbul

Lab experiment

Moving Curves

A grid of points animated by 2D simplex noise, connected row by row with quadratic curves and colored using a procedural gradient.

CanvasNoiseJavaScript

Controls

Columns 100
Rows 2
Line width 10
Frequency 0.0005
Amplitude 40
Curving X 1
Curving Y 50
Options

300

Points

60

FPS

0

Frame

How it works

A grid of points is generated based on the columns/rows settings, each one remembering its original position (ix, iy). Every frame, 2D simplex noise offsets each point from its original position, so the whole grid ripples smoothly over time without ever repeating exactly.

Points in the same row are connected with quadraticCurveTo, using the next point's offset position as the curve's control point — that's what turns a grid of dots into flowing, ribbon-like lines instead of straight segments.

Color comes from the colormap library's summer palette, assigning each column a fixed hue so the gradient stays consistent even as the points move. Changing Columns, Rows, or Line width regenerates the grid; the rest of the controls just change how it moves.