,
27 tweets,
9 min read
Read on Twitter
..testing a wildly-complex creature-generator pipeline in Python-modified SVG. 
The problem:
I often want to create hand-drawn* vector components to use in Twitterbots, generative art, etc
How do I efficiently create drawings in Illustrator, while also annotating metadata like IDs, attach points, etc, available for later manipulation?
(*well, wacom-drawn)
I often want to create hand-drawn* vector components to use in Twitterbots, generative art, etc
How do I efficiently create drawings in Illustrator, while also annotating metadata like IDs, attach points, etc, available for later manipulation?
(*well, wacom-drawn)
For "EveryonesAI", I had all of @google's Quickdraw path data, as JSON files.
I wrote Python to slurp the path data, turn it into SVG, store the SVG as rules in a Tracery grammar, then upload the whole mess to cheapbotsdonequick.com
I wrote Python to slurp the path data, turn it into SVG, store the SVG as rules in a Tracery grammar, then upload the whole mess to cheapbotsdonequick.com
@Google This was also necessary because the full Google datasets were HUGE.
Just look at the size of this banana.ndjson.
Just look at the size of this banana.ndjson.
@Google Fortunately, for that project, all Quickdraw paths had a uniform size.
Also I had chosen not to use additional placement information. Where should the faces go? In the direct center of the drawing!
Despite being a lazy-bad solution, the effect was both charming and emergent.
Also I had chosen not to use additional placement information. Where should the faces go? In the direct center of the drawing!
Despite being a lazy-bad solution, the effect was both charming and emergent.
@Google But for a number of other bots, I wanted more control over my paths.
E.g. my @TaikaWaititi twinset generator. The goal was to get a bunch of Taika photos, trace shapes in illustrator, then use those as SVG masks in CBDQ.
But it was too arduous to trace+annotate, so I gave up.
E.g. my @TaikaWaititi twinset generator. The goal was to get a bunch of Taika photos, trace shapes in illustrator, then use those as SVG masks in CBDQ.
But it was too arduous to trace+annotate, so I gave up.
@Google @TaikaWaititi Present day:
I want to make a deck of cards with procedural animal parts on them, to make a generative deck like those flippy mix-n-match books we had as kids.
I want to make a deck of cards with procedural animal parts on them, to make a generative deck like those flippy mix-n-match books we had as kids.
I'll want several different torso configurations, but each one will have hand-authored positions for where limbs and decorative pieces will go.
SO:
Here's what I've done (feel free to use as a model for your own work)
Here's what I've done (feel free to use as a model for your own work)
A major discovery that made this possible:
Illustrator will actually output SVG file *with IDs*...
✨...based on your layer names✨
Illustrator will actually output SVG file *with IDs*...
✨...based on your layer names✨
You can even *name* your individual paths in the Layer window!
If you make a bunch of layers, edit them individually, and turn them all visible before saving, you can save out *all of your paths* in one mammoth weird SVG file, and then use the IDs to take it apart in Python.
Python time!
Now you can use Python's "xml.etree.ElementTree" feature to turn the SVG file into a tidy little Python dictionary.
Get the "id" attribute to figure out what you're looking at, then do whatever additional parsing you want.
Now you can use Python's "xml.etree.ElementTree" feature to turn the SVG file into a tidy little Python dictionary.
Get the "id" attribute to figure out what you're looking at, then do whatever additional parsing you want.
"What additional parsing?" you ask
How about COLOR TEMPLATES!
How about COLOR TEMPLATES!
Hey, ya'll remember the Spore creature creator?
We had a pretty decent paint system.
Theory: if you want to make an interesting pattern you need:
A BASE COLOR over all of it
A CONTRAST COLOR over some of it
A DETAIL COLOR for a bit of pop.
We had a pretty decent paint system.
Theory: if you want to make an interesting pattern you need:
A BASE COLOR over all of it
A CONTRAST COLOR over some of it
A DETAIL COLOR for a bit of pop.
Of course, I want randomly-selected colors for these, but I want to doodle in the outlines, and tell the SVG path which parts should be BASE, CONTRAST, and DETAIL.
Like a paint-by-numbers page for Python to fill in!
Like a paint-by-numbers page for Python to fill in!
I do that by creating 3 different swatches in Illustrator.
Doesn't matter really what they are, as long as they're consistent, but also give me a sense of how the finished product will look (ie, only BASE will get a stroke)
Doesn't matter really what they are, as long as they're consistent, but also give me a sense of how the finished product will look (ie, only BASE will get a stroke)
Now, when I have that path loaded up in Python, I can ask xml.etree.ElementTree what the fill is on that path, and compare it against my numbers (and yell if its not recognized)
This gets me to my current state (with some generative color twiddling)
Next up: snap-point annotation!
(oh, also one benefit of doing it as layers is you can make sure everything lines up with itself (for these tile-based experiments))
(oh, also one benefit of doing it as layers is you can make sure everything lines up with itself (for these tile-based experiments))
Note that I've got some *named* circles on my drawing. These have color + id, so I can easily find them in either the SVG code, or visually.
These will be my snap points.
These will be my snap points.
One issue: I'd like to be able to have rotation and size saved (so I can annotate directionality and magnitude)
.....but it looks like Illustrator expands the transformation automatically. BOO. Does anyone know how to prevent that?
Anyway, this is as far as I've gotten, but will push forward more tonight.
I've been wrestling with this for so long, I figured some number of ya'll are as well!
LMK if you try this out, or if you have your own approaches!
I've been wrestling with this for so long, I figured some number of ya'll are as well!
LMK if you try this out, or if you have your own approaches!
Update: got snap-points working.
I need to resimplify the outlines though, they're getting unreadable.
I need to resimplify the outlines though, they're getting unreadable.
More midsections
Ah, they're more readable if I give them a contrasting background!
