Creating a colour blend animation. Tweet

[stratified]

Hi All,

Here's a simple example to create a colour blending animator for an RGB texture node (octane.NT_TEX_RGB) (Works only from release candidate 1.25). It displays 2 colour swatches to select start and end colour. A bit subtle is that the swatch returns colours components in the range [0, 255] while NT_TEX_RGB expects its components in the range [0, 1] so we have to normalize ourselves. A part from that it's pretty straightforward:

Code: Select all

-- Texture colour blending animation. This will hook up colour blending
-- on the selected texture node.
--
-- @description Hooks up a texture with a colour blend animation.
-- @author      Thomas Loockx
-- @version     0.2

-- get the selected RGB texture node
local tex = octane.project.getSelection()[1]
assert(tex:getProperties().type == octane.NT_TEX_RGB, "RGB texture node expected")


local startColour = octane.gui.create
{
    type   = octane.gui.componentType.COLOUR_SWATCH,
    colour = { 255, 0, 0, 255 },
    width  = 200,
    height = 200,
}


local endColour = octane.gui.create
{
    type   = octane.gui.componentType.COLOUR_SWATCH,
    colour = { 0, 255, 0, 255 },
    width  = 200,
    height = 200,
}


local group = octane.gui.create
{
    type     = octane.gui.componentType.GROUP,
    rows     = 1,
    cols     = 2,
    children = { startColour, endColour },
    padding  = { 10 },
    border   = false,
}



local window = octane.gui.create
{
    type     = octane.gui.componentType.WINDOW,
    children = { group },
    width    = group:getProperties().width,
    height   = group:getProperties().height,
    border   = false,
    text     = "Texture Blending",
}

-- normalizes a colour from uint8 to float
local function normalize(cl)
    return { cl[1] / 255, cl[2] / 255, cl[3] / 255, cl[4] / 255 }
end


-- hooks up an animator with the texture.
local function setTexAnimator(tex, startColour, endColour, nbFrames)
    -- animator will interpolate between these colours
    tex:setAnimator(octane.A_VALUE, { 0 }, { startColour, endColour}, 1)
end


-- Gui handling callback
local function callback()
    setTexAnimator(
        tex,
        normalize(startColour:getProperties().colour),
        normalize(endColour:getProperties().colour),
        25)
end
startColour:updateProperties{ callback = callback }
endColour:updateProperties  { callback = callback }

window:showWindow()


Here's a screenshot:

cheers,
Thomas