GradientColorArray Op
texture containing a colour gradient that can be altered with an editor
Summary (oneliner)
This op allows the creation of custom gradients. Click the edit button to get the UI to edit gradient. More colours can be added to the gradient.
Click on the small squares at the bottom and then the larger square to change the colour of that gradient point.
Drag the small squares around to change the relationship between the different colours. Click once in the thin line at the bottom to add extra squares/gradient points.
This will produce a datastructure like this, which can also go into the 'Gradient Array'-Port:
[
{
"pos": 0,
"r": 0,
"g": 0.19215686274509805,
"b": 0.6705882352941176,
"a": 1
},
{
"pos": 0.085,
"r": 0.00784313725490196,
"g": 0.20392156862745098,
"b": 0.6941176470588235,
"a": 0.76
},
...
{
"pos": 1,
"r": 0.9882352941176471,
"g": 0.3215686274509804,
"b": 1,
"a": 0
}
]
- Ops.Color.GradientColorArray
- Core Op - Official cables op
- MIT
Documentation (markdown)
Issues
Example patch id
Youtube ids (comma seperated)
Op Licence
Caniuse query
Example Patch gradient array example
INPUT PORTS
Click this to open the editor for the gradient. See docs for a more in depth explanation.
Enable smoothstep on changes in gradients.
The resolution of the gradient in pixels. 256 is a good default value
An array of Object containing pos,r,g,b,a information (see documentation for format)
OUTPUT PORTS
Patches using GradientColorArray
Changelog
bugfix | fixed radial mode: flip option was ignored / default gradient was not shown without making changes | pandur - 2024-02-29 14:04 |
improvement | optimized/reduced unnecessary recreation | pandur - 2024-02-29 14:09 |
improvement | Radial mode is more compatible/same colors like the simple gradient | pandur - 2024-03-12 17:01 |
improvement | Added XY and YX mode to generate diagonal color gradients | pandur - 2024-03-12 17:11 |
improvement | Fix problems with flickering because texture was generated not early enough | pandur - 2024-08-05 15:11 |
feature | Added option to add dithering to reduce color banding | pandur - 2024-08-29 10:47 |
feature | Add XX and YY option to have a one axis gradient that is size*size pixels big and not size*1 pixels (e.g. needed to add dithering) | pandur - 2024-08-29 10:48 |
improvement | Opening the gradient editor at the bottom edge of the window will now move the gradient editor up so it is fully visible | pandur - 2024-08-30 11:57 |
new op | op created | pandur - 2024-12-13 11:05 |
rename | Patch.PoJUzEw.GradientColorArray renamed to Ops.Color.GradientColorArray | pandur - 2024-12-13 11:29 |