animating fill color based on specific HSB values

finedesign's Avatar


16 Nov, 2016 04:29 PM

This seems like a simple task, but I am having a hard time finding the right recipe of nodes.

I want a simple square rectangle to change color based on a list of HSB values in a CSV file.

The CSV has three columns for: hue, saturation and brightness. Each row, then, is a specific color. There are 8 rows, so 8 colors. I want to apply each color to a rectangle and animate or tween the colors between each other. I was thinking to use the wave node to do this.

I would also like to adjust the period or interval between colors so that I can make the animation slower or faster.

I've attached a file with the CSV and ndbx file, but the ndbx file does not contain much.

  1. Support Staff 1 Posted by john on 17 Nov, 2016 06:41 AM

    john's Avatar

    Hello finedesign. Welcome to the NodeBox community.

    Color cycling is fairly easy in NodeBox, but cycling through a specific set of swatches does add a little more complexity. There are a number of small problems to overcome that are not obvious for a beginner.

    I am attaching a color cycle network that I think does what you want. Just for fun I arranged the swatches in a circle around the central square and created a clock-like hand to sweep around the circle (see attached animation). By studying this network and double clicking on various nodes while the frame is running you can learn enough to make your own modifications.

    The first thing I had to do was modify your csv file. NodeBox assumes the first row will contain headers. You have to pass a header name in the lookup node to retrieve a column of values (like all the hues). So I replaced your first row with "hue", "saturation" and "brightness".

    Once you lookup the hue, saturation, and brightness you can just feed them into an HSB node and then a colorize node to render the swatches. The HSB node requires that you define a single range for all three values. A range of 100 works for saturation and brightness; since you expressed your hues in degrees I added a multiply node to convert 360 to 100 for hues.

    The actual interpolation between colors has to be repeated for each of the three values, so I made a subnetwork called Cycle to do this. You can control-click on one of those nodes and choose "Edit Children" to see how I did it. I used a shift node to select successive pairs of swatches and a convert range node to do the interpolation. A frame node inside each subnetwork drives the action.

    The hue subnetwork, "CycleHue" is a little more complex than the other two. When you move from the last hue back to the first, you want to keep moving in a clockwise circle. Instead of moving from 326 down to 18 (which would cycle back through all the intervening colors), you want to move from 326 to 360 and then keep going to 18 (or 378 if you prefer). I achieved this by adding a switch that changes the behavior whenever the second hue is less than the first. This approach is not fullproof, but works well when all the hues are sorted in ascending order as yours were.

    You can change the speed of the animation by adjusting the "interval" node at the top of the network. This is just a number that describes how many frames it takes to move from one color to the next. I set it at 100; lower the value to speed it up.

    I'll let you figure out how I did the swatches and the sweeping hand. NodeBox makes adding things like this easy and fun.

    This color cycler is pretty simple. It just does straight linear interpolations between the three HSB values. You mentioned using a sine wave. You could add this to ease in and out of each transformation; it depends on exactly what you want to do. But for many purposes a simple linear transformation works well enough.

    Enjoy! And please let me know if you found this helpful.



Reply to this discussion

Internal reply

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

Attaching KB article:


Already uploaded files

  • 1.67 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

13 Jul, 2024 06:05 AM
11 Jul, 2024 03:48 PM
28 Jun, 2024 01:51 PM
27 Jun, 2024 02:56 PM
27 Jun, 2024 01:57 PM


26 Jun, 2024 08:17 PM
26 Jun, 2024 11:35 AM
24 Jun, 2024 02:42 AM
24 Jun, 2024 12:46 AM
23 Jun, 2024 08:07 AM
08 Jun, 2024 09:05 AM