Badass JavaScript

LimeJS: A New HTML5 Game Engine

What follows is a guest post by Olavi Tonisson from Digital Fruit, the makers of LimeJS.

Only few days ago web and mobile developement company Digital Fruit has released under Apache open source licence HTML5 game engine LimeJS. Our desire to create game toolkit was initially driven from lack of tools for developing HTML5 based games generally and specially for touchscreens (iOS, Android). LimeJS’s goal is quite clear and simple: to provide an easy way to build good game experience without thinking about inner workings.

There were two main questions what we tried to solve. First, how to make HTML5 based game experience so close to any Flash game or native game on modern smartphone that regular user will not see difference. Secondly, how to bring development time (and therefore cost) of game to similar level what Flash games enjoy today. I think we succeeded in both of our goals. 

You can go and check it out from Lime JS webpage http://www.limejs.com. 

From the editor: LimeJS looks like another great entry into the HTML5 gaming space.  It is based on the Google Closure library, and supports rendering to both the DOM and to the HTML5 Canvas element.  There are some nice demos of LimeJS here, and an excellent programming guide here.  The code is availalble on Github.

Face Detection in JavaScript via HTML5 Canvas

You have probably seen face detection at work in programs like iPhoto and Picasa, but what if you could do that performantly in JavaScript?  Chinese developer Liu Liu has done the honors, and implemented the algorithm using the canvas element.

The algorithm is implemented on top of a JS port of a C-based computer vision library by the same author.  It works off a grayscale version of the image, and seems to be quite reliable in detecting faces in photographs.  The demo then draws a red box around each face in the picture, but the library could be used to do much more interesting things with this data.

You can imagine the likes of Facebook using something like this to help you tag photos sometime in the future, and if the algorithm could figure out who each face in a picture belonged to, the possibilities would be endless - and maybe a bit scary!  With faster JavaScript already here, and awesome APIs like canvas, we will soon see even more cool things like this in the wild!  It is an exciting time to be a JavaScript developer.

You can check out a demo of the face detection algorithm, for which the only server-side code is a PHP proxy.  The code is also available on Github.  Impressive work!

StackBlur: A Fast Gaussian Blur Algorithm In JavaScript

Mario Klingemann has created a fast implementation of an “almost gaussian blur algorithm” in JavaScript.

This is a compromise between Gaussian Blur and Box blur It creates much better looking blurs than Box Blur, but is 7x faster than my Gaussian Blur implementation. I called it Stack Blur because this describes best how this filter works internally: it creates a kind of moving stack (or maybe a “Tower of Hanoi” kind of structure) of colors whilst scanning through the image. This “tower” controls the weights of the single pixels within the convolution kernel and gives the pixel in the center the highest weight. The secret of the speed is that the algorithm just has to add one new pixel to the right side of the stack and at the same time remove the leftmost pixel. The remaining colors on the topmost layer of the stack are either added on or reduced by one, depending on if they are on the right or on the left side of the stack.

The original version of the algorithm was written in Processing, and there have been ports to other languages, but Mario decided that it was time to bring it to the canvas element as well.  The algorithm is fast enough that if you are on a modern browser (Chrome, Firefox 4 beta, etc.) the image can be updated in real time while you drag the slider controlling the amount of blur to apply.  Check it out, here!

Very neat!  It is with fast algorithms like this, and with fast JavaScript performance that we will be able to reproduce the effects that coders in the desktop and Flash world have had for a long time.  A JS version of Photoshop isn’t that far off!

Biolab Disaster and the Impact Engine: Build Incredible Games With Canvas

Dominic Szablewski has created an awesome canvas game called Biolab Disaster, which is extraordinarily performant.  It works in all modern browsers (including IE9) with varying framerates, but never much below 30fps except on mobile devices (very acceptable).  It was built using Dominic’s own Impact Game Engine which includes a level editor to make designing games very easy!  While Impact and the level editor are not yet released, Dominic has recorded a short video showing how the game was made.

