Each star is a div with border-radius applied to make it round and a white or light blue box-shadow to add glow.Since the stars are actually flat 2D objects, normally when you rotate them this would become very apparent and destroy the illusion. The trick is that when the galaxy is being rotated each individual star is being rotated in the exact opposite direction so that it is always facing the viewer.

Take a look at my rotate function:

function rotate()
{
    volumeEl.style.WebkitTransform = 'rotateX(' + rotX + 'deg)'
        + ' rotateY(' + -rotY + 'deg)'
        + ' scale3d(' + scale + ', ' + scale + ', ' + scale + ')';

    i = starSpans.length;

    while (i--)
    {
        starSpans[i].style.WebkitTransform = 'rotateY(' + rotY + 'deg)'
            + ' rotateX(' + -rotX + 'deg)';
    }
}

The stars are placed procedurally by JavaScript, and I also used JavaScript to add interaction to the demo. You can rotate or spin the galaxy with some momentum on the desktop. On iOS you can also rotate and spin the galaxy with your fingers, or pinch to zoom. Try the demo now in Safari!

Continue Reading Post…

Why hello there reader, I'd like to announce a video game I created called "Infiltration at Dusk". It is the near future, and the Artificial Intelligence is trying to rid Earth of all humans. The remaining villages have installed batteries of gun turrets as their only defense against the hordes of biomechanical abominations sent on raids by the AI. You, gunner, are the last hope remaining!

Play my game online now in your browser with Firefox 3.5+, Chrome, or Safari. It is an old school arcade/action shoot 'em up game with a couple twists. I created this game for Boing Boing's "Games Inspired by Music" competition where the idea was to make a video game inspired by a chiptunes song. (Vote for "Infiltration" in the poll at the bottom of the competition page!)

I chose the song "Infiltration at Dusk" by the very talented Tettix, off of his Technology Crisis II album. The album inspired me to create biomechanical monsters that you have to shoot, and the song inspired me to create a game that starts at dusk and gets darker as you play. The bullets from your gun and the exploding enemies light up the dark scene — that's one of the twists of my game.

I set out to enter this competition with two major goals in mind. My first goal was to raise the technical bar for games written in JavaScript rather than Flash. I wrote the game engine in JavaScript using the canvas tag for graphics and HTML5 audio tag to play the music. I wanted to show realtime lighting effects and have fast paced action with lots of sprites on the screen at once to help demonstrate the massive improvements in JavaScript performance. Rob Beschizza of Boing Boing and Offworld says:

Zachary's Infiltration was built with JavaScript and HTML5's canvas tag, but contains powerful lighting and blending effects normally the province of Flash — a perfect showcase for plugin-free browser gaming.

The other big goal I had for this game was to introduce a new input style for desktop gaming (my second twist). In Infiltration, you control where your turret shoots bullets by mashing on the keyboard. The entire keyboard becomes almost a touch input surface roughly mapped to the game screen.

Typically with action games on the desktop you target your bullets with the keyboard using WASD or the arrow keys, or you use your mouse to point in a particular direction. This always felt a bit too controlled to me when playing manic "bullet hell" style action shooter games. I would play my way up to dozens of enemies on the screen at once and end up dying in a keyboard crushing or mouse tossing fit. That's when it kind of dawned on me that it might be a bit more fun to mash on your keyboard in the general vicinity of the oncoming horde of enemies. I think it turned out pretty well!

If you haven't already, why don't you go play my video game and then be sure to vote for "Infiltration" at the bottom of the contest page.

Update: Check out this gameplay footage video and controls tutorial:

Continue Reading Post…

The title of this year's session was "Improve User Experience with Informal User Testing." My co-speakers were Kamran Ayub, Ken Loomis, and Ethan Poole. Here is the abstract:

Learn how you and your team can greatly improve your web user experiences by doing informal user testing with little cost. This session's case study will examine a 100% web-based touch screen building directory kiosk recently created by a University of Minnesota web team. Expect to hear actual tips and tricks, problems and solutions, and lessons learned from executing a user test driven development process. As a bonus, see how you can use your current web skills to create more than just web sites.

Check out the presentation slides on SlideShare.

