New Blend_Color Node

john's Avatar

john

31 Dec, 2023 11:52 AM

UPDATE: SEE 3.4 VERSION BELOW

Attached is a completely revised version of my old blend_color node.

The original version was very simple. It took an opaque background, a translucent foreground, and returned a solid color matching what would happen if the foreground was superimposed over the background. This made it possible to create color keys for overlapping areas in Venn diagrams.

The revised version is much more powerful. I had three goals:

  1. Handle more than just one foreground color
  2. Handle more blending modes
  3. Handle varying transparency in all those modes

The new blend_color node takes just 3 ports:

  • Background
  • Foregrounds
  • Blending Mode

For the original translucent mode, background works just as before: it defines the background against which the translucent foreground colors are set against. For other modes, background determines how to handle translucent foregrounds. Any foreground color with an alpha less than 100% will first be turned into a solid color by applying translucent blending against the background; that solid result will then be fed into the chosen blending algorithm. I usually leave background white; darkening it will decrease the overall brightness of the resulting blend.

You can feed in a list with as many foreground colors as you wish. For Translucent mode, the order will matter: the first color will sit atop the background and subsequent colors will sit above with the final color on top. Any opaque color in the stack will conceal colors beneath. All the other blending modes are communitive - order doesn't matter.

There are now six possible blending modes:

  • Translucent. Works the same as before but allows multiple foreground colors
  • Additive. Behaves like additive light: the more colors you add, the brighter it gets. Pure blue and green become cyan, blue and red become magenta, green and red become yellow. Adding more colors quickly turn pure white (depending on the hues, alpha settings, etc.). Because of its sensitivity, I apply gamma correction to this mode automatically.
  • Subtractive. Behaves like subtractive paint: the more colors you add, the darker it gets. Pure yellow and magenta turn red, yellow and cyan turn green, magenta and cyan turn blue. The simple mathematics of this mode are not intended to simulate actual paint mixing, but can provide a rough approximation.
  • Minimum. This mode returns the minimum red, green, and blue values of the foreground colors. The result is usually similar to subtractive blending, but can be different depending on the colors provided.
  • Maximum. This mode returns the maximum red, green, and blue values of the foreground colors. The result is usually similar to additive blending, but can be different depending on the colors provided.
  • Average. This mode returns the average red, green, and blue values. The result is often useful: an interesting alternative to normal translucent blending. If the foreground colors are balanced it may tend to gray if enough colors are supplied.

The attached demo shows two interesting applications of the blend_color node.

The simple overlapping orange and green circles on the bottom are controlled by an equally simple network on the right. I use a compound node to find the intersecting region, then use the blend_color node to combine the orange and green colors. Change the blending mode on the blend_color node to see what happens to the overlapping area. You can also try darkening the background color in the various modes to see how that central area is affected. Notice that although the central area may look translucent, blend_color always return solid (alpha 100%) colors.

The larger network on the left creates a more complex example. Three simple arrows, each a different color with different level of transparency, are driven into each other to form a mandala. You can see how the arrows collide by changing the value of the MOVEMENT number at the top of the network.

As the arrows collide they overlap in a variety of ways. I use my newly improved overlaps node to find all the intersections and determine which colors contribute to each one. I then feed the original three colors into a "recolor_all" node which colors those intersections according to one of the six blending modes. Instead of providing a single node, I provide all six, resulting in six different roughly triangular shapes, which I then rotate and combine to create the hexagonal star. The six individual triangular components are displayed and labeled below.

The three colors for this design resemble Navajo art from the American Southwest. But I actually chose them because they produce a noticeably different three-way blend for each of the six modes. This design is fun to animate.

ABOUT THE ALGORITHMS

I did a lot of research in preparation for making this node. I found many dozens of differing formulas for blending colors, some quite complex, and much scholarly chin scratching over which algorithms were best or which were flawed or limited. Color mixing is an enormously complex and subtle business and there are limits to how well blends in the real world can be simulated mathematically,

I finally decided to keep things simple for this node. All six modes work directly on RGB values. There are no varying color spaces and only limited gamma correction (when it seemed to have a noticeable effect). The formulas are dirt simple - which I hope makes them a little easier to understand. As with all these nodes, the best practice is just to try different settings and see what happens. At the very least you will now have many more options than you did before.

