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.)
As usual, the code is on Github.
As previewed a little while ago, I’d like to introduce Botswana:
A couple weeks ago at work I was talking with two of my coworkers and Core War came up somehow. I got excited about the idea of writing AI bots to compete with each other. Conferring with my friend Chad, we decided to make it web-based and use Javascript as the scripting language for both the bots and the game engine. A couple days later, we had a working engine, and we’ve been fine-tuning it since then.
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.
The code’s open source and is on Github.
Here’s a quick sneak preview of my current project:
I’ve been playing around some more with the L-system code and modified it to animate the angle property and output each frame to a file. I also added some color and started using blending modes for the brushes. Once I clean up the code, I’ll post it to GitHub.
Anyway, here are some of the animation tests (I used Blender to put the frames together into an animation):
And the first one I did, which is a little too long and a little too fast:
I’ve been getting into procedural drawing and generative art some more, and last week I decided to try out L-systems. I ported some Processing code to Javascript and Canvas, then modified it and added controls so I could tweak the values and try things out. I also wrote a handful of additional brushes to get more interesting renders out of it (since plain lines can be kind of boring).
The algorithm isn’t entirely accurate — at least based off of the axioms and rulesets I plugged in from the Algorithmic Beauty of Plants book — but I like what I’m getting. I’ll do a second app sometime later with the correct algorithm.
Anyway, the code (which is kind of messy at the moment) is on GitHub. Sometime later I plan to add color selectors and more brushes. You can see the rest of these images in my sketches set on Flickr.
When blogging about genealogy, it’s nice to be able to easily embed pedigree charts in your posts. I realized yesterday that it would be pretty easy to write a script to do just that. It’s called Emperor. Here’s a live demo:
* John Doe | b. 1850
** Father: Richard Doe |
** Mother: Maria Taylor | b. 1825
* Samuel Smith | 1823–1825
** Nicholas Smith | 1800–1824
*** Frederick Smith | 1773–1812
*** Annabelle Hansen | b. 1770s?
** Irene Yolen | 1825–?
*** Grandmother: Caroline Eastman | 1801–1899
* Mark Goldman &
Evelyn Washburn | Jackie (b. 1935)
** Stephen Goldman &
Anne Rhys | Gary (b. 1899) |
Ned (b. 1902) | Maggie (b. 1903) | Tanner (b. 1903) |
Richard Goldman (b. 1908) | Mark Goldman (b. 1913)
** Robert Washburn &
Zanny Holdmann | Evelyn (b. 1915) |
Lawrence (b. 1917)
If you’re reading this in a feed reader, it won’t look all that impressive. (That’s one of the downsides to doing it via Javascript instead of server-side.) Here’s an image showing what it looks like (from the sample page, included with the source):
The code (on Github) comes with instructions on using it. (Just upload the emperor.js file to your server, link to it in your head, and put your pedigree charts in a div with class="emperor-pedigree".) Oh, and you can style the pedigrees with CSS. There are still some issues to be resolved, but it’s fully armed and operational.
For future reference: if you’re using Javascript and want to convert a decimal entity in HTML (Đ, for example) to the Unicode character it represents (“Đ”), this works:
// converts "fiancé" to "fiancé", etc.
newstr = oldstr.replace(/&#([0-9]*);/,
function(full, charcode) {
return String.fromCharCode(charcode);
});
The full parameter is ignored; we want the second one, charcode, which is the first backreferenced match in the regex (the character code).