We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Page Index Toggle Pages: 1
Bézier Editor (Read 5587 times)
Bézier Editor
Sep 8th, 2009, 4:30am
Before I made my timeline tool for Processing (more information about that tool in
this thread) I made a simple Bézier curve drawing tool to get my feet wet with Processing, the tools API, as well as general Java GUI programming.

This tool has a simple purpose: it allows you to visually create Bézier splines and then generate Processing code that represents the splines.  It's not intended to be a replacement for Illustrator, but it should work well for quickly making curves within PDE.

I cleaned up the original version from last year and added a few features to make it ready for an initial public release.

You can download the tool here:


To install it, unzip the file and move the "BezierTool" directory to the "tools" directory in your Processing sketchbook (create the "tools" directory if it does not already exist).  

A method for finding location of the Processing sketchbook is described on the Processing.org libraries reference page: "To find the Processing sketchbook location on your computer, open the Preferences window from the Processing application and look for the 'Sketchbook location' item at the top."

I'll be putting up a webpage soon that will provide more extensive documentation, but here are a few tips for using this tool:
  • The currently active curve will have its anchors displayed as gray squares
  • If there is no active curve, clicking while in the "Draw" mode will create a new curve.  If there is an active curve, clicking while in the "Draw" mode will continue the active curve
  • Holding down "option" on Mac or "alt" on Windows allows you to edit only one of the anchor's tangents
  • Once you're done creating your splines, click on "Copy code to clipboard" and then paste the code into your sketch

The next major feature I'll probably add is the ability to paste Processing Bézier curve code into the editor to edit an existing curve.

Any feedback is welcomed.
Re: Bézier Editor
Reply #1 - Sep 8th, 2009, 6:22am
That's the first tool I try for Processing and it is very well done.
I appreciate you don't give ten decimal digits like some vector tools do (in SVG output for example).

Well, there are some points I would like to see improved (eg. you can display the coordinates of the active point in addition to mouse coordinates), I have a little oddity (the start point going backward), it would be nice if the window could be resized... I might take a look at your code for learning and perhaps improving.

Thanks for sharing.
Re: Bézier Editor
Reply #2 - Sep 8th, 2009, 7:02am
Thanks for the feedback.

Displaying the active point is a good idea, I'll probably add that in the future.

I'm not sure what you mean by "the start point going backward."  Could you explain what you mean a bit more?

Window resizing is definitely something I want to do.  I think it should be pretty easy actually—I'll give it a shot this week.
Re: Bézier Editor
Reply #3 - Sep 8th, 2009, 7:54am
Mmm, I found no way to delete all vertices at once (Clear).
And I had to look at source to find out how to delete a vertex (Backspace). I first tried Delete key, perhaps you can support both.

It might also be interesting to be able to define a "zero" point, and make the coordinates relative to this point.

I hope you will finish to implement your zoom, too (but Q/W/E keys are a bit clumsy, particularly on an Azerty keyboard...). I would use + - instead.
Likewise, using arrow keys to move selected point might be interesting (low priority wish...).

I could reproduce the oddity: I create the first vertex with a single click. Then I add some vertices. It is exported OK. For example:

vertex(107.0, 413.0);
bezierVertex(107.0, 413.0, 107.0, 413.0, 107.0, 413.0);
bezierVertex(107.0, 413.0, 10.0, 349.0, 34.0, 244.0);
bezierVertex(58.0, 139.0, 89.0, 121.0, 136.0, 130.0);
bezierVertex(183.0, 139.0, 314.0, 178.0, 315.0, 274.0);
bezierVertex(316.0, 370.0, 261.0, 411.0, 218.0, 420.0);

Notice the first bezierVertex with all coordinates equal to first vertex.

Then I edit the first vertex, dragging it to see the control points, with the curvature in the same direction. It looks OK on the tool. Exported code is:

vertex(107.0, 413.0);
bezierVertex(121.0, 420.0, 182.0, 406.0, 107.0, 413.0);
bezierVertex(32.0, 420.0, 10.0, 349.0, 34.0, 244.0);
bezierVertex(58.0, 139.0, 89.0, 121.0, 136.0, 130.0);
bezierVertex(183.0, 139.0, 314.0, 178.0, 315.0, 274.0);
bezierVertex(316.0, 370.0, 261.0, 411.0, 218.0, 420.0);

It makes a strange little loop.
Re: Bézier Editor
Reply #4 - Sep 9th, 2009, 5:25am
you are great Smiley
that is exactly what I was asking for a year ago and an idea i had in mind for a while : http://processing.org/discourse/yabb2/num_1214405036.html

