phoboslab

Welcome to PhobosLab! My name is Dominic Szablewski. I created Asaph and I write about PHP, Javascript, Web-Technology and everything else. Here's the RSS-Feed of all recent articles.

Flash Animation Without Flash

More than two years ago, I created a Flash Animation for my university class. Today, I converted the whole thing to plain Javascript and HTML5, using the new <canvas> tag to draw and the <audio> tag for music playback. It now runs smoother than it ever did in Flash.

Without further ado: Venetianization / HTML5 Animation

Some technical notes: For the original Flash Animation I used ActionScript 3 and created my own classes. Javascript doesn't have classes per se, but you can build something that looks and feels exactly like it. MooTools did an awesome job at that. Converting my ActionScript classes to MooTools classes was a no-brainer.

I was able to reuse most of the code with some basic search and replace throughout the source. One thing however, that is (to date) completely missing in Javascript, is the ability to analyze the current sound spectrum of an audio file. I ended up extracting the raw values of the spectrum with a sampling rate of 15Hz (which is enough for an animation that initially ran at 30Hz) and put them in a large array in one of the source files.

The thing that annoyed me the most however, is that I now have the music in two different formats: OGG Vorbis for Opera, Firefox and Chrome, and MP3 for Safari. I totally understand that Firefox, being open source and all, can't include MP3 support. What I don't get, is that Apple doesn't support OGG Vorbis – an audio format that is clearly superior to MP3 – instead, they choose to sit on their high horse and twiddle their thumbs. This is exactly the behavior that made Internet Explorer a laughable side note.

Side note: Of course none of this works in any version of Internet Explorer.

Tuesday, February 16th 2010 / Comments (3)
Tags: Javascript, HTML5, Canvas

Google Chrome Frame is Here to Save Us All!

Google introduced Chrome Frame today, which is essentially a plugin for Internet Explorer to use Chrome/Webkit as it's rendering engine. This at first may seem like one of Google's Aprils Fool's jokes or an attempt to make Microsoft even more embarrassed of IE. However, when looked at closely, the Idea to bring Chrome to IE is very clever and might actually work!

The problem is clear: While Microsoft certainly fixed many issues of the now infamous IE 6 in their newer versions, IE 8 still has many many problems and is far behind in terms of standard compatibility, features and speed. This has hindered many sites from using new technologies and ideas and oftentimes forces developers to backpedal in order to still support IE. So how do we get people to switch to a different browser?

Imagine you're visiting a website and are greeted with a message like “Your browser is not supported by this website. Please download one of the following browsers...”. Would you do it?

For the average user, the answer is of course no. There are way to many hurdles to overcome. Many people don't even know what a browser is. For them, IE is the Internet. They won't understand why they need to install a new software and they won't know what to do if they wanted to switch. Even if a user exactly knows what a browser is and how to install software, he'd still have to trust the browser vendor that this new software won't do any harm to his PC and he'd also have to invest some time to get familiar with it. It's just not worth the effort.

Now imagine you're visiting this website and you get the message “You need the plugin XYZ to view this site”. Imagine this plugin was created by Google – a company you know and can be sure of that they won't harm your PC. Installation of this plugin is just one click away. You don't have to download or install anything manually and your browser will look and behave exactly the way it used to.

Google Chrome Frame is just that. It's only a plugin, but for web developers it has the same benefits as if the user switched to another browser. If you're working on a high-end website that you can't possibly get working in IE (like Google itself does with Wave), or that just would work better with a standard compliant rendering engine, then Chrome Frame seems like a very good answer.

Wednesday, September 23rd 2009 / Comments (0)
Tags: Random Thoughts, Web Technology

Colemak

Richard Dawkins once urged us to not just be atheist, but militant atheists. I don't want to talk about religion here – after all, everyone already knows that religion is stupid. No, what I want to talk about is the Colemak keyboard layout. Today, I'm a militant Colemak user.

Two years ago I asked myself if there isn't any better keyboard layout for programming than the German keyboard layout. Many keys that are essential for programmers, like curly braces and square brackets, are only reachable through extensive use of the ALT key on the German QWERTZ. This is hardly ideal and makes QWERTZ much less usable for programming than the English QWERTY.

