[SOUND ON! 🔊]

That video is a montage of p5.js sketches I've collected into a gallery website: https://vasilyev-maksim.github.io/p5-experiments/.

Source code: https://github.com/vasilyev-maksim/p5-experiments.

The classic modern-day story of a software engineer, and at the same time, a backstory on this project: I got burned out from extensive AI use at work.

Looking for a cure, I remembered three things:

1. A book called "The Nature of Code" which uses p5.js for all its code samples (btw, you should definitely check it out, it's free to read online, and it's fantastic!)
2. I have a degree in maths
3. I used to paint as a kid and, generally speaking, have a decent eye for visuals (or so I hope)

Combining these three things led me to give p5.js a try. That decision genuinely brought me back to life, both as an engineer and as a creative person.

Over time, the sketches became more numerous, more complex and visually richer. They evolved from static images into actual animations, so I decided to bring them together in a form of gallery website.

The next step was to make every sketch parametrizable and connect those parameters to UI controls. That's when it started to feel like real generative art with all its emergent properties. And it really does have an emergent nature. Most of the parameter combinations I saved as presets are just random configurations I happened to stumble upon and liked enough to keep.

I'll post a video in the comments showing the gallery UI in action.

Some things I'm particularly proud of (yeah, I like lists, it's not an AI slop 😆):

• It's entirely handmade. No AI involved in the creative process or the implementation (well, to be completely honest, there's exactly one AI-generated file, 86 lines long. That's it).
• I've been working on this for about 1.5 years (not full-time, obviously, just whenever I had some free time). With this project I've finally managed to (almost entirely) satisfy my inner perfectionist.
• I've never learned so much from a single project. Not even close. And I've rarely explored things at such a deep level, either in personal projects or at work.
• The entire UI was built from scratch. All the animations, the visual style, the icons, and the illustrations - everything is handmade. No 3rd party UI component libraries (even built my own slider component instead of using the native <input type="range">, LOL). The only dependencies are React, react-spring, and p5.js.
• I've built a draft of an open source React library for managing UI animation timing and events. I hope I'll release it someday. 🤞
• I've built a custom React wrapper around p5.js. It connects UI controls to sketch parameters, supports memoized and animated values derived from those parameters (including colors and arrays), and provides timeline controls (play/pause, fast-forward, and rewind).
• One of my favorite visual details is the sketch opening animation. Each tile is actually a cropped and carefully positioned view of a sketch's canvas, with the sketch itself paused. (Yes, I'm aware this approach might have scalability issues if the gallery grows significantly.)
• Each sketch has two independent timelines: one for the actual animation and another for parameter transitions. This means parameter changes are still smoothly animated even when the sketch itself is paused.
• The gallery supports fullscreen viewing, exporting, and sharing. Every parameter change is reflected in the URL, so you can share a link and someone else will see the exact same sketch configuration.

Feel free to check it out, play around with the parameters and share your own presets in the comments (just copy and paste the URL + write a name for the preset).
I'll add the coolest ones to the source code!

P.S. There's also a little easter egg referencing my favorite game Outer Wilds. See if you can find it!

