Warping Bitmaps with a Bezier Surface

image warp

If you have read my previous posts on drawTriangles, you will see that I love warping images. I decided to take this a bit further by using a Bezier surface. A bezier surface or bezier patch can warp a grid by using a set of control points. The control points in this example are the red circles, the grid can be seen by clicking the show grid checkbox. Try dragging the controls points to create your own warp or just sit back and watch the show.
There is also a method for doing this using away3d plus checkout this 3d surface built using nurbs.

This movie requires Flash Player 10

Update:
You can view the bezier surface in action on this client project I worked on recently. The surface was used to create chewing mouth animations from user’s facebook photos.



See more , , , ,

7 comments ↓

#1 Away3D BezierPatch | fat lines of code on 03.16.11 at 5:18 pm

[...] ← Warping Bitmaps with a Bezier Surface [...]

#2 jiannis on 04.13.11 at 6:55 am

wow, this is great! care to share the code?

#3 phil on 04.13.11 at 4:37 pm

hehe, sorry the code isnt in a state that I want to release yet. Check out the away3d version though http://fatlinesofcode.philipandrews.org/2011/03/16/away3d-bezierpatch/, its the same concept and the code is on wonder.fl

#4 Paul on 06.18.11 at 6:19 am

Can you please tell me how/from where you set the weight of the control points? I am trying to use away3d’s bezier surface on a project, but I need some points to have a sharper grid than the onthers. I tryed WeightedVertex but nothing changed. Now everything is too rounded, and I also don’t want to use too many control points. Thanks a lot!

#5 ttoinou on 08.05.11 at 3:13 am

Looks awesome, but i still don’t understand…
Could you explain how a bezier surface warps an image please ?
Thanks!

#6 phil on 08.07.11 at 6:57 pm

basically, its magic

#7 Bruno on 08.15.12 at 2:26 am

Hi,
Great work. I’m wondering if it could be used with non-square images.
Eg. I have a class that finds blobs in a image and adds curves around them. I’d like to be able to make the blob wider/thiner at some positions. I’m trying to make an app that takes some images(transparent png) of clothes and layers them, so I need to be able to stretch the clothes that are on the upper layers(eg. the jacket is thiner than the T-shirt on the layer below so I have to make it wider to mask the t-shirt).

Any suggestions are appreciated.

Leave a Comment