how might I achieve the raster image deform/warp seen in the iPhone app Wobble?

[CCJ]

Hello all,

I am very interested in applying the warp/deform effect seen in the iPhone app Wobble (it lets you define regions on a raster image and then deforms those regions as it gets input from the accelerometer or the user's touch as if they had adopted faux soft-body physics) to a game I am making, but I'm not sure how this effect was achieved.  Anyone have any advice as to how I might program an analogous effect using GLBasic?

Thanks,

CCJ

[Wampus]

Heh, Wobble is a funny app. 

To create this kind of effect you'll need to draw the defined wobble area as a mesh of polygons then make the polygons nearer the centre of the defined mesh area move around slightly more than the polygons at the outer area. I haven't got an example unfortunately but the link below explains how a similar effect is created to give you a better idea how to create a wobble instead.

http://blog.sqrtof5.com/?p=122

[CCJ]

Hmm, very interesting link; I think something like that could certainly work.  I'd really love to get some help on how to implement the described algorithm in GLBasic however-- making the polygons and such shouldn't be too difficult to figure out, but what about texturing them with the regions they are meant to deform?  Also, how do I achieve the spring/damping movement effect with GLBasic?

[Cliff3D]

I wondered if that was the kind of effect you were thinking of. Looks like an ideal candedate for the famous "POLYVECTOR" command - could be a lot of fun playing around with ways to deform a grid based on that.

[matchy]

Now that's a good question and sample response. 

I'd create this effect (and perhaps other similar types such as water surface) in real-time constructed 3D model with Box2D handling the physics. 

[CCJ]

I'd create this effect (and perhaps other similar types such as water surface) in real-time constructed 3D model with Box2D handling the physics.

I don't suppose GLBasic has a tracing function or something to quickly create said 3d meshes out of bitmap sprites, does it?  Manually making a flat mesh from a sprite in a 3d modeling program like Blender can be a pain... that's also why I wanted to know if this deformation effect could be achieved without ever changing the image format from bitmap-- Flash has the DisplacementMapFilter [http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/filters/DisplacementMapFilter.html] class for this purpose; does GLBasic have any equivalent functions that could read in the pixel values of a bitmap image and manipulate it with them?

Thanks all,

CCJ

[Kitty Hello]

take a look at Samples/Media/Polyvector. It's basically that without the interactive movement of the points.

[CCJ]

take a look at Samples/Media/Polyvector. It's basically that without the interactive movement of the points.

Ah, this is very interesting indeed... question is, how would I apply 'springiness' to the points so that after I drag them and let go they snap back to their original position and bounce until some specified damping value makes them still again?  Would Box2D be a good place to look for such effects?  Speaking of which, where can I download the most up to date Box2D files-- I searched the download showroom and the Box2D thread here on the forum and came up with several different downloads, all seemingly rather dated.

[Kitty Hello]

nah, no Box2D.

Just do this: connect each of the nodes with a "rubber band". Store the original rubber band length.

Now, after you moved one point, 4 rubbers are stressed. Iterate through all rubbers. If they are pressed, push the attached nodes by 0.1 * what the rubber is too short now (leave out the node you just move!!). If they are pulled move in the other direction.
Draw the grid. Repeat that.

[Wampus]

CCJ imo using things like a 2D physics engine and Blender are way too much for all this sort of thing (although I know the example I posted used a 2D physics engine to model the 'strechiness' of the points). You don't need to change anything about the bitmap image either.

I suspect that if you familiarise yourself with how the Polyvector command works, both in theory and through testing, how to create deform/warp effects will become much easier to imagine. What's more you'll probably work out how to do it in an optimally efficient way. OpenGL does things a certain way and, by extension, so does GLBasic.

[CCJ]

nah, no Box2D.

Just do this: connect each of the nodes with a "rubber band". Store the original rubber band length.

Now, after you moved one point, 4 rubbers are stressed. Iterate through all rubbers. If they are pressed, push the attached nodes by 0.1 * what the rubber is too short now (leave out the node you just move!!). If they are pulled move in the other direction.
Draw the grid. Repeat that.

That sounds like a plan, but I'd still like to know the right files to integrate for box2d; creating my own physics "the hard way" as detailed above could become cumbersome after awhile...   

Thanks,

CCJ