ALL NEW: Inter_Color and Morph_Color
I have completely revised two nodes: inter_color and morph_color.
Inter_color returns an intermediate shade between two colors. The current version is dirt simple. It simply takes the linear Interpolation between the two color's hue, saturation, brightness, and alpha values.
It turns out this was a little TOO simple for at least three reasons:
- Hue is circular, not linear. Sometimes similar colors fall near opposite ends of the hue spectrum, producing almost random intermediate shades.
- The whole is not the sum of its parts. Color perception is very complex; blindly combining hue, saturation, and brightness often produces arbitrary results.
- There is more than one way to blend colors. There are different color spaces - each one valid - and different ways to traverse them.
My original demo for inter_color displayed a standard color spectrum which, in hindsight, is a bizarre way to demonstrate a node that transitions between red and violet. You would normally want a subtle transition between similar colors.
For my new version, I threw out the old code and started over, using instead the palette node I developed last year. Palette provides four basic parameters to control color transitions:
- Color space. The color space used to perform interpolations. There are currently five choices:
- RGB - Use Red, Green, and Blue values
- HSB - Use Hue, Saturation, and Brightness values with hues forming a cylinder instead of a cube.
- OKLAB - Use a perceptual space described here: https://bottosson.github.io/posts/oklab/
- LCH - Use a perceptual space described here: https://atmos.style/blog/lch-color-space
- RYB - Use simplified subtractive paint blending described here: http://nishitalab.org/user/UEI/publication/Sugita_IWAIT2015.pdf
- Soften - Create smoother transitions between colors. The default value of 0 uses linear line segments to interpolate colors. Increasing this value uses a curve instead; the higher the Soften value, the bendier the curve. Small positive or negative values work best; larger values may cause more drastic changes. This adjustment is similar the the "bezier" setting in other palette tools.
- Intensity. Heighten or flatten the color values produced. The default setting is 100. Increasing this value with make the colors more intense. In the cubical RGB and OKLAB spaces this will make the colors lighter until all colors turn white; in the cylindrical HSB space the colors will become more saturated. Lowering the intensity in all spaces will make the colors darker and muddier will also reducing the opacity; reducing intensity to 0, the minimum value, will desaturate and then fade the color away altogether.
- Correct lightness. Checking this box will try to compensate for the way the human perceptual system responds to light; it is similar to the "Gamma Correction" found in other tools. The default setting is ON. This setting does not affect OKLAB or LCH spaces. For more information about the formula I used here, see https://bottosson.github.io/posts/colorwrong/#what-can-we-do%3F
The first three parameters are unchanged from the previous version:
- T. A value from 0% to 100%
- Start color. The color returned for T=0
- End color. The color returned for T=100
I also completed revised the demo (see top half of screenshot). I construct four scales between consecutive colors and then, for each scale, display an intermediate shade.
This is a fun demo to play with. You can change the start and end values of the sample1 node to slide the intermediate color indicators back and forth. Then you can fiddle with all four of the palette settings to see how those shades are affected. For even more experimentation, you can also change the number setting on the sanzo_colors node to step through completely different color schemes for the four scales.
Inter_color now provides a wide variety of reasonable, interesting, and subtle transitions between any two colors.
MORPH_COLOR
The morph_color node gradually changes a shape's fill, strokeColor, and strokeWidth based on a reference object. It is built around inter_color, so when I updated inter_color it was only natural to update morph_color as well. As with inter_color, morph_color's first three parameters are unchanged. I added the same four transition settings that I added to inter_color.
For the demo of morph_color I left the basic structure alone, but modified the colors to show it off better (see bottom half of screenshot). I show a series of seven numbered circles, each with a circle fill color, a circle stroke color (and thickening stroke width), a number fill color, and a number stroke color. All four of these colors morph from a starting combination to an ending combination.
You can also play with this demo by changing the color settings on morph_color1 (which controls the circles) and morph_color2 (which controls the numbers). For even more fun you can quickly try countless color variations by changing the number settings on sanzo_color1 and sanzo_color2, and/or changing the ordering of those colors using the seed values of the two shuffle nodes.
Morph_colors now provides more interesting and subtle transitions between two complex objects with a greatly enhanced level of control.
Together, these two updates consolidate my overall stable of color nodes to provide a more consistent system. Both will be included in version 3.5 of my library which I hope to release before New Years Day.
- inter_color_screenshot.png 661 KB
- inter_color_demo.ndbx.zip 242 KB
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
Support Staff 1 Posted by john on 24 Dec, 2024 12:29 PM
UPDATE
Just after I published this I noticed a bug: the Soften setting in both nodes was not working.
The soften feature in the palette node softens a multi-section spline to produce a smoother curve. But inter_color has only a straight line between two points, so there is nothing to smooth. To fix this I replaced the straight line with a quad curve that is flat when soften is 0 and bends inward or outward when soften is positive or negative. This produces a similar effect.
Anyway, problem solved. If you wish to try this repaired soften setting, please download the revised demo attached to this reply.
2 Posted by lastvector on 24 Dec, 2024 10:26 PM
I often sit there and marvel at what can be achieved in Nodebox.
However, your creations are well beyond my capabilities.
But it's okay to be amazed :)
Happy Christmas, John
and a happy new year
gottfried
Support Staff 3 Posted by john on 25 Dec, 2024 07:58 AM
Gottfried,
Thanks for your kind words. Thanks also for all your recent posts that have opened my eyes to new ways of using Nodebox with other tools.
Happy Christmas and New Year too!
John