Ben Crowder

Blog: #javascript

13 posts :: tag feed :: about the blog :: archive

L-system sketches

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.


Reply via email or via office hours

Emperor

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:

Two-generation

* John Doe | b. 1850 ** Father: Richard Doe | ** Mother: Maria Taylor | b. 1825

The code

* John Doe | b. 1850 ** Father: Richard Doe | ** Mother: Maria Taylor | b. 1825

Three-generation

* Samuel Smith | 1823–1825 ** Nicholas Smith | 1800–1824 *** Frederick Smith | 1773–1812 *** Annabelle Hansen | b. 1770s? ** Irene Yolen | 1825–? *** Grandmother: Caroline Eastman | 1801–1899

The code

* Samuel Smith | 1823–1825 ** Nicholas Smith | 1800–1824 *** Frederick Smith | 1773–1812 *** Annabelle Hansen | b. 1770s? ** Irene Yolen | 1825–? *** Grandmother: Caroline Eastman | 1801–1899

Family pedigree

* 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)

The code

* 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)

Notes

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.


Reply via email or via office hours

Javascript entity conversion

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).


Reply via email or via office hours