sakri rosenstrom blog

Here’s a demo I made for my presentation at multi-mania. I played around with verlet integration before and have long wanted to try this technique on text. Once I got the vectorization going, it was just a matter of connecting all the points to “Verlet Sticks”.

This turned out to be a little tougher than expected. The tricky thing about Verlet Sticks, is that if you connect the same Verlet Point to multiple Verlet Points, the calculations go berzerk, and your shape quickly vanishes from the canvas into the ether. So the challenge was to find a way to connect all the points of a vector shape, with a minimum number of “individual connections”, yet in a way that maintains the integrity of the shape. Keyboard cat played me off multiple times in my attempts .

Finally, the solution I landed on, was to create a grid out of all the points. The idea is to create a boundary rectangle, which maintains it’s shape via “cross sticks”:

Then, create a grid using all the points of your vector shape(s), in such a way that each point connects to a subdivision of the outlines of that “boundary Rectangle”:

In the image above you can see the “boundary rectangle” surrounding the vector shape. Then, each point is connected with a vertical and horizontal line. These verticals and horizontals are then connected to a “subdivided” boundary rectangle.

In the demo you can turn “render sticks” on and off to visualize the trick.

Strengths:

• Can handle pretty much any set of shapes and subshapes

Weaknesses:

• Due to the “Boundary Rectangle” the shapes “bouncing” is limited, a “T” for instance can’t lie diagonally, it always ends up on one of the four sides of the rectangle.
• The vertical and horizontal lines shouldn’t have more than two subdivisions. To fix this, the code first checks for all points along the same x and y, then shifts any instances above 2 by .5 pixels each. It’s practically invisible, but it’s there.
• Doesn’t support transparency, I guess this could be done with a blendmode or so…
• More complex shapes can still spazz out and disappear

Click to try out the demo here . Ignore the collision physics, it’s CRAP! The effect works best with “pixel fonts”. The controls are :

• RENDER : renders the input text with the selected font
• UPDATE : update one frame of animation (when stopped)
• PLAY : updates the animation on an enter frame
• BOUNCE : when the characters are just skidding the floor, spice things up by clicking this button

The code is DIRTY, but does the trick. I’ve uploaded the source for the brave (or desperate ). It’s the same project that I’ve been using for my last 5 or so blog posts, so there’s a lot of redundant code in there. Download it here.

ext steps:

• compose a clean “all purpose” class for generating such a grid
• Render shapes with curves, using the drawing api
• Use nicopteres vectorization code to do this with photos…
• Improve the curves and optimization, again I think I can use some code from nicopetre

I just wanted to put this out there because, well, it’s kind of nifty… More to come, enjoy!

.

I REALLY didn’t think it was gonna be this easy… no complex maths, just a bunch of looping and hitTest, hitTestPoint kind of code

While coding, I was sure I would roast my cpu, maybe run up to 20-30 polygons, but my trusty laptop can churn out 70 shapes at a time before the framerate starts to slowdown. I find it mesmerizing to watch… Cool with 70 shapes, but also very cool to watch a fewer number and actually appreciate the “realism” of the collisions (not perfect, but not bad). It’s late, the code is dirty, time to shut down and watch heroes

…but if you want the dirty source code, ’tis yours

More to come… am really enjoying this…

Keith Peters presentation at FOTB was on the last day, at 9 am. Not necessarily the best time for “Advanced AS Animation” I was wide awake though, as soon as he started talking about Verlet Integration. The presentation slides are up on his blog. Keith also provided this gamasutra link for more info.

I was compelled try it out. It’s like magic, such simple math, yet, the result looks like the work of a physics genius! Here’s my first test : The Verlet Polygon Explorer

It’s a Flex project, I added some widgets to make “playing around” easier. You can change the number of shapes, change the force of gravity, the “rigidity”, even add some wind and bounce the little bastards…

This really is a powerful approach in terms of performance. I only started to drop below 30 frames per second after 70 shapes… Naturally, “rigidity” adds a lot of overhead (number of times each “update” is calculated per frame).

Click the link above or images for the demo, source files can be downloaded here.

I’ve got a bunch of ideas for stupid experiments, but also for some real applications… This is a great tool to add to any flash developers bag of tricks! Thanks Bit-101!