Earlier this week, the official Internet Explorer developer blog talked about the improvements Microsoft has made for running JavaScript-based websites in IE 10 for Windows 8. Now the blog has posted up a new entry which talks about a recently launched IE 10 demo site called Bubbles. The new demo site is based somewhat on the Bubblemarks animation benchmark.
The Bubbles web site shows IE logo "bubbles" that move in front of the screen, slowly exposing a winter landscape. The demo can be altered in a number of ways, including the amount of bubbles on screen, the collision effects, how gravity affects the bubbles and more. At the bottom of the screen you can see the frame rate of the demo along with info about its computation and rendering time.
The Bubbles site works with other web browsers as well but instead of the IE logo, the "bubbles" turn into the logo of that browser such as the Firefox and Chrome symbols.
The IE blog site goes into a great amount of detail on how the Bubbles demo site was made. It states:
At the core is a relatively simple JavaScript physics engine. On every animation frame, about 60 times per second, the physics engine recalculates the positions of all bubbles, adjusts the speed of each bubble by applying gravity, and computes collisions. All these computations involve intensive floating point math. Each bubble is represented on screen by a DOM image element to which a CSS transform is applied. The image is first translated around its origin, and then scaled dynamically to produce the effect of the bubble inflating. In JavaScript, every bubble is represented as an object with accessor properties, as introduced in ECMAScript 5.
Source: IE blog site | Image via Microsoft