I seem to have forgotten how to blog. (Actual blogging, as opposed to merely linking to new art.) In an attempt to get back on the saddle again:
Outside of art, my project time lately has primarily been swallowed up by some internal tooling changes. I alluded to this back in June, though the plan changed along the way. Rather than merging all those apps into one behemoth conglomerate, I decided it would be better (along at least a few axes) to follow the Unix philosophy and stick with smaller tools that do one thing well. Which conveniently lines up with the set of tools I’ve already built. Fancy that.
In fact, it was so liberating and fun that I plowed onward and decided to ditch Vinci (my internal blog/notebook app) and build a new app, Leaf, using the same technique; the only JS it uses is for keyboard shortcuts. It’s simpler, easier to maintain (I think? it’s still early on), and in a way it feels more in line with the grain of the web.
One other thing I did differently with both apps was to wait to write any CSS until after the functionality was all in place. It was disconcerting and delightful, building something with bare browser styles, and it certainly helped me focus on functionality first rather than getting distracted by layout.
Conclusion: while I doubt I would ever build apps at work this way, this old-school mode was invigorating and absolutely worth it for these personal projects.
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)
Our toddler loves looking at letters and saying their names. A while ago we printed the alphabet out onto cardstock and have been using that with her, which is great, but I’ve also wanted to write a small web app that does the same thing — mostly for when we’re in another room, but also to make the randomization a little better. And because I can’t seem to stop writing little apps.
But the original was kind of boring. So we tweaked the game mechanics a bit and made a number of other modifications (multiple bots per team, extensible rulesets, etc.). And now we present Botswana 2.0, a culmination of rampant nerdiness.
The thing that interests me most about the game now is the customizable rulesets. For example, it took all of ten minutes to change the game so it’s played on a series of conveyor belts that move the bots up and down:
It likewise took less than half an hour to make the bots orbit the Death Star instead:
Since the drawing code is part of the ruleset, it’s fairly easy to get a radically different look:
Switching between the rulesets is just a matter of changing the URL in the ruleset box and starting a new tournament.
Anyway, as before, the release is on GitHub, with a README that explains how to write bots and customize rulesets and stuff.
In genealogy web apps, I kind of like consolidating name fields into a single textbox. Simpler is better. But then you run into the problem of distinguishing the surname from the rest of the name — because of surnames like “Gutierrez Sanchez,” you can’t just assume the surname is the last word in the string.
When you click on the name, it becomes editable:
How it works
Basically, you give it an input.namebox element and it creates a corresponding div tag for displaying the highlighted surname. It then flips back and forth between the input and the div, parsing the name field and changing the highlight appropriately.
When I was a kid, my mom used to have us memorize poems. She’d write the poem out on a whiteboard and we’d recite it a few times, then she’d start erasing a few words, have us recite it again, erase a few more, and so on. And it worked.
Turns out it’s super easy to do the same kind of thing in a web app. Here’s Erasure:
If you click on an erased word, it’ll briefly become visible again. (But of course you only want to do that if you’re really stuck.)
Each turn, the engine sends the current state of the world to each bot. The bot can then give the engine its command — to move forward, move backward, turn left, turn right, or fire. Last bot standing wins. We’ve gone with an intentionally simple rule system for now, but we’ve got some fun plans for future improvements.