Interaction Bezier Curve (Composition by gtoledo3)

Author: gtoledo3
License: (unknown)
Date: 2010.07.14
Compatibility: 10.6
Required plugins:

Last night I was looking at and saw this sketch:

and this:├ęzier_curve

...which inspired me to make this composition.

This composition uses iteration to construct a cubic (three point), or quadratic (four point) curve, and allows one to interact with the points that define the curve path.

It also features a mode to visualize the path, configurable drop shadows for the main curve and/or the point handles, and some other options.

-Added texture variant 4/7/11, removed triangle path viewer from that version.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

cybero's picture
Re: Interaction Bezier Curve (Composition by gtoledo3)

That is really impressive :-). Thanks for sharing, I've just downloaded and started looking, but what immediately impressed was how you've shown how to 'codelessly' port a .pde routine into Quartz Composer from processing.

As soon as you mentioned the initial point of inspiration I was expecting to see a bit of clever scripting, but instead you've taken the time to show how this could be done by someone who doesn't write code at all.

Well done. Well worth studying and using too.

BTW found that Curve Resolution is set to Unlimited but really only seems to be of effect at 0,1 & 2, thereafter nothing else seems to make much of a difference with a 4 handled triangle, although it does continue to make a real difference with a triangle set to 3 handles.

gtoledo3's picture
Re: Interaction Bezier Curve (Composition by gtoledo3)

Spaghetti code is code too! Don't talk about it like that, you'll make it self conscious.


Resolution can still make a different in the 4 point/quadratic mode with certain extreme curves, but it really doesn't take that many triangles to construct the curve. With the 3 point mode, it's more because I use a line to construct the curve, which caps out at a certain thickness (sooner than I would like). I could have used a sprite for the line, but it would have been less direct.

I think this goes a few steps further than the Processing sketch. Porting something from Processing to QC isn't so weird to me; I've used Processing for a few years (I think it was pre-version 0135). One of my hobby activities is looking at Processing sketches and re-doing them in QC if I think the function is cool. There are a few of my compositions that are pretty much Processing redone in QC, or taken a few steps further (or not as far, with the failures!).

cybero's picture
Re: Interaction Bezier Curve (Composition by gtoledo3)

I can see that Processing connection in some of your other works. You're right, noodling objects is indeed coding. Hence 'codelessly' , implicitly indicative :-).

jrs's picture
Re: Interaction Bezier Curve (Composition by gtoledo3)

That is really impressive :-)


gtoledo3's picture
Re: Interaction Bezier Curve (Composition by gtoledo3)

This is a version that is optimized so that will deliver a n/a FPS when it's rendering. Only interaction (grabbing the points), will cause FPS to register, making it pretty much external event driven entirely.

This version doesn't have the path visualization, or the 3 point mode, but other than that, offers all other features.

Interaction Curve Basic.qtz64.69 KB

dust's picture
Re: Interaction Bezier Curve (Composition by gtoledo3)

cool. its nice to see you posted this. it seems most people doing this in qc are keeping the source to them selfs as this is can be adapted to a quad warping scenario letting vjs and stuff map out buildings and what not or project onto non flat surfaces by saving the points to file after placing the handles.

cybero's picture
Re: Interaction Bezier Curve (Composition by gtoledo3)

This one emphatically evidences how crucial the resolution setting is.

Nice one.

gtoledo3's picture
Re: Interaction Bezier Curve (Composition by gtoledo3)

The thing about the one above is, that since the only interpolation is happening inside of the iterator, and timebase is driven by iterator variables, the composition effectively doesn't evaluate unless something changes, eg., the point handles getting moved by grabbing them and tugging them around.

With the demo version that has the "path display" which shows the path of the triangle or line to create the curve, even if one shuts of all renderers that render that triangle/line path, the fact that the interpolation is in there makes it evaluate and trigger a FPS.

Aberrantly, I can tell from testing that what officially triggers the FPS evaluation in this case is from inside the iterator. Having the triangle path macro off and the iterator on still creates FPS- turn off iterator, no FPS, but no curve.

It's because of the simple existence of the macro OUTSIDE of the iterator, that holds the triangle/line path preview though! If the iterator is on, and that path preview macro is off=FPS. If I just delete that macro... NO FPS - QC knows that nothing is changing unless I interact with it, and thus, N/A FPS.

So, it revealed an interesting quirk of graph evaluation to me, for sure. I don't know if that's a bug or what, but it sure seems very odd... guess it's one to enquire about. If a macro is disabled and all renderers inside are disabled as a doublesafe (or just to check if it would work), it should be the same as it being non-existent or deleted. Further, a given macro that's disabled, shouldn't somehow cause evaluation in the other when disabled, but deleting it, solves this. I think it may be because they share common input port data, and because of iteration performance checks that go awry.'s picture
Re: Interaction Bezier Curve (Composition by gtoledo3)

Any chance you hobble this down to a Leopard version, gt?

Geometry + QC = most of my late nights past my bed time ;)

gtoledo3's picture
Re: Interaction Bezier Curve (Composition by gtoledo3)


The Snow Leopard version uses an interaction patch that just lets you grab the corners to move it around.

I took that out and just made some smoothed sliders.

Bezier Curve_Leopard Compatible.qtz109.06 KB's picture
Re: Interaction Bezier Curve (Composition by gtoledo3)

Hey cheers, reminds me of those 'draw an ellipse' with a loop of string and two pins film animations which were educational state-o-de-art when I was in yr8 (sooo long ago). 10K larger comp is 10K better ;)

Maths can be expressed so elegantly can't it. Shame mostly it isn't.

scalf's picture
Re: Interaction Bezier Curve (Composition by gtoledo3)


perhaps this is really clear and I am missing it. But where can I plug in a video or picture instead of the yellow shape that can be stretched. I love your work and would like to adapt it to some mapping.


gtoledo3's picture
Re: Interaction Bezier Curve (Composition by gtoledo3)

Well, what I guess you are missing is that this was just a geometry demo... some people actually get a kick out of pure geometry :)

I didn't really intend this to be a mapping thing. What you could do (what I would likely do, I think), would be to make the curve a given color, then use it in a composite/color key type setup, to control the key-ing of another image.

One can also texture the triangle inside, and control UV's over iterations. Check the attachment. Because of the way the triangle is giving the illusion of being a bezier, when you texture it, the more iterations, the higher quality the appearance, but the slower the performance.

Interaction Bezier Curve w: Texture.qtz85.95 KB