Please play with this node and report back. If anyone can make a strong case for additional blending modes, I can always add them to future versions of this node.

  1. Support Staff 1 Posted by john on 31 Dec, 2023 12:37 PM

    john's Avatar

    As a followup for anyone who wants to dive even deeper into my new blend_color node, attached is a network I made to create two posters - along with the posters themselves.

    The first poster is a simple matrix showing different Venn diagram style blends of three colors under each blending mode.

    Each row shows a different color triplet:

    • red blue green
    • red blue green at reduced alpha
    • cyan magenta yellow
    • cyan magenta yellow at reduced alpha
    • three random colors
    • three more random colors

    Each column then applies a different blending mode to those six triplets. You can get a pretty good feel for the different modes by studying this matrix.

    The second poster shows iterative pyramids pairs for each of the six modes applied agains four different color sets. This one may take a few seconds to render - there are over 2000 separate blending operations required.

    Each "iterative pyramid" works like this. I start on the bottom row with 10 colors from the color set in that column. Above that I place a row of 9 colors where each color is a blend of the two colors below it. I repeat this again and again until there is only one color left on top.

    Because each blend operation results in solid colors, I needed to reduce the alphas after each row to make a more interesting and educational result. I chose two ways of doing this:

    • On the left pyramid of each pair, I set the alpha value of each blend to the average of the two alpha values below it. The original colors have varying alphas, so the alphas tend toward a medium value in higher rows.
    • For the right pyramid I assigned the maximum alpha to each blend; this way more opaque colors spread their influence as the pyramid rises. I place solid dots behind each color chip so you can see how opaque each blended color becomes.

    Each of the four color sets consist of ten colors:

    • The first column has a spectrum ranging from red translucent to violet opaque.
    • The second column has a random selection from that spectrum
    • The third column has a different random selection using a different seed
    • The fourth column uses a ten-color diverging palette from my color_brewer node

    Careful study of this poster will be instructive. I'm not sure how common iterative blending will be in actual Nodebox projects, but the gestalt of each pyramid reveals a lot about the way the six modes work.

    Nodeboxers may also enjoy poking through both of my networks to see how I made these two posters. The blend_color nodes are buried pretty deep, but trust me - they're down there somewhere.

    Comments Welcome!

  2. Support Staff 2 Posted by john on 16 Apr, 2024 04:47 AM

    john's Avatar

    UPDATE

    Version 3.4 of the Blend_Color mode replaces the Subtractive mode with two modes:

    • Subtract Light is the old Subtractive mode, based on the RGB color space
    • Subtract Paint is similar, but uses the RYB color space

    The RYB (Red Yellow Blue) color space, in some cases, comes closer to the way some paints blend. In the RYB space, Yellow plus Blue really does equal Green.

    Wikipedia article: https://en.wikipedia.org/wiki/RYB_color_model

    The paper on using RYB for simplified paint blending, from which I derived the algorithm inside my palette node: http://nishitalab.org/user/UEI/publication/Sugita_IWAIT2015.pdf

    The attached NDBX network creates an updated version of my color blending chart, with the Subtract Light and Subtract Paint modes and two additional color triads which show off the RYB space (see screenshot).

    The NDBX file also contains a simple network with the new blend_colors node, already set to demo the Subtract Paint mode.

    The updated version will be included in the next release of my library. Until then, you can use the 3.4 version in the attached file.

    Thanks to Floris for finding the RYB color space info.

  3. 3 Posted by florisdejonge on 16 Apr, 2024 06:18 PM

    florisdejonge's Avatar

    Awesome work John. It still blows my mind how powerful Nodebox can be.

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • New_Blend_Screenshot.png 727 KB
  • new_blend_demo.ndbx.zip 35.5 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

24 Jan, 2025 07:50 AM
22 Jan, 2025 11:42 PM
21 Jan, 2025 09:43 AM
21 Jan, 2025 09:41 AM
21 Jan, 2025 09:36 AM

 

21 Jan, 2025 02:00 AM
16 Jan, 2025 08:30 PM
15 Jan, 2025 06:37 AM
04 Jan, 2025 04:09 AM
03 Jan, 2025 05:32 PM
29 Dec, 2024 12:06 PM