Processing 1.0 - Processing Discourse

d.rifkin

Bézier Editor
Sep 8^th, 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:

http://www.drifkin.net/beziereditor/beziereditor-latest.zip

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.

« Last Edit: Sep 8^th, 2009, 6:58am by d.rifkin »

PhiLho

Re: Bézier Editor
Reply #1 - Sep 8^th, 2009, 6:22am

Brilliant!
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.

d.rifkin

Re: Bézier Editor
Reply #2 - Sep 8^th, 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.

PhiLho

Re: Bézier Editor
Reply #3 - Sep 8^th, 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:

beginShape();
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);
endShape();

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:

beginShape();
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);
endShape();

It makes a strange little loop.

Cedric

Re: Bézier Editor
Reply #4 - Sep 9^th, 2009, 5:25am

you are great

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.

twitter.com/CedricKiefer

d.rifkin

Re: Bézier Editor
Reply #5 - Sep 10^th, 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).

koogy

Re: Bézier Editor
Reply #6 - Nov 11^th, 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;

beginShape();
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);
endShape();

(which might cause problems with duplicated variable names if you had more than one but...)

d.rifkin

Re: Bézier Editor
Reply #7 - Nov 13^th, 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.

koogy

Re: Bézier Editor
Reply #8 - Nov 13^th, 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...)

koogy God Member Offline Posts: 788	Re: Bézier Editor Reply #9 - Nov 13^th, 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)

d.rifkin YaBB Newbies Offline Posts: 34	Re: Bézier Editor Reply #10 - Nov 13^th, 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.

d.rifkin

Re: Bézier Editor
Reply #11 - Nov 14^th, 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):

http://drifkin.net/beziereditor/beziereditor-a002.zip

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.