I also spoke at MinneWebCon in 2008 and 2009 with the sessions: "Standardizing Web User Interfaces" and "Semantic, Accessible HTML is Good for Business".

Continue Reading Post…

Check out my pure CSS map markers live demo in Safari or Chrome.

Continue Reading Post…

A few months ago I made a fun flaming text effect simply by using some JavaScript and the good old CSS2 property text-shadow. I posted it on Twitter but never got around to posting it here. Today I pulled together another text effect, shining text, by using CSS3 properties and animation. I thought I'd cover both in one post.

Flaming Text Using CSS2 text-shadow

Now we're cooking with gas.

Most readers should see the previous line of text on fire since it just uses the CSS2 property text-shadow. If you don't see that you're probably using Internet Explorer or something. Do note, there's no use of images, and the text is still selectable.

The key to this effect is using multiple text shadows applied to the same text, each with a different color, position, and blur.

text-shadow: color1 x1 y1 blur1, color2 x2 y2 blur2, …;

Then you just jostle them around with some JavaScript. Open my flaming text example and view source. There's not a lot to it.

Shining Text Using CSS3 WebKit Properties

Check out the shine on this.

To see this effect, you're going to have to check it out in Safari, Chrome, or WebKit. Again, this effect uses no images and the text is selectable, and this time there isn't even any JavaScript involved. If you have an iPhone, the above effect is remarkably similar to the "slide to unlock" text animation on your lock screen.

This effect is created through a combination of a CSS3 gradient in the background, a CSS3 background clipping property which clips the background to the text, and a CSS3 animation to move the background gradient. I was inspired by a demo done by Trent Walton, and took it to the next level by removing the use of any image files. Open my shining text example and view source.

The background gradient is created with the -webkit-gradient CSS3 property. Firefox 3.6 added support for CSS gradients to the Firefox browser family.

The animation is created with a CSS3 animation. You can read more about these in Safari's Visual Effects Guide. CSS3 animations and transitions are on their way to Firefox 3.7.

The "trick" CSS property here to complete this effect is the CSS3 property -webkit-background-clip. This defines the region to which the CSS background property will be clipped. By using transparent or semi-transparent text and -webkit-background-clip: text I can make the background gradient only visible where the text is.

Welp, that's about it. I hope you found it enjoyable. Happy hacking!

Continue Reading Post…

We used a usability test driven design process. We were able to completely redesign portions of the project in the week before it launched based on direct user feedback. We are continuing to test and make iterative improvements to the directory. Special thanks to the totally epic team that made this possible: Ellie, Ethan, Kamran, Ken, Sungho, and Trent. My role included project management, creative direction, information architecture (IA), core PHP and MySQL work, as well as JavaScript work on the drag-and-drop administrative tool for the map data.

Continue Reading Post…

Phwew... I got tired typing that, and even more tired re-reading it. Where do I get off thinking I didn't get anything done in 2009? It is a year I should definitely be proud of. Other things from the year not in the timeline: a bunch of browser bugs I found and submitted over the course of the year, countless projects at my full-time job at the University of Minnesota (probably most memorable is launching a complete redesign of the Events & Conferences site), and a ton of new friends gained and connections made.

My stated resolution for 2009 was to, "Help the collective improvement of the web." I'd say I kept that promise to myself (probably a personal first for a New Year's resolution). Every bug I submitted, every patch I wrote, and every crazy thing I tried to get web browsers to do were all my contributions to the vast collection of brilliant people out there who all helped to make 2009 the year that web browsers really got awesome.

In 2010 I will continue to work to make the web more awesomer [sic], and I'm also making some personal resolutions to dig deeply in the mobile web, spend a lot of time on interactive design and games, and also make way more time for doodling and drawing.

Another important statement I made back at the beginning of 2009 was that I believe making connections is perhaps the most important thing to be doing. I am genuinely grateful for every single connection I made with so many people over the last year, both new connections and re-connections. 2009 was a banner year in that regard, but staying connected is just as much a 2010 New Year's resolution for me. I look forward to attending more conferences, working with more people, helping people succeed at their passions, and being inspired by the work done by all of you brilliant folks.

Have a great 2010! Oh, and if you are interested, check out the CSS for no-images-used timeline.

Continue Reading Post…

