Color Palettes, Leaf Music, and NeuralSVG

#087 Creative Coding / Generative Arts Weekly

Chris Ried

Feb 16, 2025

Courage is the belief in self, and the possible ability to prevail in the face of adversity. - Tony Dovale

Another month has already gone by.

Hope you are able to continue plugging away creating or learning about beautiful things.

Personally I’ve been working on the following…

Color Palette Generator

I’ve been working heavily in the browser in my day job and have really been trying to dig into the depths of the browser outside of the normal frameworks (aka Svelte, React) to really get an understanding on the interaction between the browser.

One thing I’ve been wanting to do was create generative color palettes. But first, Procreate.

I’ve been a user or fan since Procreate was released many years ago.

After seeing palettes on Etsy and other sites I thought it would be interesting to recreate this. So I embarked on understanding the file format (zipped JSON file), and then started working to generate color palettes.

It’s a simple site, but it’s been a fun learning experiment. Hope you might find it useful.

Limitations:

I’ve been still working on the color selection algorithms, they don’t quite work the way I’d like for them to but this is at least a start and generally I’m producing some nice results.
Image saturation / brightness sometimes works.
It is only useful on a computer right now.. I haven’t really further refined it for a mobile device.

I’m still working on refining the project.. but it is 80% of the way there and I really enjoy creating this.

Let me know what you think, share your palettes and I’d love any feedback on browsers. I’m using a rather modern computer and haven’t tested it out much outside of my Mac.

Tutorials & Articles

The Irrepressible Loopiness of Leaf Music

In the unique composition "Leaf Loops," the creator embarks on an innovative musical journey by tracing the perimeter of a leaf and transforming this natural contour into a captivating piece of music. Utilizing a Python script to convert the leaf's outline into data, the composition is crafted by mapping radial distances to musical pitches—longer distances yield lower pitches, while shorter ones produce higher sounds. The piece evolves through various experimental techniques, including different pitch mappings and rhythmic patterns that follow the leaf’s edge. This exploration not only challenges traditional music composition but also merges natural forms with digital technology to create an evolving soundscape that mirrors the intricate patterns of nature.

Much of this is more procedural in nature, yet it show the cleverness that can come..

3D Words With Some Perspective

If you have ever wondered how to create a 3D model in which two different orientations could create two different words, check this out from a Hackathon over at FormLabs. I had been looking around for a way to make models that will look different depending on the perspective they are looked and came across this.

Generating an infinite world with the Wave Function Collapse Algorithm

This article describes how I generate an infinite city using the Wave Function Collapse algorithm in a way that is fast, deterministic, parallelizable and reliable. It's a follow-up to my 2019 article on adapting the WFC algorithm to generate an infinite world. The new approach presented in this article removes the limitations of my original implementation. I first mentioned these ideas in this Twitter thread.

Wave collapse functions is heavily used in games but you can see the power by which this can produce quite complex looking content.

Introduction of Graph Search Algorithms

Graph search algorithms let us find the shortest path on a map represented as a graph. Move the blob (start point) and cross (end point) to see the shortest path found by the A Algorithm*:

The next article in the series starts here.

Somewhat more Physically Based Rendering

The page was originally based on a primer of PBR (Physically Based Rendering) using Unity as the primary example. However, since I found that almost all of the main concepts are explained in detail in implementable forms on LearnOpenGL.com, I have rewritten the page so that you can run all the samples in a browser. As a result, this page has become pretty much a visual summary of what I have learned from LearnOpenGL.com. Most of what is written on this page is also described in more detail in the links.

NeuralSVG: An Implicit Representation for Text to Vector Generation

Vector graphics are essential in design, providing artists with a versatile medium for creating resolution-independent and highly editable visual content. Recent advancements in vision-language and diffusion models have fueled interest in text-to-vector graphics generation. However, existing approaches often suffer from over-parameterized outputs or treat the layered structure --- a core feature of vector graphics --- as a secondary goal, diminishing their practical use. Recognizing the importance of layered SVG representations, we propose NeuralSVG, an implicit neural representation for generating vector graphics from text prompts. Inspired by Neural Radiance Fields (NeRFs), NeuralSVG encodes the entire scene into the weights of a small MLP network, optimized using Score Distillation Sampling (SDS). To encourage a layered structure in the generated SVG, we introduce a dropout-based regularization technique that strengthens the standalone meaning of each shape. We additionally demonstrate that utilizing a neural representation provides an added benefit of inference-time control, enabling users to dynamically adapt the generated SVG based on user-provided inputs, all with a single learned representation. Through extensive qualitative and quantitative evaluations, we demonstrate that NeuralSVG outperforms existing methods in generating structured and flexible SVG.

Unfortunately the code has yet been posted for this project. However I can find this to have many interesting uses not to produce images, but raw materials that then can be further iterated.

Art with a Blender Python Script

This tutorial dives into the art of Blender Python scripting to create dazzling generative visuals. You’ll learn how to wield the power of code to transform Blender’s workspace—setting a pitch-black backdrop, switching to the Cycles render engine, and crafting perfect square resolutions. From dynamically positioning cameras and lighting to conjuring up a mesmerizing particle system with wild turbulence effects, the tutorial delivers creative sparks at every step. The pièce de résistance? A custom Shader node material that makes particle strands glow with a radiant, artistic flair. Packed with tips for optimizing your script and making it reusable, this guide is your gateway to coding jaw-dropping art.

Creating Generative Artwork with Three.js

Develop a dynamic, generative artwork using Three.js and grid systems, inspired by Lygia Clark’s minimalist geometric designs.

Thought this is a through and well thought out tutorial with alot of code and live examples making it well work the time to read.

Events

Following are some events across the world that are specific to graphics and coding..

VISIGRAPP 2025: International Joint Conference (Porto, Portugal) - February 26-28
PerGraVAR: Second International Workshop on Perception-driven Graphics and Displays for VR and AR (Saint-Malo, France) - March 8-9
EUROGRAPHICS 2025 (London, UK) - London, UK - May 12-16
GMP 2025 – International Conference on Geometric Modeling and Processing (St. Louis, MO)