Be sure to check out Biolab Disaster, the Impact engine, and a more detailed post about the creation of both technologies on Dominic’s blog.  Awesome work!

Fabric.js: An Interactive Object Model and SVG Parser for the Canvas Element

Kangax has released Fabric.js, a library that aims to make interacting with objects drawn on the canvas element easier.

Fabric.js started as a foundation for design editor on printio.ru — interactive online store with ability to create your own designs. The idea was to create Javascript-based editor, which would make it easy to manipulate vector shapes and images on T-Shirts. Since performance was one of the most critical requirements, we chose canvas over SVG. While SVG is excellent with static shapes, it’s not as performant as canvas when it comes to dynamic manipulation of objects (movement, scaling, rotation, etc.). Fabric.js was heavily inspired by Ernest Delgado’s canvas experiment. In fact, code from Ernest’s experiment was the foundation of an entire framework. Later, Fabric.js grew into a collection of distinct object types and got an SVG-to-canvas parser.

Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.

As you can see in the demo, Fabric.js is fast and produces a great user experience for manipulating a design - right in the browser.  It is also simple to use from your own code:

var canvas = new fabric.Element('canvas');

var rect = new fabric.Rect({
  top: 100,
  left: 100,
  width: 60,
  height: 70,
  fill: 'red'
});

canvas.add(rect);

Because Fabric.js has a SVG parser, you can import complex shapes from a vector editor like Adobe Illustrator or Inkscape into your canvas element very easily.

You can check out the demo here, and get the code on Github.  Great work!

PaintbrushJS: Client Side Image Filtering For The Masses

Dave Shea, who you might remember as the guy behind the CSS Zen Garden, has written an interesting JavaScript library that makes it easy to apply Photoshop-like image filters on the client side using the magic of the canvas element.  Once you’ve included the script on the page, all you need to do to get the effects working is apply some classes and HTML5 data attributes to the images that you want effects applied to.  PaintbrushJS automatically takes care of rendering the effects and sending the processed image back into the element.  It works on both image elements and background images alike, so no matter how you’ve built your HTML you should be all set to add effects right away.  Here is an example showing how to apply a gaussian blur effect to an image:

<img src="image.jpg" class="filter-blur" data-pb-blur-amount="0.5">

As you can see, you add effects through class names and set their attributes through HTML5 data attributes.  The filters currently available are:

1. Gaussian Blur
2. Greyscale
3. Noise
4. Posterize
5. Sepia
6. Tint

As you can see in the demo, PaintbrushJS is pretty fast, applying filters on all 24 of those images before the page is even finished loading.  The most impressive of the filters is the Gaussian Blur implementation, which is generally quite a processor intensive filter, but can be done very quickly and efficiently by PaintbrushJS.  Even on slower devices like the iPad, the effects render quickly enough so that the user hardly even notices.  Very impressive!

You can check out a PaintbrushJS demo here, the documentation here, and the code on Github.  It is exciting to see more and more traditionally static effects come to the browser thanks to the magic of JavaScript!

DeviantArt Muro: An Awesome New HTML5 Drawing App

DeviantArt has a brand new drawing app called Muro, and no it isn’t a desktop app or even a Flash or Silverlight based one, it is written entirely using standard web technologies.  This is a great showcase of the power of HTML5’s new canvas element to do both vector and pixel based image manipulations.

Muro has many of the features of professional desktop drawing applications such as Adobe Illustrator, including 21 different brushes, layers, Photoshop like filters, undo/redo and the ability to export your drawings as image files or save them directly to your DeviantArt account.  Another cool feature is its ability to interface with a Wacom tablet that many artists use.  It does this through a plugin that gives JavaScript access to data from the tablet.  Chances are, if you have a Wacom tablet you already have this plugin installed, so you don’t need to worry about installing anything extra.  Muro has a basic and a pro mode, both of which are free, however, if you want to get more brushes, you will have to pay a small fee.

