Brush Workshop 3: Gradients and Controllers
In the previous workshops we used the controllers to modify the shape of a brush in different ways with the size or the scales parameters but you can also control colors!
When using a gradient, the “Color” output in the controller editor will define how the gradient is applied when you draw.
I’m going to select the “felt pen” default brush, draw myself a custom preview with a very simple stroke and switch to a gradient color. And since we’re here to talk more about colors than size, let’s change the minimum size to 10 to have a good thick stroke.
To know more about gradients and the gradient editor, you can refer to the gradients tutorial.
Now let’s open our controller editor, make sure we have the “Color” output selected, and get started!
Here is a common default setup for a gradient. It’s a simple pressure input with a couple of ease functions to make it easier to control.
When the pressure is at 0, it calls the color at the left end of the gradient and the more you press on your tablet’s pen, the more it goes towards a value of 1, which calls the color on the right end.
We can see on the preview here that I progressively press harder to go through my entire gradient and that in the end, it quickly falls back into the starting color.
That’s perfectly correct since at the end of the stroke, the pen was lifted off the tablet’s surface and during a very short time send a decreasing pressure information.
But if you’re trying to draw very clean gradients ending with the expected color, you may find this behavior ugly and frustrating.
But of course, we have a node for that!
We’re going to open the “Signals” folder and add a “Smooth” node at the end of the chain. Then, in the node’s options, adjust the factor parameter.
As we can see on the preview, smoothing our value removes those little accidents and also helps us make a very progressive and regular change in our pressure.
And now we can safely end our gradients at max pressure without unwanted colors. I'm going to change my colors a bit and try this!
The same thing can happen with the size of a brush when you would like to end on a thick stroke but instead get a very fast drop in size. The smooth node can also help in that case.
Okay, moving on to the fun stuff now. Let’s delete everything.
To start with an easy one, let’s plug a simple random node in the color output:
Each round shape in my stroke have a different color from the gradient now, this would look nicer if there was some space between them. We can go to the “Flow” tab and adjust the “Shape Interval” parameter:
And well, that actually looks like a nice touch to add to the previous drawing:
Next up! Let’s delete everything again and try something else.
I'm going back to blue colors in the middle and plug a sinus in the color parameter to see what happens.
Now our value continuously goes up and down between the two end of the gradients.
For more information about the sinus, you can refer to the sinus tutorial.
Sinus is good for regular effects but sometimes we want more random results. Let’s replace it by a “Noise Smooth” node from the “Signals” folder. Just like the sinus, the noise requires an input value. Length or Time are good candidates for that.
And just like the sinus, the noise’s options allows to modify the frequency and amplitude of the effect.
Now here’s an interesting option: Uncheck the “smooth” checkbox in the noise’s options or replace the node by a “Noise Cell” (which actually is just a smooth noise without the smooth option):
You can see in the node’s curve that now our noise jumps between different values and stays constant for a moment before jumping to the next, giving us only one color from the gradient over some length, and then moving on.
It's interesting but definitely not crazy enough, let’s add something. let’s unplug our noise branch and let it rest on the side while we try something else. We’ll mix everything together later.
Now I’m going to try and create a time driven gradient. We have a “Time” node in the “Stroke Parameters”, that should work:
That’s a little disappointing but we can see at the very beginning of our stroke that it actually does something.
What we see here is that the time is a value that goes up to 1 very fast. After that it continues as long as you draw but any value above 1 only returns the end of the gradient.
One thing we could do is make the visible change repeat itself. We can add a “frac” node from the “Math’ folder:
To make it simple, the frac node only returns the decimals from our value. So each time the input value reaches a integer, the result restarts from 0. This gives us a repeating value within our 0-1 range.
But well, that’s not what I wanted, I’d like the gradient to play only once, but in a visible way. Let’s replace the frac node by a simple mul node and set its B value to 0.2:
Much better! And yes, we just slowed time down. How sci-fi is that!
If we try our brush now, we’ll see that it goes through the gradient over time and after that, stick to the end color as long as we draw.
Now let’s drop another mul to multiply our time branch with our previous noise. We'll also open the noise’s options to reduce the amplitude to something like 0.2:
In the final mul curve you can see what happens: our value goes up with time, but not in a straight line, it actually goes a little higher or lower depending on the noise. The reduced amplitude of the noise avoids 0 values so our multiplication doesn't return 0 every time it goes down and always give the same color.
And that should be exactly what we need to draw.... a Sea Socks Monster!
The overall time gradient gives us some depth/light effect while the noise calculation keeps the stripes going, all at the same time while keeping the pressure available for size control.
As you can see you can drive your gradients just like any other parameter, in any way you can imagine. Try every node you know with them and have fun!