Skip to main content

Creative coding

Draw with rules, then change them

Neural Drift

I built a procedural-art workspace in p5.js with controls for particle flow, color, and trails. Numbered seeds let you revisit a starting point and try another direction.

View original
Neural Drift seed and particle controls beside a dark canvas of flowing teal trails

Seed 12345 and the particle controls beside the evolving canvas. This is a still from the running application; open the project to see the motion.

Source: Original capture of Neural Drift · 17 September 2026

Contribution
Interaction design and creative development
Facts
My work
Personal creative-coding project and interactive control design
Built with
JavaScript, p5.js, HTML, and CSS
Technique
Layered noise fields and local particle alignment

The controls are part of the artwork

Neural Drift starts with particles moving through a changing flow field. Their paths form an image over time. I made the rules adjustable so the experience is something to explore while it runs.

Particle count changes the density. Flow intensity and noise scale change the movement. Trail persistence controls how much of the previous motion remains visible. Each control keeps its numerical value beside it, connecting the setting to what appears on screen.

Explore without losing your starting point

A random result is easy to find and easy to lose. The seed field gives the experiment a reference point. Previous and Next move through numbered seeds; Random Seed starts a different exploration.

The implementation seeds both the random positions and the noise field when it restarts the particles. Reset restores the original parameters. A seed identifies the starting conditions, while the animation continues to evolve frame by frame.

A starting point, then a moment worth keeping

View original
Exported Neural Drift artwork with teal particle trails curling across a dark square canvas

Seed 12345, 1,200 particles, and the default controls. I used Download PNG in a local replay of the reviewed source on 20 September 2026. This is one moment in the animation; the seed does not specify when to stop drawing.

Source: Original PNG export · pinned source ce5c2f8a · lossless WebP conversion

Revisit the setup. Save the result.

A numbered seed lets me return to the starting conditions. A PNG keeps the frame I chose. Those are different promises, so the interface gives each its own control.

Give the motion a palette

Color, trails, and an export action

View original
Color controls, Reset, and Download PNG beside a flowing particle canvas

Separate controls set the slow-particle, fast-particle, and background colors. Download PNG saves the current canvas. The control is shown here in the September 17 capture; the export above was exercised in a pinned local replay on September 20.

Source: Original capture of Neural Drift · 17 September 2026

Particle speed determines the blend between two selected colors. A separate background control changes the field beneath them. Color becomes part of the behavior, rather than a filter applied after the image is made.

Underneath the interface, p5.js draws the particles. Layered Perlin noise guides the broader flow, while nearby particles influence one another. A spatial grid limits the neighbor search. This is procedural animation, not a trained neural network or a text-to-image service.

Results

  • A browser-based artwork with adjustable motion, color, and starting conditions.
  • A compact creative-coding project that connects visual exploration to numerical controls.

Evidence limit

Seed navigation, a keyboard adjustment to particle count, and Reset were inspected on 17 September 2026. PNG export was exercised in a local replay of source revision ce5c2f8a on 20 September 2026. The algorithm was reviewed in source. No performance benchmark or full accessibility audit is claimed.

Resume and contact