Trig

Once upon a time, a friend of mine shared a gif on Facebook that looked a little something like this:

Her comment was something along the lines of “Someone should make something like this for the other ones.”

I had previously messed around with SVG images for another project1, and figured it’d be a good technology to use for this kind of geometric image creation, but I didn’t have any experience with animating them. So I started looking around and it turns out you can just embed javascript in SVG and manipulate the DOM directly.

So I started banging things together and made the image above (for sake of completeness) along with these two:

(This one was hard to represent in an equivalent way. I’m still not super happy with the diagonal reflection thing, to be honest.)

And all together:

And that’s how I got started with JavaScript.

(And this is how I got started embedding images with Hugo.)

((EDIT: WOWSERS BOWSERS did embedding javascript-animated SVG images turn out to be way more obnoxious than I was anticipating! I’m glad I did though, because I’ve been thinking for a while now about doing a series of posts explaining fundamentals of how computers work, for the lay person, and anticipate that being pretty animated-svg-heavy.))

  1. It was around the time DC Comics was doing their “Blackest Night” event, where we learned that there were more lantern corps, with different colors and associated with different emotions! Like the Red Lantern Corps, who were very angry (first thought), or the Orange Lantern Corps, who were… greedy? (wait, is it sins now?) and was maybe just one guy, and of course the emotion associated with the good ol’ Green Lantern Corps was “willpower” which isn’t even really an emotion anyway…

    At any rate, the whole thing was just kinda dumb, so in protest/to make fun of the whole thing, I invented my own corps, the Brown Lantern Corps, whose associated emotion was “relief” and I learned enough SVG to design a stylistically matching logo (with stink lines and everything)2.

    (Sometimes I think about how much of the stuff I ended up working on over the years3 ultimately, thanks to SVG acting as my gateway to JavaScript, came out of me wanting to make a poop joke to make fun of Dan DiDio.) ↩︎

  2. Sadly, lost to time. ↩︎

  3. My next mad science project after the trig animations was actually a set of SVG images with embedded JavaScript that would make ajax calls to the OneBusAway Rest API to pull down data and produce a Gantt chart of which buses I should take in the morning. Which then gave me enough experience doing really weird shit with JavaScript that I got tapped to do the initial investigation/prototyping for Tableau’s Hybrid Dialog system (which allowed reuse of web UI on native/desktop products).

    In other words, Poop Lantern Corps logo goof -> silly trig animations -> mad science bus route thing -> actual big important professional project.

    This kind of thing is why I always have trouble answering “Where do you see yourself in five years?” ↩︎