Infinite precision 3D curves

July 28, 2007

For an effect for a client, I needed to make things whiz around in 3D space along smooth but unexpected paths. They would be travelling at all kinds of speeds from very slow to pretty rapid, so my curved paths had to be some kind of continuous function rather than a bunch of sampled points. So how do you define a curve? Well, it kinda starts over there, curves this way a bit, then that way, then up a bit and bends the other way.

That's a rubbish definition. We can do better. In fact, a clever chap named Paul de Casteljau already did by inventing what we know today as the Bezier curve. These are fairly remarkable things. You pick a bunch of points in space and the algorithm makes a smooth curve that starts at the first point and ends at the end point, snaking towards all the other points along the way. If you've used Photoshop or similar drawing packages, you've probably used a Bezier curve in its Cubic form (4 control points) before, in 2D.

What I needed was a 3D version, but using as many points as I cared to define. I came up with this simple editor:

You do not have the latest version of Flash installed. Please click here to go and get it


In the editor above, you can use the controls shown bottom right to draw a 3D curve. They're more interesting when you change the depth a bit with A/Z, and you can see their 3D-ness when you move the camera around. You can use page-up and page-down to move in/out a bit, but since there's no screen culling you will see spazzy effects if you move in too far.

You can add as many points as you like, although it can get pretty slow. It isn't optimised at all really, since its just a utility for editing rather than a final piece. The rendering of the curve is ultra-simple too so if you add enough points, you'll just get a mess of straight line segments. The underlying curve is a genuine Nth order curve however, N being the number of points you've added.

So what can you do with these curves? Well, spangly 3D paths, like I said. Weren't you listening!

You do not have the latest version of Flash installed. Please click here to go and get it

Comments

RSS feed for comments on this post.

The URI to TrackBack this entry is: http://deeperbeige.com/blog/bblog/trackback.php/107/

  1. Ciz says:
    August 1, 2007 @ 04:54 — Reply

    Fantastic effect. Make each particle subject to mutually attractive forces of the others, for strange chaotic goodness.

  2. CMU says:
    August 1, 2007 @ 09:32 — Reply

    The original brief included an attraction to the mouse like that. I experimented with it a bit, but couldn't get anything I was really happy with.

    You can purturb a Bezier curve as a whole in a continuous way by pushing the control points around, but the overall effect is hard to control precisely. I tried doing a version that switches particles from following a path to a forward-integration gravity model when they get close to the mouse too, but the effect still wasn't really what I was after.

  3. Ciz says:
    August 2, 2007 @ 02:48 — Reply

    Maybe have control points subject to mutual forces, some attractive, others repellent? Perhaps the lines will swirl and knot around each other then peel away to wrap around a different curve. Or it might just be a big scribbly mess.

Leave a Comment

Line and paragraph breaks automatic, HTML allowed: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <code> <em> <i> <strike> <strong>


You must prove that you're human to post here!
Enter the characters from the image below

captcha image