I spent way too much time on this, but it's totally worth it (p5.js + react)
[SOUND ON! 🔊]
This 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:
- 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!)
- I have a degree in maths
- 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!