Scripted Image Mosaics

Here's another useful tidbit.

I already wrote a lot of posts about Javascript Sprites, how to animate them and how they perform. What I neglected so far is how they actually get on the stage or the page to use the correct term. Another fact is also that most people won't have flashy Scripted animations all over their page – for those people utilizing one of my sprite classes is not just impractical, it's also a waste of bandwith.

What it will do

To give those people some JavaScript love too I quickly coded a Mosaic Object this morning. It will basically look up a particular piece of your image and return:

• a canvas element which you can draw into a canvas or attach to another element
• or a div element, perfectly sized to fit the mosaic piece with background and background position set apropriately

How it Works

But there is no result without work first, so lets see how the ingredients look like.

Preparing the Image

Since this is a code demonstration I didn't pay too much attention to a beautiful image. Though it serves it&apo;s purpose to demonstrate different smaller images merged into a larger one.

Initializing a new Mosaic

Now that we have an image to display we need to set up the mosaic object to do it's magic. Since this is an Object all we have to do is assemble some information about our image:

It's pretty obvious that we need to provide an image. The reason for this is that a canvas context throws an error if an image has not yet been loaded. And since this class doesn't implement an image preloader it assumes that you have loaded an image and it is ready to be drawn.
The class further needs an array with id's to assign to the matching coordinate entry in the coordinate array. The coordinates have the format of [x_loc, y_loc, width, height] for each mosaic piece.

After this we can call different types of constructors to get different behaviour:

The Minimal Constructor

This constructor creates the default Mosaic Object. Based on browser capabilities (if canvas is supported or not) it's getSlice method will return either a canvas object or a div.

DOM Constructor 1

Use this constructor to force the usage of a DOM Mosaic. Instanced this way, the class will always return a div when getSlice is called.

DOM Constructor 2

This constructer works identical to the DOM constructor 1, except that it allows you to provide a classname the returned divs will get assigned automatically. If you leave the forceDom or set ut to false, the basic constructor is invoked and if canvas isn&apo;t available the classname is used. For canvas the classname is always ignored.

Once you have your object you might get any slice with one of the id's you provided previously.

And Some Examples

Canvas example
DOM Example

Last But Not Least — The Source

The cross browser Prototype of Mosaic. (tested in Opera, Firefox, Safari – sorry can&apo; test in IE)

Let me know if this is useful to anybody or if there is a bug I need to rectify.

Have Fun!

Tags: Games, JavaScript, tile graphics