Friday, October 9th, 2009
Fun Friday: Mullets and Space Battles
<p>The week is almost over, and that means it's Fun Friday! Ajax and HTML5 aren't just for serious business apps ("business in the front, party in the back"):
-
<canvas width="640" height="480"
-
id="screen" style="border: 1px solid #ddf;"
-
moz-opaque="true"></canvas>
Notice the moz-opaque attribute. Evidently this showed up in Firefox 3.5 and:
...lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized.
Hopefully the other browsers and the HTML5 spec can pick up this useful property.
Another unique aspect of this sample is that many free, open source tools were used to create all the images and sounds. All the graphics were created with the Gimp and Blender, and the sounds were made with csound.
BTW, if you are graphically challenged like me but need resources like this for applications and games I always recommend either grabbing images, video, and illustrations through the Creative Commons search engine, Wikimedia Commons, or iStockPhoto.com (you could grab an Illustrator file from iStockPhoto, for example, and then convert it into SVG using Adobe Illustrator to bring into your fancy web page).
Related Content:
iStockPhoto.com is way overpriced, but the Creative and Wikimedia Commons are great resources.
Ajax and HTML5 aren’t for serious business apps at all.
Loading a table in an app I am working on at the moment with Ajax/JSON took several seconds of frozen browser, or over 30 seconds on a timer, whereas it takes < half a second from plain HTML in a frame.
@Darkimmortal: seems to load fast enough for me…
http://extjs.cachefly.net/ext-3.0.0/examples/grid/buffer.html
Weird FF 3.5 bug. I closed the tab ~30 seconds ago and the music is still playing. But still awesome to see this done natively in the browser.
The opaque tag from Mozilla reminds me of enable-background from the SVG spec. For good reason too, they have the same intent / allow the same optimization. I’m looking forward to continued benefits from Mozilla programmers applying lessons and tools from the SVG spec to Canvas.
To Darkimmortal:
You’re not programming your application correctly. Ajax should never freeze the browser, but it can if you don’t use it appropriately.
To tj111: Interesting bug — I’ve seen it many times with Flash, I’m surprised it’s also showing up in FF3.5 native . It’s likely related to audio buffering, and it’s likely from a similar programming bug. Let’s try to keep an eye on this one.
-Charles
FF 3.6 adds another tweak, that may increase performance when using lots of scaled images…
ctx.mozImageSmoothingEnabled == false;
“Gecko 1.9.2 introduced the mozImageSmoothingEnabled property to the canvas element; if this Boolean value is false, images won’t be smoothed when scaled. This property is true by default.”
@tj111 @downchunk @rbebic I think I’ve read somewhere FF3.6 fixed the bug.
@shuan to bad SXC recently changed hands to them as well