r/creativecoding

[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:

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!

Dripfetch is a customizable terminal dashboard with animated rain, system info, clocks, and YAML themes. I’d love to hear what you think or what you’d improve!

the node graph looks absolutly insane. https://i.ibb.co/DPzsNgBZ/Master-Selects-AAA-Scroll.png

I’ve been making mosaics since the late ’80s. These are twelve versions of the same portrait, made with different matching methods in my software. Some hold the face together better from a distance; others let more of the small patterned pieces come through.
Working on this sent me back through the research, from Bell Labs in 1966 to recent methods. I put what I found into a history of photographic mosaic algorithms, with a few opinions of my own:
https://www.tsevis.com/blog/history-of-mosaic-algorithms
Which version works best for you, and at what distance?

It's a vst plugin I've been building called COLORMAP. Each pixel's colour is a note, and a small viewfinder reads a 16×4 window of the picture from left to right. Move it, and the melody changes. The colour family decides which instrument plays. The chords underneath are separate from the image, so the same picture can sound very different in a different harmony. You can also upload any JPEG, PNG or iPhone HEIC and turn them into music.

When you're lucky, you'll find a sweet melody which you can instantly paste into you DAW or save it separately.

There's a free demo if you want to try it by urself. :)

If you have any questions, lmk!

Hey everyone, I made a video about the maths behind shells:) You can use it to generate any shell that exists or even shells that don't exist (yet)

Each person is one piece of glass, and its area is proportional to what they paid. Pay more and your piece grows while everyone else's shrinks.

Some of the problems that made it fun:

• Exact areas. It's a power diagram (weighted Voronoi). The weights are solved iteratively until every cell's area matches its owner's amount: first on large regions, then inside each one, so it stays fast with thousands of cells. It runs in a Web Worker so the page never freezes.
• Looking like glass at every zoom level. Tiny pieces are flat color, and they form the texture of the window seen from afar. Bigger ones get a radial glow and a painted grisaille photo made with blend modes (no pixel reads, so no CORS trouble). Lead lines thicken around big pieces, like in a real window.
• Same renderer everywhere. The live site draws it on a 2D canvas; the share cards and link previews are rendered server-side with the exact same code through Skia (@napi-rs/canvas).
• The video is the real renderer