GradientTexture Op


texture containing a colour gradient that can be altered with an editor

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

Edit Documentation
Full Name
  • Ops.Gl.GradientTexture
  • Core Op - Official cables op
  • MIT
AuthorTest Patches


Gradient (Number)

Click this to open the editor for the gradient. See docs for a more in depth explanation.

Direction index (Number:integer )
Smoothstep (Number:boolean )

Enable smoothstep on changes in gradients.

Step (Number:boolean )
Flip (Number:boolean )
sRGB (Number:boolean )
Oklab (Number:boolean )
Size (Number:integer )

The resolution of the gradient in pixels. 256 is a good default value

filter index (Number:integer ) nearest  linear  mipmap 
wrap index (Number:integer )
Gradient Array (Array)

An array of Object containing pos,r,g,b,a information (see documentation for format)

Randomize Colors (Trigger)


Texture (Object)

The texture out

Colors (Array)
Colors Pos (Array)

Patches using GradientTexture

  • Examples
  • Public
  • My Patches


bugfixfixed radial mode: flip option was ignored / default gradient was not shown without making changesuser avatarpandur - 2024-02-29 14:04
improvementoptimized/reduced unnecessary recreation user avatarpandur - 2024-02-29 14:09
improvementRadial mode is more compatible/same colors like the simple gradientuser avatarpandur - 2024-03-12 17:01
improvementAdded XY and YX mode to generate diagonal color gradientsuser avatarpandur - 2024-03-12 17:11