REACTIVE EDITOR
Introduction
The Reactive Editor is a node-based visual interface for building graphical elements that respond to different inputs. Elements can be driven by audio signals, microphone input and MIDI, and can be combined with basic logic to construct a flow of interaction visually rather than in code. No programming is required to use it, but the underlying programming principles are made available through the interface.
This offers considerably more precision and interactivity than modulating properties in the Project Editor alone. Constructs such as for loops and while loops can be used to build behaviour that would not be practical to create through the standard interface. The reactive assets you produce can then be imported into the Project Editor and placed on the timeline like any other asset, with their behaviour intact.
This page describes the main functions of the Reactive Editor and the mechanics of building a reactive asset with it, and includes a full reference for every node available. Use the menu on the right to navigate the sections.
Interface Overview
The stage settings (A) define the reactive element itself. Here you set the dimensions of the reactive element stage and its background colour, and add a description that will be carried with the exported file. The thumbnail is also managed here. A thumbnail is generated automatically the first time the element is played, and this control lets you update it later, which is useful once the element has been changed and the original no longer represents it.
The audio and MIDI section (B) provides an option for the signals your element will respond to. Audio files can be loaded here, and the microphone can be enabled, which replaces any loaded audio. MIDI cannot be loaded as a file in this view, but MIDI listening can be turned on so that incoming messages are picked up. Whichever source is active, the incoming signal can be monitored here as it arrives.
The variables section (C) is where you define your own variables. These are instantiated here and can then be used throughout the node graph, which is useful when building an element that needs consistent positioning or repeated values. Although they are set up as static values, they can be updated later within the graph itself.
The main menus (D) run along the interface and cover the file and playback operations: creating a new reactive element, opening a starter element to work from, saving and reloading, importing and exporting, running the element, viewing the output, and reaching the documentation. Each of these is described in more detail below.
The node graph (E) is the main interactive area of the editor, where nodes are added, connected to one another and given input values. This is where the behaviour of the reactive element is actually constructed. Alongside it, the AI assistant (F) can be toggled open, allowing you to describe what you want in plain language and have a node graph generated for you.
Project Setup
The New Stage button lets you choose from a set of presets to define the size of the reactive asset's renderable stage. This becomes the asset's native size, the default layout it carries with it when imported back into the Project Editor.
The Update Thumbnail button refreshes the asset's thumbnail using whatever was last rendered by the 'Run' button in the editor. This is useful once an element has changed and its original thumbnail no longer represents it.
The project background colour sets the colour shown behind the asset while you work. This is purely for simulation, since the asset inherits the background of the project itself once it is back on the main timeline. It is worth setting all the same, as choosing a colour close to your intended background makes it easier to judge how the element will look, particularly when working with transparency or lighter shapes.
The project description accompanies the asset and travels with it. When an asset is generated using the AI assistant, this field is auto-populated, but it can be updated and changed as you see fit, and is a good place to note what the element does or how it is meant to be used.
Audio/MIDI Input
The Load Audio button brings audio into the editor, either your own tracks or one of the demo tracks provided. Whichever you choose, the purpose is to simulate the audio the asset will receive once it is placed on the timeline, so you can build and test its response to sound without leaving the Reactive Editor.
Alongside this, the microphone toggle enables live input, with a selector for choosing which microphone to use. This works in much the same way, simulating the microphone input the asset would receive in a live setting. A mute button is provided so you do not have to listen to the imported track while you work, which becomes welcome when testing against the same few seconds of audio repeatedly.
The Always Reset toggle determines where playback begins each time you press Run. With it enabled, the audio restarts from the beginning on every run. With it disabled, playback resumes from wherever it last stopped, which is useful when you are refining behaviour that occurs partway through a track and do not want to sit through the opening each time.
The Monitor button shows which inputs are active at any given moment. This is multi-tracked, so a five-channel audio source will display activity across all five channels, making it straightforward to confirm the signal is arriving where you expect before wiring it into the graph.
Below this, the MIDI toggle enables MIDI input, showing incoming messages from all MIDI devices enabled on your system. You will need to make sure your audio and MIDI devices are enabled and permitted before they appear here.
Add Variable and Variable List
The variables panel lets you set up variables before the graph begins running. The same thing can be done using nodes, but doing it here is a convenient way to declare and organise them through the interface rather than building the setup into the graph itself.
Several types are available, including number, boolean, string, colour and array. Each variable needs a unique name, and a value, though sensible defaults are already provided so you can create one quickly and adjust it afterwards.
Once created, a variable appears in the 'Variable List' section where its value can be edited or the variable removed from the editor entirely. To use a variable in the node graph, right-click on the canvas and look for the get or set entry corresponding to its name. For a fuller walkthrough of building graphs with variables, see the starter guide for creating reactive node graphs.
Reactive Menu
The menus running along the editor cover the file, playback and assistance operations. Export to Project Editor (A) sends the currently loaded and running reactive asset back to the Sound to Vision Project Editor, where it can be placed on the timeline like any other asset. This is the route you take once an element is finished and ready to use in a project.
Save (B) stores the reactive asset in local memory, and Reload (C) brings back an asset saved that way. New (D) clears everything and starts you with an empty stage, while Starter (E) sets you up with a basic but fully functional node graph, which is a useful way to see how a working element fits together before building your own.
Export (F) writes the node graph out of the software as a JSON file, which can then be used in other instances or shared elsewhere. Import (G) is its counterpart, bringing a JSON node graph back in. Between them, these allow node graphs to be moved between machines or kept outside the browser's local memory.
Toggle output (H) shows or hides the visual output while a node graph is running in the editor, letting you switch between watching the result and working on the graph itself. Documentation (I) links to this page.
The AI assistant (J) toggles the AI panel, which opens a text field where you can describe what you want and have a node graph generated for you. Using the AI requires an account, so Sign in (K) is used to authenticate before it becomes available. Finally, Run (L) executes the node graph you have created.
Reactive AI
Clicking either the AI toggle on the right of the screen or the AI button on the main menu opens the AI panel. This lets you describe the reactive asset you want in plain language using the text entry, and have the node graph generated for you rather than building it by hand.
Once the AI has responded, click on the JSON output it produces to load the graph into the editor. From there you can press Run to see the result, and continue working with it as you would any other graph.
Two modes are available, selected at the bottom of the panel. Start fresh is the default and generates a new graph from scratch. Modify instead makes amendments to the graph that has just been produced, which is useful for refining a result step by step rather than describing everything perfectly in one go. When your prompt is ready, click the send button on the right, and the new or updated graph will be returned a few moments later.
Using this functionality requires you to be signed in, and to have credits available, which can be purchased through the link provided on the page. For more details please see the credits section of the AI page.
It is important to keep your own copy of anything you generate. Sound to Vision does not store your JSON files online, so anything you want to keep must be saved locally: either load the asset into the main Sound to Vision interface where it will be stored, save it using the menu, or export it as a JSON file to keep a record of it. If you generate a graph you are happy with and then start fresh without saving it, it cannot be recovered, though it will persist in the dialog text for as long as the window is open.
Quick Start Guide
Every node graph must contain an onFrame node. This is the entry point that runs once for each frame of animation, and execution of the graph begins there. Everything else in the graph follows from it, so it is always the first thing to place.
The easiest way to begin is with a working example. Click the Starter button on the menu and confirm when asked whether you want to load it. This loads a simple starter graph made up of a handful of nodes and comments. It is deliberately basic, but it is fully functional, so you can manipulate its elements straight away and see how they behave.
Notice that the graph begins with an 'onFrame' node. This is what establishes the order in which the rest of the nodes run. To see what the graph produces, press the Run button. An output window opens and an animation begins, showing a grid of small squares rotating in time. The 'Run' button becomes a Stop button while the animation plays, so press it again to stop, then close the output window. The output can be shown or hidden at any point using the Output button on the main menu.
With the starter graph in front of you, it is worth spending a little time following the connections between nodes to see how the animation is put together. Each node has a question mark in its top right corner giving a short description of what it does. Change some of the values, press 'Run' again, and observe how the animation responds. Working this way, by adjusting a value and immediately seeing its effect, is the quickest way to build an intuition for how the graph fits together.
When you are ready to build something of your own, click New on the menu to start with an empty canvas. Nodes are added by right-clicking on the canvas, which brings up the full list of available nodes to choose from. As before, start with an On Frame node, since nothing will run without it.
From there, build up gradually. A good first step is to add a Create Rectangle node and connect the On Frame node to it, then press 'Run' to confirm a rectangle appears. Change its parameters, run it again, and watch what happens. Once that feels familiar, add further nodes one at a time, checking the result as you go. Building a graph incrementally like this makes it far easier to spot which change caused which effect than assembling everything at once and running it for the first time at the end.
Node Reference
This section is a complete reference for every node available in the Reactive Editor. Nodes are added to the graph by right-clicking on the canvas and selecting one from the list, then connecting their inputs and outputs to build up the behaviour of a reactive element.
Every node graph must contain an On Frame node. This is the entry point that runs once for each frame of animation, and execution of the graph begins there. An Initialization node can also be used to set up state once before any frames are processed.
Reading this reference
Nodes carry two different kinds of connection, and it is worth understanding the distinction before working through the reference below.
Execution pins determine the order in which things happen. A node with an execution input runs only when execution reaches it, and passes execution on through its execution outputs. Drawing nodes, loops and branches all work this way, because the order they run in matters.
Data pins carry values rather than control. A node with no execution pins, such as Add, simply produces a value whenever something asks for it. These can be wired freely without affecting the order of execution.
Each entry below lists the node's inputs and outputs, their data types, and their default values where one exists. The Set by column indicates whether a value can be typed directly on the node, chosen from a selector, or must be supplied by a connection from another node.
Data types
| Type | Meaning |
|---|---|
Number | A numeric value. |
Boolean | True or false. Any non-zero number is treated as true. |
String | A text value. |
Array | An ordered list of values. |
Color | A colour, given as a hex value such as #FFFFFF. |
Data | A generic value whose type depends on what is connected to it. |
Signal | An audio channel selection, such as AudioSignalMix. |
Process | An audio process or band selection, such as s0. |
Easing | An interpolation curve, such as linear. |
Node index
The reference is organised by category. There are 91 nodes in total.
Init (2): Initialization, On Frame
Logic (10): If / Else, While Loop, For Loop, For Each Loop, Break, Continue, AND, OR, XOR, NOT
Math (26): Add, Subtract, Multiply, Divide, Modulo, Power, Round, Floor, Ceil, Max (Num), Min (Num), Sin, Cos, Random, Seeded Random, Custom Formula (2), Custom Formula (4), Sine Generator, Interpolate, Clamp, Abs, Tan, Atan2, Log (Natural), Log (Base 10), Map Range
Compare (6): Equals, Not Equals, Less Than, Less Than or Equal, Greater Than, Greater Than or Equal
Bitwise (4): Bitwise AND, Bitwise OR, Bitwise XOR, Bitwise NOT
Time (4): Frame Count (Project), Frame Count (Asset), Global Time, Asset Time
Stage Properties (2): Screen Width, Screen Height
Audio (2): Read Audio Frequency, Read Audio (Process | Band)
MIDI (2): Read MIDI Note (Velocity), Read MIDI Control Change
Color (2): Create Color, HSV to RGB
Draw (9): Define Border, Create Rectangle, Create Rounded Rectangle, Create Circle, Create Triangle, Create Iso Triangle, Create Arc, Create Poly, Create Line
Array (20): Length, Is Empty, Front, Back, Get By Position, Max (Array), Min (Array), Search, Binary Search (Num), Set By Position, Insert, Push Back, Push Front, Pop Back, Pop Front, Reverse, Sort (Num), String to Array, Array to String, Swap
Init
Entry points for the graph. Every reactive element needs an On Frame node, which is where execution begins on each frame of animation.
Initialization initialization
Runs once when the asset starts. Use this to set up variables, arrays, and initial state before any frames are processed.
Execution: this node has no execution input; execution continues on to the next node.
This node takes no inputs and produces no outputs.
On Frame onFrame
Runs once every frame. This is the main execution entry point for animation and real-time logic.
Execution: this node has no execution input; execution continues on to the next node.
This node takes no inputs and produces no outputs.
Logic
Branching and looping. These nodes control the order in which the rest of the graph executes.
If / Else ifElse
Branches execution based on a boolean condition. Executes the True path if the condition is non-zero, otherwise the False path. Both paths rejoin at Done.
Execution: this node has an execution input; execution continues through True, False, Done.
| Input | Type | Default | Set by |
|---|---|---|---|
Bool | Boolean | true | Type a value or connect |
While Loop whileLoop
Repeatedly executes the Loop Body as long as the Bool input is true. Execution continues at Completed once the condition is false.
Execution: this node has an execution input; execution continues through Loop Body, Completed.
| Input | Type | Default | Set by |
|---|---|---|---|
Bool | Boolean | false | Type a value or connect |
For Loop forLoop
Iterates from From up to but not including To, stepping by Increment each iteration. The current iteration index is available on the Index output.
Execution: this node has an execution input; execution continues through Loop Body, Completed.
| Input | Type | Default | Set by |
|---|---|---|---|
From | Number | 0 | Type a value or connect |
To (Excl) | Number | 10 | Type a value or connect |
Increment | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Index | Number |
For Each Loop forEachLoop
Iterates over every element of an array. Each iteration exposes the current Value, its Index, and the original Array.
Execution: this node has an execution input; execution continues through Loop Body, Completed.
| Input | Type | Default | Set by |
|---|---|---|---|
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Value | Data |
Index | Number |
Array | Array |
Break breakLoop
Immediately exits the current loop and continues execution after it. Must be used inside a For, For Each, or While loop.
Execution: this node has an execution input.
This node takes no inputs and produces no outputs.
Continue continueLoop
Skips the remainder of the current loop iteration and moves to the next one. Must be used inside a For, For Each, or While loop.
Execution: this node has an execution input.
This node takes no inputs and produces no outputs.
AND logicalAnd
Returns true only if both Value A and Value B are true.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Boolean | true | Type a value or connect |
Value B | Boolean | true | Type a value or connect |
| Output | Type |
|---|---|
Result | Boolean |
OR logicalOr
Returns true if either Value A or Value B is true.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Boolean | true | Type a value or connect |
Value B | Boolean | true | Type a value or connect |
| Output | Type |
|---|---|
Result | Boolean |
XOR logicalXor
Returns true if exactly one of Value A or Value B is true, but not both.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Boolean | true | Type a value or connect |
Value B | Boolean | true | Type a value or connect |
| Output | Type |
|---|---|
Result | Boolean |
NOT logicalNeg
Inverts a boolean value. Returns true if the input is false, and false if the input is true.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Boolean | false | Type a value or connect |
| Output | Type |
|---|---|
Result | Boolean |
Math
Arithmetic, trigonometry and value generation. Most of these are pure data nodes with no execution pin.
Add add
Returns the sum of Value A and Value B.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 0 | Type a value or connect |
Value B | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Subtract subtract
Returns Value A minus Value B.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 0 | Type a value or connect |
Value B | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Multiply multiply
Returns Value A multiplied by Value B.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 1 | Type a value or connect |
Value B | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Divide divide
Returns Value A divided by Value B. Avoid connecting zero to Value B.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 1 | Type a value or connect |
Value B | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Modulo modulo
Returns the remainder of Value A divided by Value B. Useful for wrapping values within a range.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 1 | Type a value or connect |
Value B | Number | 2 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Power power
Returns Value A raised to the power of Value B.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 2 | Type a value or connect |
Value B | Number | 2 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Round round
Rounds the input to the nearest whole number.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Floor floor
Rounds the input down to the nearest whole number.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Ceil ceil
Rounds the input up to the nearest whole number.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Max (Num) maxNum
Returns whichever of Value A or Value B is larger.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 0 | Type a value or connect |
Value B | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Max | Number |
Min (Num) minNum
Returns whichever of Value A or Value B is smaller.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 0 | Type a value or connect |
Value B | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Min | Number |
Sin sinNum
Returns the sine of the input value in radians. Output ranges from -1 to 1.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Cos cosNum
Returns the cosine of the input value in radians. Output ranges from -1 to 1.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Random random
Returns a new random number between 0 (inclusive) and 1 (exclusive) every frame.
Execution: data node, no execution pins.
| Output | Type |
|---|---|
Random [0,1) | Number |
Seeded Random seededRandom
Returns a deterministic random number between 0 and 1 for a given seed. The same seed always produces the same output, useful for stable procedural patterns.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Seed | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
[0,1) | Number |
Custom Formula (2) formula
Evaluates a custom mathematical expression using up to two inputs: a, b. Supports standard operators and functions such as exp(), sin(), cos(), abs(), and ^. Example: d/20*exp(-((a - b)^2) / (2 * c^2))
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
formulaText | String | a + b | Edited on the node |
a | Number | 0 | Type a value or connect |
b | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Custom Formula (4) formulaAdvanced
Evaluates a custom mathematical expression using up to four inputs: a, b, c, d. Supports standard operators and functions such as exp(), sin(), cos(), abs(), and ^. Example: d/20*exp(-((a - b)^2) / (2 * c^2))
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
formulaText | String | a + b + c + d | Edited on the node |
a | Number | 0 | Type a value or connect |
b | Number | 0 | Type a value or connect |
c | Number | 0 | Type a value or connect |
d | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Sine Generator sineGenerator
Generates a sine wave value. Gain sets the amplitude, Frequency controls the rate of oscillation, X is the input position along the wave, and Offset shifts the output. Decay Rate applies an envelope decay to the amplitude over time.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Gain | Number | 200 | Type a value or connect |
Frequency | Number | 0.00166 | Type a value or connect |
X | Number | 0.0 | Type a value or connect |
Offset | Number | 0.0 | Type a value or connect |
Decay Rate | Number | 0.0 | Type a value or connect |
| Output | Type |
|---|---|
Value | Number |
Interpolate interpolate
Interpolates between From and To using t (0-1) as the position. Method selects the easing curve. To delay the start, subtract an offset from your time input before connecting to t.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
From | Number | 0 | Type a value or connect |
To | Number | 1 | Type a value or connect |
t | Number | 0 | Type a value or connect |
Method | Easing | linear | Selector on node |
| Output | Type |
|---|---|
Result | Number |
Clamp clamp
Clamps the input Value between Min and Max. Values below Min return Min, values above Max return Max.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Number | 0 | Type a value or connect |
Min | Number | 0 | Type a value or connect |
Max | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Abs absNum
Returns the absolute (non-negative) value of the input.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Tan tanNum
Returns the tangent of the input value in radians.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Atan2 atan2Num
Returns the angle in radians between the positive X axis and the point (X, Y). Useful for computing rotation toward a target.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
X | Number | 0 | Type a value or connect |
Y | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Angle | Number |
Log (Natural) logNum
Returns the natural logarithm (base e) of the input. Avoid zero or negative inputs.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Log (Base 10) log10Num
Returns the base-10 logarithm of the input. Useful for converting linear amplitude to decibels. Avoid zero or negative inputs.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Map Range mapRange
Remaps a value from one range to another. For example mapping an audio band output of 0-255 to a screen position of 0-1920.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Number | 0 | Type a value or connect |
In Min | Number | 0 | Type a value or connect |
In Max | Number | 1 | Type a value or connect |
Out Min | Number | 0 | Type a value or connect |
Out Max | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Compare
Comparison operators returning a boolean, typically fed into an If / Else or a While Loop.
Equals equals
Returns true if Value A and Value B are equal.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Data | 0 | Type a value or connect |
Value B | Data | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Boolean |
Not Equals notEquals
Returns true if Value A and Value B are not equal.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Data | 0 | Type a value or connect |
Value B | Data | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Boolean |
Less Than less
Returns true if Value A is strictly less than Value B.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 0 | Type a value or connect |
Value B | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Result | Boolean |
Less Than or Equal lessEq
Returns true if Value A is less than or equal to Value B.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 0 | Type a value or connect |
Value B | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Result | Boolean |
Greater Than greater
Returns true if Value A is strictly greater than Value B.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 0 | Type a value or connect |
Value B | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Result | Boolean |
Greater Than or Equal greaterEq
Returns true if Value A is greater than or equal to Value B.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 0 | Type a value or connect |
Value B | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Result | Boolean |
Bitwise
Bit-level operations for working with integer flags and masks.
Bitwise AND bitwiseAnd
Performs a bitwise AND on the integer representations of Value A and Value B. Each bit in the result is 1 only if the corresponding bits in both inputs are 1.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 1 | Type a value or connect |
Value B | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Bitwise OR bitwiseOr
Performs a bitwise OR on the integer representations of Value A and Value B. Each bit in the result is 1 if either corresponding bit is 1.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 1 | Type a value or connect |
Value B | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Bitwise XOR bitwiseXor
Performs a bitwise XOR on the integer representations of Value A and Value B. Each bit in the result is 1 only if the corresponding bits differ.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value A | Number | 1 | Type a value or connect |
Value B | Number | 1 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Bitwise NOT bitwiseNeg
Inverts all bits of the integer representation of the input value.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Number | 0 | Type a value or connect |
| Output | Type |
|---|---|
Result | Number |
Time
Frame counters and elapsed time, for both the project as a whole and the individual asset.
Frame Count (Project) frameCountProject
Returns the total number of frames elapsed since the project started.
Execution: data node, no execution pins.
| Output | Type |
|---|---|
Frame Count | Number |
Frame Count (Asset) frameCountAsset
Returns the number of frames elapsed since this asset started.
Execution: data node, no execution pins.
| Output | Type |
|---|---|
Frame Count | Number |
Global Time globalTime
Returns the elapsed time in seconds from the beginning of the project. timeline.
Execution: data node, no execution pins.
| Output | Type |
|---|---|
Time | Number |
Asset Time assetTime
Returns the elapsed time in seconds relative to the beginning of this asset.
Execution: data node, no execution pins.
| Output | Type |
|---|---|
Time | Number |
Stage Properties
Read the dimensions of the stage so that graphs can scale to whatever resolution the project uses.
Screen Width screenWidth
Returns the current width of the stage in pixels.
Execution: data node, no execution pins.
| Output | Type |
|---|---|
Width | Number |
Screen Height screenHeight
Returns the current height of the stage in pixels.
Execution: data node, no execution pins.
| Output | Type |
|---|---|
Height | Number |
Audio
Read incoming audio, either as a processed metric across a frequency band or as the amplitude of a single frequency bin.
Read Audio Frequency readFrequency
Reads the amplitude at a specific frequency bin from the selected audio channel. Connect a frequency index to the Frequency input and select the channel (e.g. AudioSignalMix).
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Frequency | Data | 0 | Selector on node |
Channel | Signal | AudioSignalMix | Selector on node |
| Output | Type |
|---|---|
Data | Data |
Read Audio (Process | Band) readAudioBand
Reads a processed audio metric from the selected channel. Available bands: s0 RMS full range (volume), s1 max full range, s2 integrated bass, s3 integrated mid, s4 integrated treble, s5 max bass, s6 max mid, s7 max treble, s8 triggered integrate full range, s9 RMS bass, s10 RMS mid, s11 RMS treble.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Channel | Signal | AudioSignalMix | Selector on node |
Process | Band | Process | s0 | Selector on node |
| Output | Type |
|---|---|
Data | Data |
MIDI
Read incoming MIDI note velocity and control change values.
Read MIDI Note (Velocity) readMidiVelocity
Returns the velocity of a MIDI note by note number. Set Channel to -1 to listen on all channels, or specify a channel number (1-16).
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
NoteNumber | Number | 0 | Selector on node |
Channel | Number | -1 | Selector on node |
| Output | Type |
|---|---|
Velocity | Number |
Read MIDI Control Change readMidiControlChange
Returns the current value of a MIDI Control Change message by CC number. Set Channel to -1 to listen on all channels, or specify a channel number (1-16).
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
CCNumber | Number | 0 | Selector on node |
Channel | Number | -1 | Selector on node |
| Output | Type |
|---|---|
Value | Number |
Color
Build and convert colour values for use with the drawing nodes.
Create Color createColor
Creates a color value from Red, Green, and Blue components in the range 0-255. Connect the Color output to any Fill Colour or Border Color input.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
Red | Number | 255 | Selector on node |
Green | Number | 255 | Selector on node |
Blue | Number | 255 | Selector on node |
| Output | Type |
|---|---|
Color | Color |
HSV to RGB hsvToRgb
Converts a Hue, Saturation, Value color to a packed RGB color value. All inputs are in the range 0-1. Useful for smoothly cycling through colors by animating the H input.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
H | Number | 0 | Selector on node |
S | Number | 0 | Selector on node |
V | Number | 0 | Selector on node |
| Output | Type |
|---|---|
Color | Color |
Draw
Draw shapes onto the stage. These are execution nodes and run in the order they are connected.
Define Border defineBorder
Defines a border style with a given width, color, and alpha. The Border output is a reference key that can be connected to the Border input of any draw node.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
Border Width | Number | 1 | Selector on node |
Border Color | Color | #FFFFFF | Selector on node |
Border Alpha | Number | 1.0 | Selector on node |
| Output | Type |
|---|---|
Border | String |
Create Rectangle createRectangle
Draws a rectangle on the stage. Position, size, rotation, fill color, and transparency are all configurable. Optionally connect a Define Border output to add a stroke. Enable Cut Out to subtract this shape from the layer below.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
X Pos | Data | 0 | Selector on node |
Y Pos | Data | 0 | Selector on node |
Width | Data | 50 | Selector on node |
Height | Data | 100 | Selector on node |
Rotation | Data | 0 | Selector on node |
Cut Out | Boolean | false | Selector on node |
Fill Colour | Color | #FFFFFF | Selector on node |
Alpha | Data | 1 | Selector on node |
Border | String | none | Connection required |
Create Rounded Rectangle createRoundedRectangle
Draws a rectangle with rounded corners. Rounded Radius controls the corner curve. Otherwise behaves the same as Create Rectangle.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
X Pos | Data | 0 | Selector on node |
Y Pos | Data | 0 | Selector on node |
Width | Data | 50 | Selector on node |
Height | Data | 100 | Selector on node |
Rotation | Data | 0 | Selector on node |
Rounded Radius | Data | 20 | Selector on node |
Cut Out | Boolean | false | Selector on node |
Fill Colour | Color | #FFFFFF | Selector on node |
Alpha | Data | 1 | Selector on node |
Border | String | none | Connection required |
Create Circle createCircle
Draws an ellipse or circle. Set Width and Height to the same value for a perfect circle, or different values for an ellipse.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
CX | Data | 270 | Selector on node |
CY | Data | 270 | Selector on node |
Width | Data | 100 | Selector on node |
Height | Data | 100 | Selector on node |
Rotation | Data | 0 | Selector on node |
CutOut | Boolean | false | Selector on node |
Fill Colour | Color | #FFFFFF | Selector on node |
Alpha | Data | 1 | Selector on node |
Border | String | none | Connection required |
Create Triangle createTriangle
Draws a right-angled triangle. Use Rotation to orient it. For a symmetrical triangle use Create Iso Triangle instead.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
X Pos | Data | 0 | Selector on node |
Y Pos | Data | 0 | Selector on node |
Width | Data | 50 | Selector on node |
Height | Data | 100 | Selector on node |
Rotation | Data | 0 | Selector on node |
Cut Out | Boolean | false | Selector on node |
Fill Colour | Color | #FFFFFF | Selector on node |
Alpha | Data | 1 | Selector on node |
Border | String | none | Connection required |
Create Iso Triangle createIsoTriangle
Draws an isosceles triangle centred on the X/Y position. Width controls the base and Height controls the apex distance.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
X Pos | Data | 0 | Selector on node |
Y Pos | Data | 0 | Selector on node |
Width | Data | 50 | Selector on node |
Height | Data | 100 | Selector on node |
Rotation | Data | 0 | Selector on node |
Cut Out | Boolean | false | Selector on node |
Fill Colour | Color | #FFFFFF | Selector on node |
Alpha | Data | 1 | Selector on node |
Border | String | none | Connection required |
Create Arc createArc
Draws an arc or donut segment. Start and End Angle are in degrees. Inner Radius Factor controls the hole size from 0 (filled wedge) to 1 (thin ring).
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
CX | Data | 270 | Selector on node |
CY | Data | 270 | Selector on node |
Width | Data | 100 | Selector on node |
Height | Data | 100 | Selector on node |
Rotation | Data | 0 | Selector on node |
StartAngle | Data | 20 | Selector on node |
EndAngle | Data | 135 | Selector on node |
InnerRadiusFactor | Data | 0.5 | Selector on node |
CutOut | Boolean | false | Selector on node |
Fill Colour | Color | #FFFFFF | Selector on node |
Alpha | Data | 1 | Selector on node |
Border | String | none | Connection required |
Create Poly createPoly
Draws a filled polygon from two arrays of X and Y coordinates. The arrays must be the same length. Useful for custom or procedurally generated shapes.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
X Pos Array | Array | none | Connection required |
Y Pos Array | Array | none | Connection required |
Cut Out | Boolean | false | Selector on node |
Fill Colour | Color | #FFFFFF | Selector on node |
Alpha | Data | 1 | Selector on node |
Border | String | none | Connection required |
Create Line createLine
Draws a straight line from (X1, Y1) to (X2, Y2). A Border input is required to define the line width and color — connect a Define Border node to control the appearance.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
X1 | Number | none | Selector on node |
Y1 | Number | none | Selector on node |
X2 | Number | none | Selector on node |
Y2 | Number | none | Selector on node |
Alpha | Data | 1 | Selector on node |
Border | String | none | Connection required |
Array
Create, inspect and manipulate arrays. Useful for procedural and repeating patterns.
Length length
Returns the number of elements in the array.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Length | Number |
Is Empty isEmpty
Returns true if the array contains no elements.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Result | Boolean |
Front front
Returns a reference to the first element of the array without removing it.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Front (Ref) | Data |
Back back
Returns a reference to the last element of the array without removing it.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Back (Ref) | Data |
Get By Position getByPos
Returns the value at the given index position in the array. Index is zero-based.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Position | Number | 0 | Type a value or connect |
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Value | Data |
Max (Array) maxArray
Returns the largest numeric value found in the array.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Max Value | Number |
Min (Array) minArray
Returns the smallest numeric value found in the array.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Min Value | Number |
Search search
Searches the array for a value. Returns true on Exists if found, and the Index of the first match. Performs a linear search from the front.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Data | 0 | Type a value or connect |
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Exists | Boolean |
Index | Number |
Binary Search (Num) binarySearch
Performs a binary search on a sorted numeric array. Returns whether the value exists, and the lower and upper bound indices around the search value. The array must be sorted for correct results.
Execution: data node, no execution pins.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Number | 0 | Type a value or connect |
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Exists | Boolean |
Lower Bound | Number |
Upper Bound | Number |
Set By Position setByPos
Sets the value at a given index in the array. Index is zero-based. The array is modified in place.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
Position | Number | 0 | Type a value or connect |
Value | Data | 1 | Type a value or connect |
Array | Array | none | Connection required |
Insert insert
Inserts a value at the given index, shifting subsequent elements forward. Returns the modified array.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
Position | Number | 0 | Type a value or connect |
Value | Data | 1 | Type a value or connect |
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Array | Array |
Push Back pushBack
Appends a value to the end of the array.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Data | 1 | Type a value or connect |
Array | Array | none | Connection required |
Push Front pushFront
Inserts a value at the beginning of the array, shifting all existing elements forward.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Data | 1 | Type a value or connect |
Array | Array | none | Connection required |
Pop Back popBack
Removes the last element from the array and returns the modified array.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Array | Array |
Pop Front popFront
Removes the first element from the array and returns the modified array.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Array | Array |
Reverse reverse
Reverses the order of elements in the array and returns the result.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
Array | Array | none | Connection required |
| Output | Type |
|---|---|
Array | Array |
Sort (Num) sortNum
Sorts a numeric array in ascending order if Increasing is true, or descending if false.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
Array | Array | none | Connection required |
Increasing | Boolean | true | Type a value or connect |
| Output | Type |
|---|---|
Array | Array |
String to Array strToArray
Converts a string into an array of individual characters.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
String | String | none | Connection required |
| Output | Type |
|---|---|
Array | Array |
Array to String arrayToStr
Joins all elements of an array into a single string.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
Array | Array | none | Connection required |
| Output | Type |
|---|---|
String | String |
Swap swap
Swaps the values of two references and returns both in their exchanged positions.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
Ref 1 | Data | none | Connection required |
Ref 2 | Data | none | Connection required |
| Output | Type |
|---|---|
Ref 1 | Data |
Ref 2 | Data |
Utility
Debugging and documentation aids that do not affect the rendered output.
Print print
Logs the input value to the browser console. Use this to inspect values during development.
Execution: this node has an execution input; execution continues on to the next node.
| Input | Type | Default | Set by |
|---|---|---|---|
Value | Data | none | Type a value or connect |
Comment comment
A non-executing annotation node. Double-click to edit the text. Use it to document your graph for yourself or your creative team.
Execution: data node, no execution pins.
This node takes no inputs and produces no outputs.