Attached are TWO new nodes: gradient_L (for linear) and gradient_R (for radial).

Unlike most vector drawing programs, Nodebox does not natively support gradients. You cannot create true SVG gradients, but you can fake it by chopping a path or shape into many small pieces. I've done this by hand for years, but finally got around to creating nodes to do this in an easier and more polished way. I've been using these two nodes for a few days now and I think they are game changers.

Gradient_L takes the following parameters:

• Shape. A closed shape or open path.
• Colors. A list of root colors that define the color gradient. If less than two colors are supplied, the node will supplement with black and/or white as needed (depending on the number of bands required).
• Bands. The number of bands that the shape will be broken into. A small number of bands will produce visible stripes; a larger numbers (e.g. 100 or more) will produce a smooth gradient. The number of bands does not need to equal the number of colors; if you provide six colors and specify 100 bands, the node will create a gradient using 100 colors based on the six provided.
• Angle. The angle at which the gradient moves. 0 degrees produces a left-to-right gradient across the shape, 90 degrees produces a top-to-bottom gradient, etc.
• Color Space. The color space used to produce the colors if the number of supplied colors does not equal the number of bands. For more information about this, see http://support.nodebox.net/discussions/show-your-work/656-palette-node
• Soften. A positive value softens the transitions between colors; a negative value sharpens them.
• Intensity. A value above 100 makes the colors brighter; below 100 darkens them.

Gradient_R works in a similar way, but instead of carving the shape into rectangular pieces arranged in a straight line, it carves it into a series of concentric rings. All the parameters are the same except one. Instead of the angle parameter, Gradient_R provides offset:

• Offset. The center of the concentric rings relative the center of the shape. The default offset of 0,0 will radiant the rings from the shapes normal center. NOTE: if the shape is a triangle, regular polygon, or star the node will use the true geometric center; otherwise it will use the centroid.

If either node is given an open path, it will resample the path into a series of line segments equal to the supplied number of bands, proceeding from beginning to end. Both nodes behave the same way with an open path.

NOTE: both nodes will output the line segments drawn with a strokeWidth equal the strokeWidth of the supplied path. If that strokeWidth is zero, you will see no visible output. Therefor, when applying a gradient to an open path, it is important to first colorize the path to establish the desired strokeWidth.

As usual, I have included a demo to show these nodes in action (see screenshot): Gradient_L on top, Gradient supplied to an open sine wave in the center, and Gradient_R below.

The top and bottom groups use the same shapes and the same color lists. For this demo I use my color_brewer nodes to produce a two lists of 6 colors each, one sequential and one divergent. Color_brewer works particularly well with these gradient nodes, but any of my other color nodes can easily produce interesting lists of base colors. Of course you can also create your own color list by simply using a combine node to combine multiple color nodes.

NOTE. Both nodes use my palette node to extend base colors. But the color space, soften, and intensity parameters are only used if the number of colors input differs from the number of bands requested. If you supply a list with the same number of colors, the node will use your list exactly as is and will ignore any changes to those three values.. This gives you full control over the colors used if you want it.

Both top and bottom groups use the same three shapes and the same color lists. The only difference is that the top group used Gradient_L and the bottom uses Gradient_R:

• TRIANGLE. The linear triangle specifies 6 bands at a 90 degree angle, producing 6 stripes from top to bottom. The radial triangle specifies 6 bands at the default center of the triangle (offset = 0,0), producing a circle of white at the center with rings transitioning to dark green tips at the corners.
• CIRCLE. Both circles use the same six colors extended to 100 bands for a smooth gradient. The linear circle keeps the same 90 angle for a top-to-bottom gradient. The radial circle moves the offset to create a white highlight spot in the northeast part of the circle.
• RECTANGLE. The rectangle uses a different divergent set of six colors and 100 bands to create a red to blue temperature bar. The linear specifies 0 degrees to move from left to right; the radial leaves the offset in the center to produce a bar that has red in the center and transitions to blue at either end. I add an outline around the bar using a colorize node applied to the original rectangle.

The center example shows what happens if you feed an open path, in this case a sign wave, into either node's shape port. It works reasonably well, but if you zoom in you will see some crunchiness in each crest of the wave. You can reduce this effect by increasing the number of bands - I use 400 in this example - but increasing the bands will add to the render time.

Both nodes should work with any supplied path or shape. The bands are slightly overlapped to prevent undue pixelation when your image is exported. I find that several hundred bands are usually enough to create seamless smooth gradients for medium size shapes and take only a second or two to render. Even 100 bands work well for smaller shapes (as you can see in the demo). If need be you can use several thousand bands with only a little more render time.

The color space, soften, and intensity parameters can produce many interesting effects when combined with different base color lists. The underlying palette node is very powerful and can provide exquisite levels of subtlety and control. You really need to play with them to get a feel for how the color spaces differ.

One more note: Attentive users may notice that I did not surface the "Correct lightness" gamma correction checkbox. This usually doesn't make that much of a difference, but if you want to make that adjustment, just crack open the gradient node, select the color_list node, and check the Correct lightness box (off by default).

I am very eager to see what people will do with these two nodes.

Enjoy!