You'll have a much better experience using a browser that Santa has on his Nice List such as Safari, Firefox 3.5+, or Chrome. In fact, in those browsers, I'd go so far as to say the snow looks so real you will find yourself flopping on the ground to make snow angels. Give it a try now before you read about the super cool technical details behind it:

(Incidentally, you can also add the JavaScript directly to your own site to delight your visitors. The Winternetizer project page has details.)

The Secrets to Better Snow

Yes, it is true that falling snow scripts go back probably over a decade. We've all seen it done using falling snowflake GIFs, or falling periods, or the trusty asterisk (which to be fair, is a great six-sided stand-in for an actual flake).

However, if you have a modern browser, you will have noticed that my falling snow script has depth-of-field blurring and parallax, flakes that rotate as they fall, and you lucky Mac users no doubt noticed the pretty actual snowflake graphics. The total effect is accomplished with text, CSS, and JavaScript — no Flash, no PNGs, no GIFs, no Canvas.

Continue Reading Post…

More About FlipBox

FlipBox is jQuery-based and makes use of my rotate3Di plugin to create a 3D-like isometric tile flipping effect using the CSS3 transform property currently only supported by Safari, Chrome, and Firefox 3.5+. (That's another reason why I wanted to record a video demo.) If you happen to have an awesome web browser, you can check out a live demo of FlipBox.

In it's current state, with only a little preparation by the user, FlipBox is already a simple to use LightBox-like tool. There's a few other demos with this concept I hope to put together, and I would also like to write proper documentation and do a release.

Continue Reading Post…

Busy sites like Twitter, Digg, Boing Boing and others use methods to avoid browser cache issues. They find it important for their sites to always display correctly. You too can ensure visitors to your website will always get exactly the version of your style sheets and related image files that you want them to get.

I wrote an article for SitePoint covering solutions to browser cache problems titled "Overcome Your Caching Conundrums".

In the article I cover popular ways to deal with JavaScript and CSS file cache control, as well as a trick-of-the-trade method that will also help you manage your image caching. Hint: Have you ever wished that url() for your background images was relative to the styled-document's location instead of being relative to the stylesheet file's location? I used to feel that way, and it wasn't too long ago that I saw Eric Meyer tweet a similar desire. But now I am actually quite glad that url() works the way it does, and that has to do entirely with CSS cache controlling.

Now go and read the article on SitePoint. I hope you will find it interesting!

Continue Reading Post…

My zombie vide is titled, "Luuuuuuuunch." Watch it now!

• zombie-gex-s3-640.mov (51MB MOV)

I was extremely honored when this video won a Communicators Forum Maroon Award in the "electronic media, video" category in 2008. The video was also submitted this year to the Zombie Short Film Festival in Toronto. With some luck, my co-creators and I will be able to add a "double award-winning film" to our resumes.

[Fingers crossed.]

Continue Reading Post…

My idea was to create an extremely basic RPG with gameplay throwbacks to NES titles like Dragon Warrior and Final Fantasy, but with even simpler graphics. The graphics concept I came up with was basically that anything in the game would be represented with giant square pixels of color. And then playing off the theme's implication of bare-as-in-naked, I came up with the game title: Equip > Pants. Here's a very brief review:

Having perhaps the highest hilarious: number of pixels ratio, equip > pants follows the exploits of a pantless hero who must don pants. -Experimental Gameplay Project

In the spirit of the Experimental Gameplay Project competition rules, I spent just seven days developing this game. I put in less than 40 hour of development time total.

The game is written in JavaScript, and should run fine in most browsers. Play it now. Click START below.

And after you've finished, check out the other games from the August theme. Just to give a few more technical details about the game: I used the DOM to draw the graphics instead of a canvas tag. Those of you with Safari, Chrome, or Firefox 3.5 should see a beautiful pixel font in the game thanks to an @font-face rule.

Oh, and don't mind the ABOUT / CREDITS link... that just goes to this blog entry. (Some places have linked to the game directly rather than this post.)

Continue Reading Post…

Specifically, I did not share the happyworm article's optimism about these points:

"It seems that it's not so much about the corporations anymore, more about the community."

"...a seismic shift in power towards the community and away from the browser vendors, the consequences of which cannot be underestimated."

First, let me start by saying I'm assuming by "community" the author meant web developers. It is important to note that Apple, and even more so Google, were heavily involved in the HTML5 spec and thus, if only by association, the demise of XHTML2. I ask if maybe the power has moved away from browser vendors towards content-provider corporations, and not towards the community? (It is worth noting that this is a very common trend now in America for decades.) The W3C ceding some control strikes me as perhaps further evidence that the community may actually be losing ground. Google entering the browser vendor market only serves to muddy the waters.

Some fraction of the web developer community was very excited by Google pushing HTML5. Some fraction was very disappointed. Can the community have the power if the community is divided? Maybe Google and Apple are listening only while it is convenient for them and their bottom line. Maybe the HTML5 supporters think they have power because Google's use of power just happens to line up with some of the web development community for the time being.

Personally, I'm very much a supporter of community-based web standards. I'm glad for now that we have Google and Apple blazing ahead with roughly standards-based HTML5, CSS3, and JavaScript. I certainly don't think we should give Microsoft the keys to the car. They've already shown us where they would drive it, if not deliberately then by incompetence or lack of vision. And I think we also must give credit to Opera and Mozilla. They seem to embrace community driven development. I think they've got our backs.

I do think we probably have little to fear on the CSS and HTML fronts. I think the illusion of community derived standards will continue, with the corporations that actually make the decisions acting mostly benevolently. Occasionally they may err on the side of progress over standardization, but the benefits of that will probably outweigh the problems.

I am much more concerned about JavaScript (JS), especially with how Google is positioning itself. We (web developers) enjoy fairly standardized JavaScript language for the moment, with a lush pasture of JS libraries, user interface (UI) toolkits, etc to choose from. Google has entered the browser market and is fully intending to create a browser-based operating system. I'm not so sure we can trust Google to act in the web development community's interests over its own corporate money-making interests in regards to web applications, specifically client-side JavaScript applications and web applications UI. I think there is a real possibility that Google may create a proprietary JavaScript web applications platform and lure many developers in via a "web standards" carrot, custom (read: proprietary) application toolkits with pre-built functionality, a captive audience, and a clear path to individual app monetization. I think this could create some real fractures in the JavaScript language and potentially even web development as we know it.

I will give a simpler example for my concerns for the future of community driven decisions in the realm of JavaScript and Web Applications UI. There has been some talk of incorporating jQuery as part of HTML5/JavaScript. If you are a Dojo, YUI, or Mootools fan, how would you feel about jQuery being selected as an early winner? What are the chances people will want to use some other JS framework, or Web App UI widgets built for some other JS framework, when jQuery would perform dramatically better because it is actually built into the browser?

It is far from certain, but we may soon find ourselves with far fewer choices as web developers than we have now. Or, maybe Google will "do no evil" and blow all of our minds with great stuff while having a ear in the web development community. I, for one, am watching carefully.

Continue Reading Post…

As an example I have some spinning HTML content. You can click the content to increase its scale while it continues to spin.

Read the full post to see the example and download the patch.

Continue Reading Post…

Here's a photo of yours truly next to my submission — a nearly life size blowup of some pixel art I've been working on for Zachstronaut:

So like I said, the "Together" show was comprised entirely of artists who had previously shown work at umber. I had the great pleasure of showing a variety of fun pieces in a fall 2007 show titled "Play." The show was the idea of my friend Peter Smith, and I was very happy to have him invite me to be a part of it.

My art for the "Play" show was a juxtaposition (oh yes, I dropped the j-bomb) of video games I played growing up — which inspired my career path as a builder of the digital flavor — with the physical toys I used to build stuff as a kid.

First below, photos of four pieces done in LEGO brick on LEGO plate (left to right, top to bottom). Here are links to the games in question: Bubble Bobble (NES), Dragon Warrior (NES), Final Fantasy (NES), Super Mario Bros. (NES). Then, a piece constructed with dominoes, GORILLAS.BAS (QBasic).

Actually, I had one more LEGO work in the show which was the heart containers from The Legend of Zelda (NES), but that piece has sold. If you're seriously interested in any of this art or commissioning a piece, contact me.

Surprisingly, I've never become a regular Flickr user, but I imagine I should get high-res shots of these up on Flickr or somewhere eventually.

Continue Reading Post…