I took out the turbulence filters, because they shouldn’t have been there in the first place (at least not the way I had them). Instead, I’m planning to build a tool that makes it easy to apply filters to SVG elements. It’ll be more generally useful, since the SVG input won’t have to have come from Cirque.
Manually placing circles is partway done. (Placing them works; editing and deleting them is next on the list.)
I’m also refactoring to clean things up and to make the imperative code more functional where I can.
As schoolwork starts to wind down, I’m finally starting to make progress on the creativity tools and HCI explorations I talked about back in September. This week I’ve also realized that graphical tools for art and design are what I want to focus most on. (I do still intend to explore textual interfaces, but they’re on the backburner for now.)
In the spirit of working in public, then, Cirque is a small WIP web app I’m building for making patterns via circle packing:
This is very much a rough initial MVP. You can tweak some settings, generate new patterns using a simple circle-packing algorithm, and export SVG (with the turbulence/displacement filters enabled by default), but that’s it. Some of the features I’m planning to build next:
Replace the settings text box with, you know, good UI (I’m also excited to explore color picker design here)
Add the ability to manually place both circles and anticircles (so artists are able to create intentional negative space)
Add a way to programmatically set the circle colors (probably via something like shaders, so you could say all circles smaller than a certain size get one color and the rest get another, or circle color is dependent on position or something else)
I’ve also thought about moving the circle packing code from JavaScript to Rust, to be able to play around with WebAssembly, but it seems overkill, at least at this point. (Instead I think I’ll plan to Rust and WebAssembly on the graphical type design tool I want to build.)
I used the same circle packing technique to generate the circles, constraining them this time to be inside a larger circle. Initially I was going to have the tree visible as that larger circle — dark on a light background — but it ended up looking better to me with just the small white circles. (After that I used SVG filters and Inkscape and Photoshop as usual.)
It’s (in my opinion) a much better execution of Before the World Was, which used a quick DrawBot script that didn’t pay much attention to placement.
This time, working off the Generative Artistry circle packing tutorial, I wrote a Python script that places all the circles so there’s no overlap, then outputs an SVG with the turbulence/displacement filters I wrote about not too long ago.
For comparison (original on the left):
I also went with a slightly less saturated background in this new version, and I put a little bit of texture on the circles themselves to make it feel slightly more painterly.