I did consider switching to QWERTY for some time. Sure, I'd miss the German Umlauts (ä, ü, ö) but that was a sacrifice I was willing to make. I asked a German programming board how they are dealing with the cumbersome QWERTZ layout – many of them are using the English QWERTY layout as their default and are happy with it. They also mentioned Dvorak, which I largely ignored, as it seemed incredibly hard to learn and had no apparent benefit.

However, I stumbled over a new, totally different, keyboard layout that sounded promising. It's name: Colemak. Colemak is designed to be efficient and ergonomic. You can type whole sentences with it, without your hands ever leaving the home row. Yet, it is fairly easy to learn. The keys for the widely used shortcuts for undo cut, copy and paste all stay at the same place and the layout of all special characters is identical to the English QWERTY. Furthermore, I can type all the German language specific characters with Colemak and it also adds many special characters like the ellipses, en- and em dashes, typographic quotation marks and many, many more. These would otherwise only be reachable with complicated ALT combinations on Windows (e.g. ALT+0151 for the em dash).

I've been using Colemak for almost two years now, and I can't imagine switching back to QWERTZ. Typing with Colemak feels so much more fluent than it ever did with QWERTZ, especially when programming. I can now keep my 10 fingers on the keyboard at all times, as all the special characters are easy to reach. I don't mind the somewhat more complicated to type Umlauts since I don't write that much German anyway.

Another nice side effect of having Colemak installed on my Windows Desktop PC and my Macbook Air is that it flattens out the differences between their QWERTZ layouts – that's right, Windows and Mac OS have a slightly different Keyboard layout for the German language. Especially annoying is the different positioning of the curly braces, square brackets, the pipe and the at sign – characters you'll need frequently when programming. With Colemak the layout is exactly the same on all systems.

Of course, while the layout itself is close to perfect, switching to Colemak also has it's downsides. For one, if someone wants to use your PC/Mac she'd first have to switch back to QWERTZ or QWERTY. This is not a problem at all on Mac OS, where you can switch the layout with two clicks. On windows however, you can only switch the layout on a per application level, meaning that you'd have to switch the layout for each application that you want to use. Whoever had this idea at Microsoft needs to be slapped with a large trout.

I can still type on QWERTZ/QWERTY, albeit a bit slower than I used to. The one thing I'm incredibly lost at, is when I want to type program code on a friends MacBook since I never learned the Mac OS specific QWERTZ layout. However, this is a problem I'd also have if I'd still use the Windows specific QWERTZ.

If you're already using the English QWERTY layout, there's probably not that much benefit in switching to Colemak. QWERTY is already nice enough for programming and the layout is identical on Mac and PC. For everyone else who is programing a lot on the German, French, Czech or Swedish layout, Colemak sure is a very nice alternative.

Friday, July 24th 2009 / Comments (1)
Tags: Random Thoughts

UVC Camera Control for Mac OS X

For a recent computer vision project I needed to pull images out of a Logitech QuickCam 9000 and track some markers with the help of the ARToolKitPlus library. I connected the camera to my Mac and was quite surprised to see that it just works. There was no need to install any drivers. As I learned later, that's because the QuickCam 9000 is a UVC webcam for which Mac OS X 10.4.9 already provides a driver. I was able to get to the raw camera images through the QTKit Framework in no time.

However, the QuickCam 9000 has its auto exposure enabled by default, which is absolutely deadly for stable tracking results. I thought I could just turn the auto exposure off and set it to a fixed value through some QTKit API – but no, there's no way to change the exposure of a UVC camera with QTKit. In fact, there's no way to change any parameters of your camera. No exposure values, no white balance, no gain, nothing. Apple just implemented the bare minimum in its UVC driver and the QTkit Framework.

Well, maybe I could get to these parameters through the older Sequence Grabber Framework then? After all, there's a VDIIDCSetFeatures function and a vdIIDCFeatureExposure key! But nope, as the name implies, this stuff only works for IIDC cameras. What's an IIDC camera? Wil Shipley asked the same questions almost 3 years ago - even back then, IIDC cameras were pretty much deprecated. Still, these cameras are the only devices that Apple provides an API for, if you want to change some esoteric parameters no one would ever need to change, like oh, the exposure time or white balance temperature for instance.

Apple is aware of the problem but hasn't done anything to solve it. And Logitech apparently doesn't see the need to provide a Mac driver for their cameras, since Mac OS X already ships with one. Great.

