Author Archives: Ryan Markel

Old School Color Cycling with HTML5

Mark J. Ferrari, who also illustrated all the original backgrounds for LucasArts The Secret of Monkey Island and Loom, invented his own unique ways of using color cycling for envrironmental effects that you really have to see to believe. These include rain, snow, ocean waves, moving fog, clouds, smoke, waterfalls, streams, lakes, and more. And all these effects are achieved without any layers or alpha channels — just one single flat image with one 256 color palette.

Unfortunately the art of color cycling died out in the late 90s, giving way to newer technologies like 3D rendering and full 32-bit “true color” games. However, 2D pixel graphics of old are making a comeback in recent years, with mobile devices and web games. I thought now would be the time to reintroduce color cycling, using open web technologies like the HTML5 Canvas element.

This demo is an implementation of a full 8-bit color cycling engine, rendered into an HTML5 Canvas in real-time. I am using 35 of Mark’s original 640×480 pixel masterpieces which you can explore, and I added some ambient environmental soundtracks to match. Please enjoy, and the source code is free for you to use in your own projects (download links at the bottom of the article).

Ferrari really was a talented artist in the medium. Monkey Island and Loom are classics partially because at the time they were visually arresting.

The demo of the HTML5 Canvas elements has to be seen to be believed. Show the additional options to see the palette shifting apart from the image itself.

And the code is LGPL to boot.

(via EffectGames.com.)

Thirty-Five Movies in Two Minutes

Totally awesome animation. Simple and effective.

Flipping the Sidebar in Twenty Ten with Custom CSS

For a project I’m working on, I wanted to take the sidebar in Twenty Ten and move it to the left side instead of the default. I played with it for a while and received some help from my colleague Ian Stewart, who kindly pointed out that I’d typo’d a CSS comment. (That wasn’t completely embarrassing.)

Turned out that at one point I’d had it and didn’t know it. Thanks again, Ian.

To post for my own recall and for anyone who might be looking to do it, here’s what to add to your WordPress.com Custom CSS if you’d like a left sidebar:

/* LAYOUT: Two columns-reversed
   DESCRIPTION: Two-column fixed layout with one sidebar LEFT of content */

#container {
float:right;
width:100%;
margin:0 0 0 -240px;
padding:1em 0;
}

#content {
margin:0 20px 0 280px;
}

#primary,#secondary {
float:left;
overflow:hidden;
width:220px;
}

First Family Ballgame

Abby’s Girl Scout troop was invited to group seats at a Cards game this past weekend, which included a walk around the warning track at the park. (The group seats were, as you would expect, very high up.) This is the first time any of the children were able to go to a game, and the first time Amanda and my parents had been to the new Busch Stadium.

Pinball Saturday Night

After Abby’s birthday celebration, I look my son, my father, and my best friend to CP Pinball for a few hours of fun.