Jump to content

Take IE10 for a Spin with Bubbles


Recommended Posts

Posted Image

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.

Posted Image

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.


Link to comment
Share on other sites

  • Replies 6
  • Views 1.8k
  • Created
  • Last Reply

It works in different browsers too, you just get the Opera logo for Opera and the Mozilla one for Firefox.

Link to comment
Share on other sites

31 FPS with IE10 vs 13 FPS with Google Chrome 19

computation time was for 40 ms slower in google

Link to comment
Share on other sites

opera 32 fps, palemoon 13 fps and ie 9 8 fps? Could also be the different add on's that I have on the various browsers but my primary is opera, and it has the most add ons?

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...