14 DAY TRIAL // Microsoft has been long touting the features and capabilities that its latest flavors of Internet Explorer have to offer to all users, and it also came up with a variety of test-drive websites to showcase them.
The latest of these is called Bubbles, inspired by Alex Gavriolov’s simulation BubbleMark, and aimed at offering a look at how the JavaScript performance improvements are felt by end users.
“The current version has been greatly expanded to take advantage of the new features of the Web platform and includes characteristics common to HTML5 games,” Andrew Miadowicz, program manager, JavaScript, explains in a blog post.
Those who access the demo, available for other browsers as well, will see a number of animated bubbles floating through space. At the core of the demo lies a 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,” Miadowicz explains.
“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 the background, there is a large image, which starts off occluded by a fully opaque mask rendered in a <canvas> element. When bubbles collide, a portion of the occluding mask is removed through applying a Gaussian filter to the mask’s opacity component, thus creating a diffuse transparency effect.
According to Miadowicz, the process also involves many floating point multiplications, which are being performed on elements of Typed Arrays, as long as the browser supports them.
Users will also observe a touch surface over the floating bubbles, set to respond to touch input or mouse input. Simulated magnetic repulsion is applied as response to touch or mouse click, and the floating bubbles are scattered around.
You can learn more on the mechanics behind this demo in this blog post on the IEBlog. At the same time, you can head over to the aforementioned test-drive website to see how well can your browser handle these bubbles.
If you haven't tried Internet Explorer 10 in Windows 8 Release Preview yet, you can download the platform from Softpedia via this link.
