A Wonderwall-like effect, with Traer AS3

There are so many reasons to admire Yugo Nakamura’s work I wouldn’t know where to start. The incredible range, quality, and singularity of work on display at tha.jp (the studio’s site) is simply puzzling. I had the chance to see Yugo’s talk at FITC in Toronto a few years ago, and the modesty and insight he showed was absolutely amazing. One of his topics was -if I remember well- about over sophistication, and how he relentlessly seeks to push boundaries emerging from a seemingly simple form. The Wonderwall is in my opinion a perfect example of that commitment. And as you’ll see, we’ll barely scratch the surface of it and yet have a peek at how technically and artistically refined the original interactive piece is.

A Wonderwall-like thingy with Traer AS3

What this little experiment is focusing on is the deformation of the grid when interacting. The underlying grid pattern is not stretched and deformed as in the original (which I do realize is absolutely part of the awesomeness of it). This experiment solely focuses on the use of physics simulation to recreate the effect, and yes, there’s way more to it in the real thing. Anyways, here’s the quick experiment, in just shy of 370 lines of non-engine code:

WonderwallLikeRefined.swf, hover the grid

The differences with the original

As previously mentioned, the grid pattern is regular. Rollovers are basic (lines connecting the particles). There’s no text, just images.
But from a code perspective, the main difference is probably that there’s springiness in this experiment, while THA’s original piece shows none. The reason is (I’m guessing) that another integration method was used to set the constraints: Verlet integration. Traer uses a Runge-Kutta integrator which is less suitable for stiff joints, usually approximated by infinite stiffness springs. Well, no need to hide it. I kept the springiness in.

How this is done

Using two sets of particles

I believe this diagram is pretty self explanatory. Two sets of particles are in use, linked together in a one-to-one relation (in our case using a Spring). Attached to the mouse is an Attractor (with negative strength) that repulses the free particles. A face of the final and deformed grid is defined by four free particles. Now, if we were to use this as-is, we would get an awful amount of distortion within each image.

Subdividing the faces

Given these four points, some subdivision is necessary to minimize distortion showing the triangles used to draw the faces. In the bin/ directory, you will find one .swf without face subdivision: not so pretty. In the source code (WonderwallLikeRefined.as), I’m using 6 subdivisions (72 triangles) for each face.
There’s a lot of room for improvement there, the number of subdivisions required to draw a nice face depends on its dimensions and the amount of deformation applied. One possible improvement could be to check the difference in slope between the top and bottom edges: the greater the difference, the greater the number of subdivisions necessary. I am inclined to think that in THA’s piece some system is in place: their grid is huge, runs real smooth, with minimal distortion.

Where is the mouse?

Another problem arise. How do we handle rollovers? One simple way is to check if the mouse position is within a given polygon (here, a face defined by 4 free particles). Luckily, Paul Bourke’s line-to-line intersection algorithm comes in handy, as illustrated in the diagram above. If we take half a line starting from the current mouse position and passing through an arbitrary point, the mouse is inside the polygon if the number of intersections is an odd number (or just 1 or 3 in our case). Yup. It’s that simple!

Again, in this piece of code, I am performing the check for every single face every time the physics simulation advances. A variety of techniques could be used to improve this. One way to do this could be to perform this test on the polygon encompassing half the particles. If the test yields a true, divide it in half. And again, until we get a false. Or the subset is a face. Yup, even a good old divide and conquer would be a real improvement.

A disclaimer

I don’t pretend I know for sure how the original Wonderwall was built by THA. They may have taken a totally different approach and the only way to make sure would be to ask them. But I’m too shy. Or to decompile the .swf, which would be totally sacrilegious given how much I respect these guys and their work. So really, I have no clue. This is simply an exploration of how one could have done something a bit similar with the Traer physics engine for AS3. And this was only driven by my admiration for the studio’s work, and sheer curiosity (how did they do it??! this is sooo cool!!).

Useful links

Github repo for TraerAs3 (includes the Wonderwall-like effect files)
The gorgeous original Wonderwall
Paul Bourke’s line-to-line intersection algorithm
Tha, Yugo Nakamura’s studio: an absolute must-see
And of course, Yugop