Introducing Avaku: Customizing Avatars with HTML5 Canvas

Avaku was formerly an avatar module for Wishtides but the downfall of the project left the code unused. The poor avatar engine never had a chance to flaunt the power of HTML5 canvases; thus, I revived it with some nifty improvements: doubly linked lists, algorithms, and event-bindings all in JavaScript.

The current Avaku demo page demonstrates the final avatar customization application. I will write a full annotation or tutorial regarding algorithms and avatar customization soon but here, I describe my thought process and STL application into JavaScript.

Original Wishtides Avatar Engine

Originally, my responsibility was to develop an avatar engine with layers (like onions). Given a base and a set of dummy clothing from Christy Howland, I mocked up layers quickly with some JavaScript arrays and an HTML5 canvas that refreshes at a given interval.

Adding Layers

It was good for an hour of work but the architecture was messy: the canvas should have been refreshed only when layering events trigger. I scrapped the implementation and rewrote it using a doubly linked list that would mimic Photoshop layers. The end result would have the same functionality but would be easier to maintain because it doesn’t require random access iterators.

New Engine with a Doubly-Linked List

function Avatar() {
	this.head = null; // Points to the head of the linked list
	this.tail = null; // Points to the tail of the linked list
	this.length = 0;
}

Avatar.prototype = {
	addLayer: function(src) {},
	removeLayer: function(src) {},
};

The avatar acted as the storage class that maintained all clothing layers. Layers were added and removed to the linked list through the addLayer() and removeLayer() methods respectively. This way made it easier to bind click-events to adding layers and removing layers but the avatars still require adjustable layer ordinals like dragging a layer above another in Photoshop.

Nodes for Our Doubly Linked List

function Layer(src) {
	this.prev;
	this.next;

	this._img = new Image();
	this._img.src = src;
}

Each layer was aware of the layers before and after such that the layer could easily be replaced by another. By swapping some prev and next pointers, layers could easily shift their position in the linked list without leaving unlinked nodes.

STL Algorithms for JavaScript

Let’s not forget that we want our layers to shift above or below others such that the layers are entirely customizable by the user. This is where the new code begins. We have an interface that looks like this but requires algorithms.

Items

Unfortunately, JavaScript has no standard STL for algorithms so I implemented the storage class as the avatar and created the algorithms library myself. Exciting.

var algo = {};
(function(_) {	
	/**
	* Raises the ordinal of layer i
	* @param{avatar} 	Doubly linked list that contains layers
	* @param{i} 	Source of layer to raise
	*/
	_.raiseLayer = function(avatar, i) {
		var i = avatar.findLayer(i);
		if (i != null && i.next != null) {
			var tmp = i.source();
			i._img.src = i.next.source();
			i.next._img.src = tmp;
		}
	};
	
	/**
	* Lowers the ordinal of layer i
	* @param{avatar} 	Doubly linked list that contains layers
	* @param{i} 	Source of layer to lower
	*/
	_.lowerLayer = function(avatar, i) {
		var i = avatar.findLayer(i);
		if (i != null && i.prev != null) {
			var tmp = i.source();
			i._img.src = i.prev.source();
			i.prev._img.src = tmp;
		}
	};
})(algo);

This is library is reminiscent of the STL modifying sequence operations that take an arbitrary storage class and item to work with. I bound to these algorithms to two simple buttons + and - for raising and lowering layers respectively.

The End Result

With a little CSS magic, we have client-side avatar customization using JavaScript and HTML5 canvas.

Avatars

Of course, with some PHP and AJAX, this could lead to an avatar community such as Gaiaonline or Chloria.

Want to try the demo? The Avaku source code is also available on GitHub. If you like my work, please feel free to comment.