Quad Curves

john's Avatar


11 Jun, 2021 12:35 AM

UPDATE: See reply to this note for a v2 version which corrects a minor bug in the quad_control node.

Bezier curves are at the heart of NodeBox's paths and shapes.

Beziers come in two basic flavors. A quadratic bezier spans part of a parabola and consists of a start point, an end point, and a control point which determines its slant, depth, and direction. A cubic bezier has two control points and can create a wide variety of curves. Higher order beziers have more control points, but in practice you can make most any curve by joining multiple cubic beziers together into splines (paths).

NodeBox is built entirely out of cubic beziers. But, ironically, it comes with only one node to make these curves directly, and that will only make quadratic curves. Instead of providing a control point, the quad_curve node asks for a T value and a Distance. T determines the skew: less that 50 skews one way, more than 50 skews the other. The distance determines how far the curve extends from the base line connecting the start and end points; a positive value dips to the right, a negative value to the left.

When you use a quad_curve node, NodeBox quietly converts it into an equivalent cubic bezier. If you do need to make your own cubic beziers you can use the curve node from my Node Library (see previous post).

This is all well and good. But occasionally you may want to draw a quadratic bezier using a given control point. The quad_curve node requires T and Distance which are not easy to determine from the control point. My curve node requires two control points, which are related to but different from that one control point. Or you may be in the reverse situation. You have drawn a curve using the quad_curve node and need to find the control point. What to do?

The attached network contains two nodes that will bridge this gap. Quad_control draws a quadratic bezier based on three points: start, control, and end. (If you ever need to derive the T and Distance values you can find them inside this node.) Find_control does the reverse; given a quad curve it returns the control point governing that curve.

The attached demo lets you set start and end points along with the T and Distance values to produce a quad curve (in black with two small dots showing the cubic control points produced when NodeBox converts it). The network feeds this curve into the find_control node to discover the control point (and plot it as a larger red dot). That control point, along with the start and end points, are then fed into a quad_control node to reproduce the quadratic bezier, shown in translucent red atop the original black curve.

You can fiddle with the values at the top to verify that quad_control always matches the output of Nodebox's quad_curve node.

If you peer inside quad_control you will see another handy node, point_on_line, that returns the point corresponding to any position on the line extending through a given line segment. I am, frankly, not sure whether or not to include any of these three nodes in the next release of my library. All three are handy, but only in unusual situations. If anyone has an opinion, please let me know.


P.S. I have long used the quad_curve node without understanding the actual geometric meaning of the T and Distance values. Having finally been forced to create these new nodes, I finally understand...

Project the control point onto a line extending through the base line of the curve (the line segment connecting the start and end points). By "project" I mean draw a line from the control point in a direction perpendicular to the base line and find where it intersects. The T value is the signed distance percentage from the start point to this projected point divided by the length of the base line. Distance is the signed distance from the control point to this projected point (positive if the control lies to the right of the baseline when facing from start to end, negative otherwise).

When you raise and lower the T value you are sliding the control point back and forth along a line parallel to the base line. Distance adjusts the distance between the two lines. The T and Distance values are intuitive to use, but their exact geometric relationship to the underlying curve was hard to work out.

  1. Support Staff 1 Posted by john on 20 Jun, 2021 07:19 AM

    john's Avatar

    Attached is a very minor update to quad_control node. It works exactly as before, but corrects a bug which occurs when drawing curves exactly east to west.

Reply to this discussion

Internal reply

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

Attaching KB article:


Already uploaded files

  • quad_curve_screenshot.png 355 KB
  • quad_curve.zip 5.79 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


? 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

16 Jun, 2022 05:30 AM
15 Jun, 2022 06:03 AM
06 Jun, 2022 01:07 PM
02 Jun, 2022 11:58 PM
30 May, 2022 07:48 AM


24 May, 2022 06:27 PM
20 May, 2022 04:12 PM
05 May, 2022 02:25 AM
03 May, 2022 04:46 AM
01 May, 2022 09:22 AM
18 Apr, 2022 09:01 PM