Morphing particles

Legendary Swede OutsideOfSociety is back again, and this time he’s armed with just over 20,000 morphing particles. The idea is simple: morph from one particle-based shape to another. The end effect, however, is mesmerising, which just confirms that particles are always a winner. You simply can’t go wrong. Well you probably can, but you have to really try.

What’s interesting about this approach is that it uses JavaScript for the shape morphing; each particle is passed an updated position by JavaScript on every frame. But there is an interesting alternative approach to this: the tweening equations could be implemented on the GPU as part of the shader. From there the JavaScript’s involvement would be to pass a tween value between 0 and 1 to the vertex shader which would then be responsible for updating the position of the vertices accordingly. While the latter approach is more complex it could significantly improve performance since the GPU is now handling virtually everything to do with the particle motion.

That said, it’s a testament to Three.js (which is used for the rendering), JavaScript and of course OutsideOfSociety that 20,000 particles can be moved around the screen at 60 frames per second. Welcome to the future, I love it.

OutsideOfSociety actually sent this update:

There are 85k particles, 65k are the model and 20k are the extra ones spread out within a sphere.

So actually there are a ton more particles than I’d noticed in the source code, which only goes to show how impressive the work here is! Also the easing is done in JavaScript, but the actual particle positions are updated in the vertex shader rather than in the JS. Couple of corrections there, folks!

Related posts:

About Paul Lewis

Paul (@aerotwist) has been making stuff on the web for over a decade. He is currently working as a Solutions Architect for Huge in London. He's also really interested in physics, maths and other nerdy pursuits. An incredibly creative person, he loves to mix code and visuals to make beautiful experiences. Ultimately he believes awesome needs no use-case.

CreativeJS

CreativeJS.com is the go-to place to find exciting JavaScript demos, projects, games, and well, anything else that we think is awesome. We've got a whole team here to bring you the best of what's out there. Find out all about us.

Suggest a site

Do have a project or site you think we should feature? Whether it's yours or just something you've seen that you love, go on and tell us about it!