Perlin noise mapped to angles at each grid cell creates a smooth flow field that steers particles or arrows organically

p5.js noise(x, y) returns values in [0,1] that vary smoothly across 2D space — unlike random(), neighbouring coordinates give similar values. Mapping noise output to an angle (multiply by TAU) and drawing an arrow or moving a particle in that direction at each grid cell creates a flow field: a continuous vector field that looks organic and structured. noiseDetail(octaves, falloff) stacks multiple noise layers at increasing frequencies and decreasing amplitudes (like musical octaves), adding fractal detail. Scaling the noise input coordinates controls coarseness: small range gives broad, slow variation; large range gives tight, rapid variation.

Examples

noiseDetail(octaves, falloff); var noiseX = map(gX, 0, gridW, 0, mouseX/100); var angle = noise(noiseX, noiseY) * TAU; // draw arrow at angle — varying mouseX changes field coarseness in real time. M_1_5_01.

Assessment

Build a 20x20 grid of arrows steered by a Perlin noise field. Add a key that toggles noiseDetail between 1 octave and 4 octaves, and describe how the field texture changes.