Experimenting with Perlin Noise and Line Vectors in P5JS (JavaScript)

Experimenting with the Perlin noise algorithm discussed in the Nature of Code. Different to complete randomness, Perlin Noise has a smoother visual quality which lends itself to a broad number of applications, such as terrains and graphics textures for video games.

These experiments originated from applying noise to generic factors (shapes and colour). They became more evocative when they moved into offsetting the positions between line elements. Some of these examples begin to take on an almost three-dimensional quality. Check out the introduction chapter of the Nature of Code video series to learn more.

Perlin noise example using alpha

Line vector origin top left

Line vector horizontal direction

Line vector horizontal with increased noise offset

Line vectors diagonal direction