Sat, 20 Feb 2016

Anniversary Game

— SjG @ 10:17 pm

So, for our tenth anniversary, I thought I’d make something slightly more … dynamic … than your standard Hallmark card. I thought a simple JavaScript game might be fun.

Since everyone knows that a happy marriage is made of unicorns and rainbows, I figured I’d work with that. My first though was a single-level platform game. I looked at a number of JavaScript game frameworks, and they were all either much too simplistic or much to complicated for what I wanted to do. I spent too much time in the process of starting a game with a new framework, getting frustrated, and then abandoning it. Oh no! I was running out of time!

I decided to bail on frameworks, and just write a quick, simple, pure JavaScript game. I would use animated GIFs as sprites, and do the rest in Canvas. Seems easy.

I raided the usual sources for my assets. I needed a unicorn, so I gave a horn to the Wikipedia running horse animated GIF (which itself is derived from Muybridge’s photos) and knocked out the background. It looked pretty good on a white background!
I then made some animating rainbow hearts, and I was ready.

After the initial stab at coding, unicorns would run back and forth, and rainbows appeared where the user clicked. If the unicorn was within the rainbow ring, I’d register the hit. I was well on my way.

Next, I added the score animations. I was impressed by how smoothly the animation all worked. On a reasonably recent machine, browsers keep up very nicely. Then I went and tested on iOS. Uh-oh. I’d not been very careful about browser size. I ended up recoding the CSS and dimension code to be more or less responsive. OK, seemed good. I added an explosion of hearts effect for when you hit the unicorn. Next, I found a nice source for sounds.

One of the problems I faced was that I was trying to develop the project while sitting on the sofa in the evenings. I’d come home from a long day of coding, and, well, start coding. But then Elizabeth would come home, and I’d have to keep switching windows to avoid creating suspicion. This is where the ability to disable the audio came in. Over the course of a week, I was able to polish it up enough for deployment. It’s far from perfect, but it was well received.



Play it yourself, or use the code to create your own game.

Some Lessons Learned:

  • Players will resize the window in the middle of a game. The code should probably trap for that, and do the right thing.
  • I expected players to launch a single rainbow at a time. In fact, there was a whole lot more clicking than that.
  • It might be faster to write a game from scratch, but seriously, take the time to learn a framework and use it. With any luck, it will handle all those weird edge cases, and probably have better support for odd platforms.
  • Sound in JavaScript is nasty, and not very portable. Again, use a framework (or commit to modern browsers, and use Web Audio API).
  • Responsive design is all good, but for a game, it might make sense to commit to a fixed size for playability.
  • Under iOS, things don’t work quite as you’d expect. This game should have been optimized, and used something like the touchAction style to improve playability. Better yet, I should have created a native version with PhoneGap.

Wed, 10 Feb 2016


— SjG @ 5:16 pm

William Shakespeare and Miguel de Cervantes died on the same date: April 23, 1616. However, Shakespeare outlived Cervantes by 10 days.

Wait, what!?

It’s true. The discrepancy is an artifact of Spain being on the Gregorian Calendar at the time, and England being on the Julian Calendar.

Filed in:

Wed, 27 Jan 2016

Onion Texture in Javascript and Canvas

— SjG @ 9:23 pm

When I’m focused on other things and doodling, one of the textures that regularly emerges is a fill pattern of concentric irregular circles.

(click to enlarge)

Now, doodling is a way of letting my mind idle. Why I’d want to automate that, I couldn’t say. But for some reason, I did.

So the question was: how do I draw a “sloppy circle,” or one that’s not exactly regular, especially if I want to then draw another similar circle inside of it, and so on.

I settled on the idea of picking a set of points around a circle, with roughly the same radius. If I just drew a line between these points, it would be a regular polygon, and not as gentle as I’d like. So, instead of lines, I needed gentle Bezier curves from point to point.

To get the Bezier control points, I need to create a tangent to the radial line, and put the control points for the curve on that tangent. But how far away from the original point? Better make it a variable!

So, with some playing, I was able to get reasonable values.

You can play with it yourself!

You can easily get results like these:



(click to enlarge any of them)


Fri, 11 Dec 2015


— SjG @ 3:14 pm

Henceforth, the Mighty Fogbound Empire is only accessible over SSL.


Fri, 27 Nov 2015


— SjG @ 1:48 pm

(This is a post from the end of September. I didn’t finish writing it then, but recent events made me revisit it).

I just finished reading Camp and Community: Manzanar and the Owens Valley, an oral history compiled in the mid 1970s by Jessie A. Garrett and Ronald C. Larson. Unlike many of the oral histories of Manzanar, these interviews are not of internees. Rather, this is a collection of interviews of twenty some odd people who lived and worked in the area. Some of them worked at the camp itself (including one director of the camp), while some had no connection to it at all.

It’s a fascinating read. Not unexpectedly, people often contradict one another and the memories are rife with inconsistencies, but it paints a picture of a small, relatively isolated community being confronted with substantial change and influx of outsiders (both within the camp and with the outside personnel the camp required). The change was an economic boon in a lean time, and it brought outside attention to the area. Both of these factors affected the attitudes of the community.

There is a strong impression that some people’s feelings changed in the twenty-five to thirty years between when the events took place and the interviews occurred.

Among the people whose opinions changed against the internment, there were all of the expected explanations: it wasn’t actually so bad, some of the the internees came voluntarily, it was for their own protection, the internment was a fait accompli and there was nothing to be done, there were legitimate mutual threats against America and Japanese Americans so this was sadly necessary, and so on. Among the people who supported the internment then and now, the arguments were also the expected ones: it was war, these were people of suspect loyalty, internees were treated better than the Japanese would treat Americans, to do otherwise would be to invite disaster.

One theme, as valid today as any time, is that fear is easily stirred up and manipulated to make people do things they would ordinarily oppose. Several of the interviewed people reflected on the fact that American citizens were unconstitutionally stripped of their rights, but excused it because there was a foreign threat to the country. It was also clear that the sense of “otherness” was key. Many of the people interviewed said they’d never seen (much less met) a person of Japanese descent before the establishment of the camp.

Another theme is essentially the William Goldman adage to “follow the money.” People like newspaperman Manchester Boddy helped establish the camps — and profited greatly on buying up the property of Japanese-Americans at firesale prices when they had twenty-four hours to liquidate their belongings before being shipped out.

Some of the defenses of the creation of Manzanar are true. People were afraid. We were at war. The imperial Japanese army was terrible and cruel to captured peoples. And yet, even if true, these are irrelevant. If our rights as Americans are subject to revocation when we’re afraid, then they’re not rights. If our answer to enemy cruelty is cruelty, then we’re no different than our enemy. If we can strip citizens of their freedom and property just because they look different than the majority, then we descend into mob rule and our lofty appeals to our ideals are just so much hot air.