Curves!

john's Avatar

john

02 Jul, 2017 10:30 PM

NOTE: I found a bug in the fit_curve subnetwork in this demo which might cause it not to fill properly when set to closed. I have appended an updated version of the Curves demo which fixes this (see thread below). Use the updated version of the Curves demo, not the one attached to this comment.

Until now there were only two ways to make curves in NodeBox: quad and arc. Both create curves with control points, but define those control points for you based on simple settings. It was not possible to make a curve with arbitrary control points.

That's why I made the make_curve custom node. Make_curve lets you set the starting point P1, the ending point P2, and two control points C1 and C2. Make_curve gives you total control.

Make_curve makes it possible to do things like modify curves from an imported SVG or morph one curve smoothly into another. Or you can sketch curves directly by scrubbing the control point X and Y values.

It can often be hard, though, to calculate control point values to achieve the effect you want. So I also provide a very handy subnetwork, fit_curve, based on an algorithm by Bernhard R. Fischer.

Fit_curve uses make_curve to create a smooth curve that passes through each point in a given path. You can make the curve open or closed and adjust its "curviness". It's like the connect node except that it builds curve segments instead of line segments. My recent "Curvy Characters" post shows some of the possibilities.

The attached demo network illustrates some possible uses of make_curve and fit_curve:

  • Arbitrary Curve (center). A simple curve segment created directly from make_curve. The two red dots show the control points. Adjust values to see how it works.
  • Smooth Polygon (upper left). By feeding a polygon into fit_curve you can round its corners a little or a lot to create a wide variety of beautiful shapes.
  • Bell Curve (upper right). This example creates a histogram of a normal distribution by conducting 1000 trials of ten coin flips. Fit_curve allows you take any set of data points like this and connect them with a smooth curve.
  • Arbitrary Shape (lower left). This organic looking shape would be hard to construct in NodeBox using ellipses, quads, or arcs. The tangent lines and control points show how the fit_curve algorithm works. Adjust curviness and see what happens!
  • Spiral (lower right). Spirals were a pain to construct in NodeBox until now. Instead of using functions to calculate zillions of points and then stitching together approximations, you can just take a simple rectilinear spiral and curvify it! By adjusting the curviness you can easily create squarish spirals or elaborate spirograph designs. Great for making labyrinths, decaying orbits, or swirling text.

In addition to demonstrating possible curves, this network contains many useful subnetworks you can use in other projects:

  • controls. Draws red control points for any curve.
  • spiral. Draws a resizable rectilinear spiral with a given number of turns.
  • make_table. Converts lists of values into a table with headers that can then be filtered, sorted, etc. This version makes two-column tables but is easy to modify.
  • distribution. Given a data table, a key from that table, and a range of possible values, produces a distribution table.
  • histogram. Snaps onto distribution to plot a very simple histogram.

Enjoy!

John

  1. 1 Posted by gabriel sim-lar... on 03 Sep, 2017 10:01 AM

    gabriel sim-laramee's Avatar

    Incredible! I'm working on an illustration and this is exactly what I needed. Thank you so much

  2. Support Staff 2 Posted by john on 03 Sep, 2017 08:00 PM

    john's Avatar

    You just made my day.

    If possible, I'd love to see what you eventually make with these tools.

    John

  3. Support Staff 3 Posted by john on 28 Oct, 2017 10:25 PM

    john's Avatar

    NOTE: Attached is an updated version of my Curves demo. It contains an updated version of the fit_curves subnetwork.

    For certain paths, if fit curve was set to "closed" it would not fill correctly when colorized. The updated version fixes this.

    If you are using fit_curves in any of your projects, you should replace it with the fit_curves subnetwork found inside this demo.

  4. Support Staff 4 Posted by Frederik De Ble... on 15 Nov, 2017 05:03 PM

    Frederik De Bleser's Avatar

    This is another super-useful node to have in core! I'll see if I can port it to Java soon.

  5. Support Staff 5 Posted by Frederik De Ble... on 15 Nov, 2017 05:10 PM

    Frederik De Bleser's Avatar

    I've added this to GitHub to track its progress:

    https://github.com/nodebox/nodebox/issues/437

    Since there are basically two types of curves in NodeBox (quads and béziers) I was thinking how you would generalize this. Then I remembered that in Houdini, you can specify the order of the curve, which allows you to set the number of control points for the curve. 0 control points will give you a straight line, 1 a quad, 2 a bézier. And you can go higher!

    http://www.sidefx.com/docs/houdini/nodes/sop/curve#parameters

  6. Support Staff 6 Posted by john on 16 Nov, 2017 09:06 AM

    john's Avatar

    Frederik,

    I am excited you are looking at this.

    If you wind up generalizing curves, you might also consider generalizing the connect node. My fit_curve subnetwork is the natural companion to my make_curve custom node - I almost always use the two together. Fit_curve works exactly like connect except with curves instead of line segments.

    I notuce that Houdini also has a fit curve node, though theirs is more complex.

    Just a thought...

    John

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Curves!.zip 8.86 KB
  • Curve_Samples.png 51.7 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

13 Aug, 2018 07:15 AM
04 Aug, 2018 02:10 PM
03 Aug, 2018 09:28 AM
16 Jul, 2018 05:51 PM
14 Jul, 2018 05:02 AM

 

11 Jul, 2018 06:30 AM
10 Jul, 2018 08:24 PM
06 Jul, 2018 10:57 AM
05 Jul, 2018 03:45 AM
03 Jul, 2018 01:24 PM
02 Jul, 2018 05:58 PM