- Topics:
- apps
- css
- games
- javascript
- mobile
- node
- php
- speaking
- tehcl
- textmate
- tools
- video
- webgl
- published:
- 2010.09.13
- topics:
- javascript
I revisited my 3D CSS3 Galaxy from my previous post and rewrote the effect in JavaScript that renders using HTML5's canvas tag (instead of Safari-only 3D CSS3 transforms).
This time it works in Google Chrome, Firefox, Safari, Opera, and yes even IE9! Oh, it still works on the iPad and iPhone, too. Well, go on then, give it a whirl:
I updated the galaxy a bit, adding an effect where it cycles from blue stars to orange stars as it rotates.
Another fun fact about this demo, is that I was quite easily able to squeeze the entire thing into a single file well under 10KB in size for An Event Apart's 10K contest.
Anyway, I hope you enjoy. Check out the source code!
- published:
- 2010.07.28
- topics:
- css
- javascript
- mobile
- video
Galaxy Box is a CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, I used 3D CSS properties available in Safari 5 and on the iPhone and iPad. Check out this video of the demo in action and then interact with the 3D CSS3 Galaxy demo yourself.
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!
- published:
- 2010.07.08
- topics:
- games
- javascript
UPDATE: My video game won 2nd place in the Boing Boing Games Inspired by Music contest! It is apparently now an "instant old-school classic." heh. I couldn't have done it without the support of everybody who voted. I really appreciate it. ALSO: Check out the very nice write-up I got in MinnPost from Phil Wilson!
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:
- published:
- 2010.06.05
- topics:
- speaking
For the third year running, I had the pleasure of speaking at MinneWebCon this April. Three co-speakers and I presented about iterative user testing using a case study that examined the touch screen building directory I've posted about before.
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".
- published:
- 2010.04.27
- topics:
- css
- video
I was feeling inspired after seeing the cool pure CSS pulsing rings on the Transmit 4 website that launched this morning so I put together this demo. (Did you notice the rings? You had to browse there with Safari to see them.)
Check out my pure CSS map markers live demo in Safari or Chrome.