/ HALion Developer Resource / HALion Tutorials & Guidelines / How-tos /

Animating SVGs with Additional Parameters

(Since HALion 7.0)

On this page:

• Defining Additional SVG Parameters
• Animating Additional SVG Parameters
  • Example VST Preset
  • Changing Multiple SVG Properties

Animation controls can have more than one animatable SVG property.

Defining Additional SVG Parameters

To define additional parameters, you must use a Lua expression with the V, N, or S variable extended by a name variable. An expression begins with $ followed by (). Everything inside the brackets will be evaluated and returns the effective value for the property.

$(expression)

You can use the following variables in Lua expressions:

The string of a S variable is set either by a stringlist variable or by MIDI script or UI script parameters. The ability to use the string output of a parameter allows you to transmit even a full sequence of values, such as the path of an object, for example.

$(VName) | $(NName) | $(SName)

The additional parameters must be defined in the respective SVG resource like this.

These additional SVG resource attributes are introduced as supplementary values within an Animation control. They can be connected to engine, MIDI script, or UI script parameters, analogous to other control values.

This integration empowers the manipulation of SVG elements and their subordinate objects through diverse avenues. Each associated parameter governs a specific facet of the animation. For instance, one parameter might change object rotation, while another parameter concurrently adjusts dimensions, color properties, and so forth.

❕ To animate SVGs without the utilization of UI scripts, see Animating Switches Using SVGs for details.

Animating Additional SVG Parameters

The subsequent example is presented as illustrative guide to kickstart your own solution-building process.

Example VST Preset

• Animating SVGs with Additional Parameters.vstpreset

To explore the templates in this example:

1. Load Animating SVGs with Additional Parameters.vstpreset.
2. Open the Macro Page Designer, go to the GUI Tree and select the Animation Script Example template.
3. Click Edit Element to examine the template.
4. Inside the template, select the Animation control. Look which Bitmap resource has been assigned.
5. Go to the Resources Tree and select the corresponding SVG resource. Look for the IDs, properties and values as listed below.

Changing Multiple SVG Properties

Resource: Rotating Star.

Description: The star is faded out by scaling it from original to minimum size. The name of the additional parameter is 'Scale'.

Description: The star is rotated by 360 degrees. It does not need a name variable, because it uses the 'Value' parameter of the Animation control.

Description: The color fades from white to red. The name of the additional parameter is 'Color'.

The script has three outputs which are connected to the corresponding SVG properties. The speed for each animation is defined inside the script. The script is attached to the Animation Script Example Template.

defineParameter{name = "on", default = false, onChanged = function() animate() end}   
defineParameter{name = "out1", default = 0, min = 0, max = 1}   
defineParameter{name = "out2", default = 0, min = 0, max = 1}   
defineParameter{name = "out3", default = 0, min = 0, max = 1}   
defineParameter{name = "frames", default = 65, min = 1, max = 1000, type = "integer"}   
defineParameter{name = "frameDuration", default = 50, min = 20, max = 10000, type = "integer"}   
  
-- The calcPhasor function returns a closure that maintains the counter value
-- and increments it by the specified increment.  
function calcPhasor(increment)  
    local counter = 0  
  
    return function()  
        counter = (counter + increment) % 1  
        return counter  
    end  
end  

function animate()
    -- Create phasors with different speed.
    local phasor1 = calcPhasor(1/frames)        -- Full speed.  
    local phasor2 = calcPhasor(1/(frames*2))    -- Half speed. 
    local phasor3 = calcPhasor(2*1/frames)      -- Double speed. 
    -- Call the phasor functions repeatedly. 
    while on do  
        out1 = phasor1()  
        out2 = phasor2()  
        out3 = phasor3()  
        wait(frameDuration)  
    end  
    out1, out2, out3 = 0, 0, 0  
end