How the tiles are animated

This article reveals how TheBroth’s tiles are animated, so you see them whiz (or “fly”, as we call it) around the screen.

In another post, we discuss the tiles that make up each mosaic in detail. For the purpose of this article, we just need to know that each tile is basically a “div” with a set background color.

In yet another article, we discuss the basics of making any HTML element move around the screen using simple JavaScript.

The basics of how to implement dragging using JavaScript are explained here: How to drag something.

So here’s what makes the tiles in TheBroth “fly”:

When you drag a tile (link: basics of dragging an object), the end position of the tile is sent to the server. The server stores the new position in the database and in turn, returns to the browser the x/y positions of the tiles that have moved since the browser was last updated with new tile positions (read more about that here: Use of Ajax for the mosaic).

We now need to manipulate the current x/y screen position of each tile until they’ve all reached their target position.

For this, we’re using the timeout() function, with which one can set a time delay after which a specific function is executed.

We called our function that animates the tiles “fly()“.

Each time fly() is called, it moves the tiles closer to their target position, using a mathematical function that determines the step size.

The function fly() will call itself, again using the timeout() function, until all tiles that need to be animated have reached their target position. To achieve a smooth animation, we call our fly() function 50 times per second (ie. with a timeout of 20 milliseconds).

The real speed of the animated tiles depends on your computer and your browser. For example, on Macs, the Safari browser (we checked version 1.3.2) has real trouble with having its DOM manipulated when there are so many objects, and so, fly() itself takes longer than 20 ms, and the animation looks rather poor and slow. On Firefox on the PC, you should get close to 50 Hz even with less than high spec’ed PCs.

Determining the speed of the tiles

We decided upon a fixed acceleration for the first few steps of the animation, in a way that mimics the acceleration of a tile when a human player grabs it and moves it some place else. For this, we have predefined a table (using a JavaScript array) that returns a certain acceleration factor that is used to calculate the speed of the tile, eg. its dx (delta x) and dy (delta y).

After a certain step number (defined by the size of the predefined step array), the dx and dy depends on the distance of the object from its target position.

The closer the tile gets to the target, the slower its speed, in order to mimic a human that is carefully positioning an object, now slowly, after dragging it quickly across the screen.

A tiny sinusoidal demo

Did you like the tile that floats back and forth further up in the article? It is actually an image (hence the purrty dropshadow), but it is animated based on the same principles.

Download and examine the external JavaScript that we used on this page or check out the separate demo here.