But wait, UVC is a standard, right? USB.org provides a documentation for all device classes, and the Video Class is no exception. So, I poked around in the documentation for a while, read some Linux UVC driver sourcecode and used Apple's USB Prober to see what's going on. After some more hours of playing around with the Kernel Framework's USB API, I was finally able to control some of the QuickCam's settings!

Read complete post »

Wednesday, July 15th 2009 / Comments (37)
Tags: Objective-C, OS X

Yuckfu Dev Diary #12 – Let's Try That Again

Yuckfu has been in the App Store for almost two month now and I got some good feedback from numerous people. The sales numbers however have been disappointing to say the least. The main problem was the lack of exposure.

When Yuckfu went live in the App Store, its release date was still set to the upload date a few days prior. Therefore the game appeared on page 6 of the "new Apps" in the AppStore – the chances of someone stumbling over the game without explicitly searching for it were pretty much zero. I also came to the sad conclusion that a price of $2.99 is much too high for a simple arcade game. I don't like this at all and I don't think this is a healthy state for the App Store to be in, but for now this is just how things work.

Getting my game reviewed was another challenge. Most bigger sites didn't respond to my emails, others required at least 3 promo codes to even consider reviewing. Some reviews were positive, while others failed to understand the concept of inertia - and I can't even blame them. Controlling a rocket powered robot isn't supposed to be easy. Learning to control the robot is the game, it's part of the challenge. It just takes some time to learn - time which most review sites simply don't have.

In the meantime I worked on the first update for Yuckfu, which has some minor UI improvements, but most importantly added the completely new Challenge Mode. This is something I thought of from the beginning – having pre-designed “container mazes” and spawn points. I also created some new animated backgrounds to have some more eye candy. One more advantage of the Challenge Mode is that the game now has a more shallow learning curve. The new version of Yuckfu (iTunes Link) is now available for only $0.99!

So, to gain some more exposure, I also decided to built a free “Lite” version of the game, which just cuts some of the levels from the Challenge Mode and the Highscore upload functionality. Let's see how this works out. Yuckfu Lite (iTunes Link) also made it's way to the App Store.

For some screenshots and more info head over to yuckfu.net.

Monday, June 22nd 2009 / Comments (1)
Tags: iPhone, Yuckfu Dev Diary

Yuckfu Dev Diary #11 – Buy, Buy, Buy!

After almost one year in the making, Yuckfu is now available in the AppStore (iTunes Link). For a short trailer and some more screenshots, head over to yuckfu.net.

Yuckfu

Wednesday, April 22nd 2009 / Comments (1)
Tags: Yuckfu Dev Diary

Yuckfu Dev Diary #10 – It’s Beta Time!

Finally, Yuckfu is in (closed) beta! I managed to include all the features I initially had planned. This includes the online Highscore table and replays, original music, several background animations and tons of polish. I have to say, it worked out far better than I could ever have imagined. The game looks, feels and also sounds great.

So right now I have some friends testing the game, while I iron out the last bugs. I’ll probably submit it to Apple before the end of the week. I’m also working on a trailer and a minisite for the game, so there's still some stuff to do.

I also have a lot more technical details to share, but this will have to wait until after the game is released. First things first.

Tuesday, April 14th 2009 / Comments (2)
Tags: Yuckfu Dev Diary

Yuckfu Dev Diary #9 – HUD and Tutorial Mode

It has been a while since my last update on my iPhone game. I haven’t had much time in the previous month to work on Yuckfu, but development is now on full speed again!

As you can see, I refined the graphics quite a bit. The edges of the playing area are now colored to make it clearer where your robot is and where the walls are. I also added the effect for spawning containers which looks great in motion. It’s actually a real 3D model with a rotating spiral.

Screenshot

For the HUD, I wanted a clean and simple solution that is showing only the information you really need. I ended up with mainly two elements: the score on the left, your energy on the right. As your energy is decreasing over time, the energy bar tells you at a glance how much you’ve got left. The four little boxes next to the score shows the “multiplier”. If you collect several containers in a row your multiplier increases and you get more points.

Read complete post »

Friday, March 6th 2009 / Comments (0)
Tags: Graphics, iPhone, Yuckfu Dev Diary