Great execution and really usefull. Thanks for developing some tools, you realy add functionality processing by doing that. I was wondering why nobody else ever release some good tools. i thought much more people would do that.
Re: Bézier Editor
Reply #5 - Sep 10th, 2009, 10:29pm
Thanks for the kind words, Cedric.

PhilLho: I'm going to be pretty busy this weekend, so it might take me a little while before I have a chance to look at the problem.

If it helps, the fastest way to delete all vertices would be to go into the "Select Curve" mode and delete each curve one at a time by clicking on the curve and then hitting backspace.

The small amount of zooming code you found is a remnant of a much older version of the editor.  Eventually zooming will come back, and probably with keyboard shortcuts that make sense (I agree that '+' and '-' are good choices) along with some zoom sliders (similar to the zoom slider in the timeline tool).
Re: Bézier Editor
Reply #6 - Nov 11th, 2009, 5:19am
have been finding this useful (poppy petals and owl ears!) so thanks.

but i've also been seeing what i think philho mentions - it gives me a point more than it needs to.

i would also like the option for it to parameterise the output such that the vertexes are defined as x and y variables and the control points are written in terms of deltas on these. for instance (numbers are random)

// vertex0 (beginning)
float x0 = 107.0;
float y0 = 413.0;
// vertex1 (middle)
float x1 = 127.0;
float y1 = 235.0;
// vertex2 (end)
float x2 = 127.0;
float y2 = 235.0;

vertex(x0, y0);
bezierVertex(x0 + 123.0, y0 + 123.0, x1 + 123.0, y1 + 123.0, x1, y1);
bezierVertex(x1 + 123.0, y1 + 123.0, x2 + 123.0, y2 + 123.0, x2, y2);

(which might cause problems with duplicated variable names if you had more than one but...)
Re: Bézier Editor
Reply #7 - Nov 13th, 2009, 4:27am
Hi koogy, thanks for the feedback.

I've actually been planning to release a new version this week that fixes the bug PhiLho originally pointed out, among other things.  Check back later today or tomorrow for the new version.

As for the parameterizing functionality you're requesting, I'm just curious what you intend to do with it.  I'm leaning towards not putting this functionality in the tool, as one of the design choices is to keep it very, very simple.  However, I could still make a separate tool for you that can convert the output of the Bézier Editor to the parameterized output that you're looking for.
Re: Bézier Editor
Reply #8 - Nov 13th, 2009, 7:50am
it's just that both times i've used this i've wanted to add a little randomness to the vertices so the hard coded values were no use to me and i had to replace them with variables anyway.

it also makes it a little clearer what the values are for - ie in bezierVertex that the last pair is an actual vertex, that the first pair relate to the previous vertex and the middle pair relate to the next vertex.

and any mathematical connection between them - which makes it easier to spot things like the control points either side of a vertex being co-linear, which is important for C1 and C2 continuity - they'd be the same values with different signs, relative to the vertex.

(all this would make more sense if i'd used proper values in the examples but i was posting from work...)
Re: Bézier Editor
Reply #9 - Nov 13th, 2009, 11:50am
actually, i have the source and it's GPL'ed so i can probably do this. will send you a patch for your consideration 8)
Re: Bézier Editor
Reply #10 - Nov 13th, 2009, 4:10pm
The method you want to edit is generateCode() in the BezierSpline class.

Maybe I'll make it so if you hold down a modifier key the "Copy code to clipboard" button will change into a "Copy parameterized code to clipboard" button.
Re: Bézier Editor
Reply #11 - Nov 14th, 2009, 1:07am
Alright, so I figured I'd celebrate the end of midterms with a new release.

Grab it here (follow the instructions in the first post of this thread to install it):


Besides some minor code cleanup, here's what changed for this release:
  • The bug that PhiLho pointed out about the extra bezierVertex has been fixed
  • The delete key now works for deletion, along with backspace
  • If you change modes and then try to delete a vertex/spline, it now works as expected
  • If there is a selected anchor point, pressing the arrow keys while in the "Draw" or "Select Point" modes will move that anchor point one pixel at a time (note that this does not work for tangents, as there is currently no concept of them being selected)
  • Pressing the arrow keys while in the "Select Curve" mode will move the selected curve one pixel at a time

I'm currently working on a couple of other features like making the tool resizable.  I expect that importing splines into the tool from Processing code will be in the next release.  

As always, feedback is appreciated.
Page Index Toggle Pages: 1