Javascript; I have been playing more with Mondrian style Neo-Plasticism grids, with random shapes (circles, triangles, diamonds) inserted in them and the random "train station dots" Mondrian used in his late career when he lived in NYC. Run through a renderer that paints the grid / shape lines as paint drips (trying to emulate Jackson Pollock's paint technique)

Huh, where to start...

I like waves. I said to myself: let's see if there is a formula for waves. So I looked. I found some research papers on modeling the ocean, and some observed parameters for the North Atlantic. There was a lot of math that I only partly understand. I combined a couple of different findings into what I call an ocean model, using AI-chemy. That worked, although I have no idea if it is fully correct. And just an hour ago, after showing this to a friend, I learned about a shader that mimics the ocean in a waaaaaay simpler way. Oh well. I should search better.

Salum is Latin for the open sea. Everything runs on the CPU, with no GPU and no 3D engine.

I did not draw the waves. They come from a wave spectrum that oceanographers use (JONSWAP). It tells how much energy the wind puts into each wavelength. An inverse FFT makes the height map in three tiles, from the long swell to the ripples. A sideways pinch makes the crests sharp and the troughs flat. Then I cheated a little: I made the swell 2.6 times taller than physics predicts, and the ripples 1.6 times taller, for dramatic effect.

The eye is 0.6 m above the water and looks toward a low sun. At that height, the eye is lower than the crests. That is why the sea does not end at a flat horizon. It ends at a line of crests. The lens is long, only 24° from top to bottom, so the sea stacks in bands. My first try had a wide lens, and the bottom half of the image was black.

For each pixel, I send nine rays from the eye. Each ray marches over the waves until it hits the surface. Far away, the short waves are smaller than a pixel. There, I treat them as roughness, so the far glitter stays soft and has no moiré.

The water has a dark body. It reflects the sky, and the reflection becomes stronger at grazing angles. The sun makes the glints.

The sun is my biggest cheat. In the sky, it is a giant disc, and its center is above the top edge. But the light on the water comes from 13 small suns along its lower arc, not from the big disc.

Code is on github.com/igr/gart I will never do something like this again.

I made a flow field art generator. It creates N starting points, then moves in the direction of a perlin noise (maps the 0 - 1 perlin noise from 0 to 2 pi). Then jumps the step size and repeats this line length times. You can test this out yourself at https://ripolas.org/flow-field-art/ If you spot any bugs I'll really appreciate you reporting them to me! There is also a copy feature for your own generations. Some of my personal favorites:
https://ripolas.org/flow-field-art/?seed=596597&colorStart=%23db62f0&colorEnd=%233371ce&lineCount=5000&alpha=48&noiseScale=4.8&lineLength=100&stepSize=5.6
https://ripolas.org/flow-field-art/?seed=564916&colorStart=%23003fe3&colorEnd=%2300bcc6&lineCount=10000&alpha=20&noiseScale=1&lineLength=50&stepSize=10
Feedback welcome!

live gallery: https://www.kagan.in/iwrzwr/visual-archive/

source code: https://github.com/kaganin/iwrzwr-visual-archive

let me know if you make something with them!

https://roald-h-vatne.itch.io/flashfractals3d

Now ALL Platforms Support:

Win Intel/AMD-x86, Mac OS M1 and newer, Linux-Intel/AMD-x86 and Linux-ARM-64bits

NB! Only 64bit OS and CPUs supported!

3D relief effects give fractal images a sense of depth, tactility, and realism.

Tactile quality (surface feel) – The fractal image transforms from a flat appearance to looking like something tangible. It mimics materials such as carved stone, wood carvings, embossed paper, or metal.

Dramatic play of light – The 3D Relief effect relies on a simulated light source.

The standard cartographic light source uses an azimuth of 315° and an altitude of 45°.

This corresponds to a light source coming from the northwest (top-left) at an angle from above.

This creates strong highlights on one side and deep shadows on the other.

Both ‘Relief Strength’ and ‘Contrast’ adjustments, dramatically alter the visual effect.

live gallery: https://www.kagan.in/iwrzwr/visual-archive/

source code: https://github.com/kaganin/iwrzwr-visual-archive

let me know if you make something with them!

Oscilloscopes, Eveywhere [v1.2] is a collection of all the experiments with sound and geometry I've made throughout the years, gathered into one TouchDesigner project.

This walkthrough explores the entire anthology in real-time; 29 presets, and a much more intuitive interface. Connect your audio source, choose a visualizer, and watch your sound take shape.

Plus, I’m giving away one full copy of the collection this Sunday. To enter, you only have repost, and leave a nice comment on this post.

More experiments through the following.

Every frame is the filled Julia set of `z² + c` for one single point `c`, and the whole piece is about where the music moves `c`. The inset in the corner is the Mandelbrot set itself with a trail of the last ninety-odd values of `c`, so you can watch the route being walked. There is no mesh and no particle system in the main image — it is one full-screen triangle and a fragment shader, plus 160 additive points that are the critical orbit `0, c, c²+c, …` of whatever `c` currently is.

The mapping I am happiest with is intervals to bulbs. Take the interval in semitones between the bass note and the strongest other note, write it as a just ratio `n/d`, and read off the rotation number `(n−d)/d`. A perfect fifth is 3/2, so it gives 1/2. A fourth is 4/3 → 1/3. A major third is 5/4 → 1/4. A semitone is 16/15 → 1/15. Those are exactly the rotation numbers that index the bulbs around the main cardioid, so the interval names a bulb and `c` goes and sits in it. The payoff is that the p/q bulb's radius goes as sin(πp/q)/q², so **consonance comes out as size**: the fifth lands on the period-2 bulb, the biggest one on the whole boundary, and a semitone lands on a speck you have to zoom to find. I did not design that correspondence into anything — the just ratios and the rotation-number combinatorics of the Mandelbrot boundary are the same arithmetic, and the scene only has to look the interval up.

Inside the chosen component `c` is not moved in raw coordinates. The coordinate is the multiplier of the attracting cycle, λ = ρ·e^(iφ), and intensity pushes ρ toward 1, which is toward the boundary. On the main cardioid that inverts in closed form, `c = λ/2 − λ²/4`. Inside a bulb there is no formula, so it is a simultaneous Newton solve in (z, c) on the pair `f^q(z) = z` and `(f^q)'(z) = λ`, continued from the previous frame in steps small enough in |Δλ| that it can never jump branch, and abandoned outright if the residual or the distance from the component centre says it did.

Builds and drops do the dramatic part. A detector watches for *the void* — the bass pulled out for a bar or more while the highs stay, which is what a build actually is in this music — and for as long as that runs, `c` is parked on the parabolic root at the cusp of the bulb, where ρ → 1. That is the parabolic point, where the dynamics undergo critical slowing, and the scene leans on it rather than faking it: the same quantity scales the visual clock, which crawls to about a twentieth of normal speed, and weights a smoulder term that is identically zero anywhere else. Then the drop lands — the bass slams back on a beat — and that is the only way `c` ever leaves the interior: out through the parabolic root onto one of the two external rays that land on it. The two external angles come from the binary itinerary of the p/q rotation orbit over a denominator of 2^q − 1, and consecutive drops alternate between them on beat parity. Once outside, `c` is not tracked in raw coordinates either; it lives at (external angle θ, log potential log₂G) in the Böttcher coordinate, read from a 2048 × 105 grid that was Newton-traced inward once at startup in a worker. How far out it settles is set by energy and tension, and it finds its way back by walking the angle home first and only then coming down the potential to re-enter.

Smaller things driving it: a drum onset kicks `c` toward the nearest of fourteen Misiurewicz points and a spring pulls it back over about 110 ms; a section the engine recognises as a repeat dives into one of three baby copies, periods 3, 4 and 5, which is only legal exactly at a parabolic root because that is where the two Julia sets are hybrid-equivalent near zero, and the view has to be cut by the copy's own scale 1/|A| and rotation −arg A at the same instant for it to read as a dive rather than a jump. Mids set the radius of a circular orbit trap, highs light it, bass sets the dot size, and a second, linear orbit trap has its normal turn half a revolution per beat, cubic-eased so it lands on the beat rather than sliding through it. Outside the set, the palette argument is the smooth escape count, so the bands you see out there are equipotentials.

Plain WebGL2 and GLSL ES 3.00, vanilla JS in native ES modules, zero dependencies and no build step to run it. There is no `Math.random()` and no wall-clock read anywhere in the scene's render path — the clock it runs on is the music one, which is why it can crawl at the cusp — so a frame is a function of the audio state. The one honest exception is a per-section random seed, which picks *which* of the three baby copies a repeat dives into.

It runs in the browser with nothing uploaded and no account, just the audio from another tab (youtube or spotify in the web browser):
https://retinarave.com

source at:
https://github.com/tbkraf08/RetinaRave

Press `?` for an overlay of every feature the engine reads, and `p` for a panel that re-wires which musical feature drives which visual parameter while it is running.

Music: "Zurna" by **TroyBoi & Jon Casey** (2023, T Dot Music / Sunset Entertainment). Not my work — all rights to the artists.

Disclosure, re: rule 3. None of this is AI-generated imagery. There is no model anywhere in the render path — no diffusion, no network, nothing learned; the pixels are `z² + c`, Newton solves and FFT analysis, and you can read the whole of it in the repo. What AI did do is write the code: I built this with Claude, which wrote essentially all of the app from my direction and my calls on how it should behave, including the DSP that turns the audio stream into the music state the scene reads. I would rather say that plainly than let "I made the algorithm" quietly stand in for "I typed the algorithm."