Background

On September 27th I attended cool JavaScript meetup in Brighton called asyncjs. During two sessions (unfortunately I missed the first one so I had loads of catching-up to do) we built an amazing JavaScript Jungle / JavaScript environment.

We were asked to fill this environment with jungle creatures that respond to the occurring changes - sun, rain, time of the day and so on. Creatures could move around, eat grass or even eat each other.

Entire environment was created using jQuery and we were also allowed to use HTML5 canvas support libraries such as paper.js and raphael.js. In addition to that, we used fantastic little library called broadcast.js to create event-driven environment for our jungle.

You can check the code at async.js GitHub repo and the demo of the actual, working jungle is here: http://jungle.asyncjs.com/. Note, that you must use HTML5/canvas compatible browser to see it.

Elephant

To build my creature I used Raphael library to display vectorized shapes I created earlier using GIMP. I drew vector image which I exported to SVG format to access the SVG path string. I used it to create non-standards shapes, such as elephant body or tail.

	//create tail
	var tail = r.path('M36,90l-19,62l24-33L36,90z').attr({fill: '#e2dede', 
		'stroke-width': 2, 'stroke-linecap': 'round', 'stroke': '#878686'});

Note, no images/raster-graphics were used and javascript file is the only resource here.

Simple shapes, such as round blinking eye are using standard ellipse objects, not much to explain here.

Trunk is created using a Bezier curve (10px wide). Animation moves one off the pivot points up when "sprinkle" event is raised by a timer. When trunk is up, custom particle system creates water particles. At the moment the maximum amount of the particles is set to 10 only - higher number significantly reduces the performance

When trunk is down, end pivot point is moved left & right to create illusion of the swinging trunk.

That's it really!

Please, feel free to ask more questions below and don't forget to check out fully working jungle and other cool creatures at http://jungle.asyncjs.com/