Because Muro is a web application, it also works on the iPad.  This gives you a more direct experience with your art since you are touching the screen exactly where you want something to appear.  The cross platform nature of the web is what makes it a powerful computing platform.

It is exciting to see full-featured HTML5 applications get developed.  Muro is a testament to the power of these new technologies not just as a platform for shiny technology demos, but for full-blown applications that compete with desktop and plugin based apps.

Very impressive work, and from a well known site to boot!  Be sure to check out Muro and view some impressive examples of art created with the new tool, as well as dive in and start drawing yourself.  It will be exciting to see the art created with this new tool!

Water Ripple Effect in Canvas

Sergey Chikuyonok has another cool HTML5 canvas demo, this one his submission to the JS1K competition that we covered last week.  The effect is implemented in 1003 bytes of uber-compressed badass JavaScript for the JS1K competition, however, he also has another demo using the image you see above on his website.  The code is a port of a Java version of the same algorithm, and is 186 lines uncompressed.  

Very impressive!  You can check out the JS1K entry here, the version with an image here, and the uncompressed source code here.

Image Maps Make a Comeback: Added to the Canvas Element

It looks like interaction and accessibility on the canvas element is about to get much easier to implement since the old and fabled “usemap” attribute is going to be added to the much hyped element.  Back in the day, the Map element was used to make regions of an image into hyperlinks to other pages.  Here is an example of how it worked, in case you don’t remember:

<img src="planets.gif" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.html" />
  <area shape="circle" coords="90,58,3" href="mercury.html" />
  <area shape="circle" coords="124,58,8" href="venus.html" />
</map>

Now, there is a proposal to add the same feature to the canvas element, making areas clickable to either other pages or to JavaScript code that you might want to run for interaction purposes.  Besides being a boon to development of interaction, adding support for image maps to the canvas element also allows for accessibility and keyboard focus on those interactive regions without the developer having to do any additional work.  It looks like the proposal has a good chance of making it into the final spec since all major browser vendors are backing it.

Here are the positive effects listed in the proposal:

• Simplifies the task of adding interactive areas on a canvas.
• Provides a simple mechanism for authors to use to ensure that interactive areas of a canvas are keyboard navigable by default.
• Provides a simple mechanism to provide name/role/state and description information to user agents about interactive areas on a canvas.
• Provides a simple mechanism to expose the focus of interactive areas to accessibility APIs and provide focus rectangles without burdening the author.
• Provides a simple mechanism to add ARIA attributes to provide additonal semantics to interactive areas on a canvas.
• Makes it easier for authors to make interactive canvas content accessible.

What do you think?  Is this the best way to add easy interactivity and accessibility to areas within a canvas?  Let’s give some feedback to this proposal!

Commodore 64 and GameBoy Emulation in JavaScript

Tim de Koning has written a Commodore 64 emulator in JavaScript.  It runs on the Canvas element, like most of the many emulators written in JavaScript do, and can load and render the binary ROMs without an additional conversion by another program.  The JavaScript emulates the processor and the memory of the old Commodore systems, and interprets the op codes, finally rendering the output to the screen using the canvas element.

It seems that there is an emulator for just about every old game system showing up, including the previously covered NES Emulator, but one thing we haven’t seen before is a tutorial on how to create your very own.  Imran Nazar gives us this in the first part of his multipart series, GameBoy Emulation in JavaScript: The CPU.  In this article, Imran goes into detail about the GameBoy’s Z80 chip, and describes how a software emulator in JavaScript can be implemented for that chip.  He also describes how the processor interfaces with the memory, and how the dispatcher that actually runs each of the instructions works.

You can check out a demo of Tim de Koning’s Commodore 64 emulator here, and the sourcecode on Github.  Also, be sure to read through Imran Nazar’s post on GameBoy Emulation here, and come back to his site for the rest of the articles on the subject as he writes them.  If you’d like to check out the GameBoy code in progress, you can do so on Github.  It is exciting to see JavaScript being used for new and different things!