How to control RGB color by Hue ( ...and saturation and brightness... )

Part 2: Saturation ... and Brightness

This is a little harder to explain. RGB elements become more of an "accordian" within the 0-1 range than absolute/pure hues.

To review: all Pure Hues are 100% saturated and 100% "bright".

The RGB Color "White" (not really a color) is all 3 elements are 1.0.

The RGB Color "Black" (ditto) is all 3 elements are 0.0.

Shades of Gray are all 3 elements equal to each other (R = G = B).

Only two (highest) elements contribute to the Hue. When the "saturation contributor" is increased above the lower hue determinant, IT becomes the secondary hue determinant and the former element becomes the saturation contributor.

Using the illustration below, if the Green element passes the Blue element, the Hue changes from violet to orange. If the Green element continues past the Red element, the Hue becomes Yellow Green... albeit, very desaturated. [Top down order of elements determines color/hue.]

The following represents a violet hue that has been desaturated and the brightness is lowered by 25%.

Desaturation involves moving ALL RGB elements towards 1.0 for each eventually creating white (or gray depending on Brightness).

Alternately, Brightness (a.k.a. Value) involves moving ALL RGB elements towards 0.0 for each.

Elements can become squeezed as the Saturation and Brightness settings near their limits — it's as if they maintain their "proportional" separation until reduced to grayscale/black/white.

The "math" involves trying to determine which elements are at minimum and which are at maximum value then figuring out, essentially, the percentage (or factor) of the span of the extremes. Fortunately, we don't need no stinkin' math for Motion.

This section is separate from the Pure Hue discussion because it really doesn't matter if you build the Hue controller or not. The following will build Saturation - Brightness controls for any color setup.

Preliminary:

Choose your primary color source (whatever object you created for the Hue color or any object's RGB color.) I'll refer to is as "Main".

Method 1:

Two accessory null objects/shapes are required. One with a Color parameter set to White (RGB: 1,1,1) and the other with a Color parameter set to Black (RGB: 0,0,0).

All that needs to done is to Link the White Color to the Main color. Then add another Link and apply the Black Color. The Custom Mix parameter for the White Color will control the Saturation and the Custom Mix parameter for the Black Color is the Brightness parameter.

These parameters will actually behave "backwards", that is, if the Custom MIx for the White color is 1 (and the Black color Custom Mix is 0), then the actual saturation is 0 (the color is white).

For both of these Custom Mixes, add them to their own Rig Slider and set the 0 value to Custom Mix 1 and the 100 value to Custom Mix 0.

No math...

Method 2:

Instead of two null objects (White and Black), simply add a Filters > Color > Colorize filter. Set the Mix parameter to 0%. Set the Remap White Color to actual White, fix the Remap Black Color so that it is actually RGB Black (it's 0.09, 0, 0 by default). You'll still need to use Rig Sliders to get them set up in the right direction.

———————————————

It's late and I might not have done that good a job explaining all this. Any questions?

Tomorrow... or just later... I'll recommend an OSC that can be easily adapted to control the Hue slider.

Utilizing On Screen Controls for Hue, Saturation, Brightness

Before I begin, I learned about the possibility of this technique from a tutorial created by Peter Wiggins when fcp.co was still "alive". I've searched for more about this topic quite a bit and there appears to be no trace of it left. So as far as I know, you will not find this anywhere else... but here.

In the GIF below, on the left is a basic rectangle with a Hue slider prepared as I outlined above. On the right is a PNG of a Color Wheel (which I also made in Motion and supplied it at the bottom of this post for you to use.) I used a Circle Mask (inverted) to cut out the center.

To the PNG color wheel, I applied a **Filters > Distortion > Target** filter.

Why did I use Target? Because its value goes from 0 to 360º and then starts over (when using the OSC) or the parameter goes for 0-360 and stops at 360 and going back, at 0. This Filter OSC can be used as a modulo 360 counter which can be directly applied to the Hue Rig Slider.

Applying Link behaviors to Rig Sliders is a little ... different ... than applying it anywhere else. You can't just right click on the slider parameter and Add Behavior!

Select the Hue Slider and go to the Behaviors menu, select Parameter Behaviors Link (or go to the Library and select and apply it from there.)

Once applied, you have to add the Source Object to the well. If you click Compatible Parameters at this point, you cannot apply anything! You need to go to Apply To first, Select Object, then the Slider's name.

NOTE: You cannot successfully apply any kind of parameter behaviors to Popups or Checkboxes.

THEN you can go back and select the Filters Target Angle parameter.

Once you've finished this, the Link will turn itself on. (And — you're ready to go!)

Here is a **wonderful** aspect of this operation:

1) no matter what you set the Slider's Range Maximum (or Minimum) to, it will only use values from 0 to 100. [Keep this in mind if you control the slider via Numbers Generators.]

2) Motion automatically adapts the **range** of the Angle control to that 100 value range!!!

The downside of Linking to Rig Sliders:

They can break to the point where you cannot remove the applied parameters and try to restore them; and although the Slider will work, the interpolations between snapshots will not be applied. This will require deleting the Rig Slider and starting over.

Linking to a Rig will tend to break if the "reference" through the link is "circular". In this case, you cannot get away with applying the Target Filter to the same object with the Fill Color you used for controlling the Hues... so use an "external" object for the filter, like the image below for Hues.

—————————————

For the animated GIF above, I added a Ramp behavior to the Target > Angle to control the animation. Using the OSC (without the Ramp) on screen, you are able to go "around and around" and not hang up the Rig Slider (because of the modulo effect.)

For the Saturation and Brightness sliders:

You can use something like the Poke filters. Turn off the Mix. Whatever they are applied to, add Clamp behaviors to keep the motion inside the boundaries. The (dropdown) X/Y values need to be Clamped from 0.0 to 1.0 for the direction you want to use the control, and to keep it locked in the center of the other direction: 0.5 to 0.5 (such as a slider bar appearance.)

Locking the control direction of the Poke filter from 0.0 to 1.0 will exactly span the 0 - 100 range of the individual Rig Sliders.

As a side note, OSCs may or may not be all that useful in this circumstance, but knowing how the process works can be applied to so many other things.

Also, if you need to set up a modulo arrangement for other types of parameters, that's easy enough to do with a Quantize behavior (at the limit) and link it back to the original parameter with Add to Source and a Scale of -1.0. (Even works in the negative direction!)

Hopefully, I've been able to significantly increase the capabilities of Apple Motion for you.

PS - If you try all this out and something breaks, let me know... Some of this is a little hard to explain.

You're welcome! (I still haven't received an email notification for your response! Only saw it when I came back on to write this last post.)