DDI © 2025 by Dina Silanteva is licensed under CC BY-NC-SA 4.0

[D]ynamic [D]esign [I]nstrument

Dynamic Design Instrument [DDI] made for creating live audio-reactive visuals, it is built with OpenFrameworks and controlled through TouchOSC. It uses a vertex-geometry-fragment shader pipeline to generate and control rectangular forms arranged in layered grids, where width, height, colour, position, and the number of instances can all be adjusted and made responsive to sound.

Noise, gradient, video and text textures, together with a custom typeface, feed into the blended visual layers, influencing the shapes' size, colour, and motion. Presets and keyframes are stored as JSON files, allowing flexible setup, saving, loading, and recording of live performances driven by audio input.

Blend mode [ [N]ormal [S]creen [M]ultiply [D]ifference ] Coordinates [ [X]horisontal [Y]vertical ] Step [ [+]add [-]substract ] Color Channel [ [R]ed [G]reen [B]lue ] Bin number [1 2 3] Music [ [H]IGH [M]edium [L]ow ] Apply to [ [N]ormal [R]everse [F]ont [B]ackground] ] Rotate [+45] Flip[X Y]

LAYERS

The program is set to generate rectangular instances across 10 layers. 8 standard layers are rendered directly on the canvas. 2 texture layers are not rendered to the canvas and are used as texture sources for layers via bins (see T1 & T2).

The selected layer is the one that is currently being edited. All layer controls display the parameters of the selected layer and update when switching layers via feedback sent from openFrameworks to TouchOSC.

The active layer is a layer that is currently rendered on the canvas.

Layers are drawn in the order defined by [Layer order] [1–8] and overlap using [n]ormal blending unless another blend mode is selected [Screen Multiply Difference].

GENERAL LAYER CONTROLS

By default, each layer is set to the size of the canvas. A custom size can be defined per layer by dragging the mouse on the canvas or by setting Resolution [+ -] and adjusting the position in four directions. A mouse click on the canvas returns the layer to its default position and size.

Each layer can be put into constant motion using faders that control motion speed.

INSTANCES

Each instance is a rectangle generated in the geometry shader from vertices passed from the vertex shader.

The number of instances per layer is controlled by the grid [X Y]. The grid can be adjusted using fader buttons [+ -][X Y] that add a row or colum of instances and multiplied by [1 2 4 8 16] [X Y].

The number of instances is defined by setting number of rows and column of the grid [X Y]. It can be adjusted using faders [X Y], buttons [+ -] [X Y] and be multiplied by [1 2 4 8 16] [X Y].

Instances are distributed evenly across the canvas along the X and Y axes. The Equal Grid button realigns spacing from approximate alignment, where spacing may vary by 1 pixel, to pixel-perfect alignment, where all spacing values are equal integers and the canvas size is scaled to compensate. Equal Grid is a global setting applied to the entire project and is not stored per layer.

Instances can blend with each other using blend modes [N S M D] and can be rendered using monochrome or colour dithering.

Instance size can be clamped to [1] to prevent overlap with neighbouring instances, to [2] to grow up to double size and overlap with 1 neighbour, [3] to grow up to 3x size and overlap with 2 neighbors. [INF] removes any size clamping.

BASE

Base size defines the constant size of an instance. It can be panned [Left Right] [Top Bottom] so the instance growth starts off-centre.

Instance size can be influenced by texture's colour sent to the layer via bins [1 2 3]. A bin must be selected and an influence amount defined. Bin influence can also be panned.

Bin influence can be applied to all instances [N], font instances only [F], or background instances only [B]. Reversed mode [R] increases the size of background instances and decreases the size of font instances.

Audio influence (see Audio) can affect instance size with adjustable strength for channel [H M L]. Audio can be applied exclusively to instances where bin influence is active [MX MY].

POSITION

Position can be controlled using faders [Left Right] [Top Bottom]. When [TX TY] is enabled, these controls define motion speed rather than absolute position.

Position can also be influenced by texture colour via bins [1 2 3]. Bin influence defines the strength of the texture-driven position offset.

Motion can be centred using [CX CY], so movement originates from the centre and expands in opposite directions.

Bin position influence can be applied to all instances [N], font instances only [F], background instances only [B], or reversed mode [R], where font instances move in one direction and background instances move in the opposite direction.

Audio channels [H M L] can influence position across four directions.

Bins used for base or position can be configured per layer. Specific texture channels [R G B] can be selected and inverted. Bin textures can be rotated [+45] or flipped [X Y] (coming soon).

BLUR

Blur defines vertical and horizontal blurring of instances [X Y], with additional panning [L R] [T B].

Blur can be driven by selected texture bins [1 2 3], influenced by audio channels [H M L], and applied to all instances, font instances only or background instances only [N F B].

COLOUR

Instance colour is controlled via channels [R G B A] and can be influenced by audio input [H M L] [R G B A].

Texture bins can overlay instances using sampling modes [Full Grid Pixel]. Full mode overlays the entire layer size. Grid mode fits the texture to each instance. Pixel mode downsamples the texture to the grid size [X Y] and assigns pixel colour to the instance.

Texture bins can be applied to all instances, font instances only or background instances only [N F B]

Constant colour and texture overlay could blend in different modes [N S M D]. Specific texture channels [R G B] can be selected and inverted.

Audio channels [H M L] can be used to drive texture overlay.

FONT (do not confuse with Text)

A custom monospaced modular font is implemented as text data and parsed as arrays into the shader.

Lines of text are passed as strings from text.txt, selected using cmnd+[1–10], and updated with cmnd+f.

The size of instances where font exists can be increased, decreased and panned [L R] [T B]. The standard letter size is 10 instances high and 8 instances wide. Letters can be scaled vertically and horizontally to occupy more instances. Letter spacing can be adjusted and words repositioned [X Y].

Font instances can be repeated up to 10 times in 8 directions. The strength of each repetition is controlled using [X Y].

The font library is intended to expand to non-monospaced fonts and custom sizes. Audio input [H M L] can be applied to influence font instances.

TEXTURES

Four texture types are available: noise gradient video and text. Each texture type can generate up to three textures [1 2 3].

Each texture type includes controls to select the active texture [1 2 3] and activate one of the three outputs [1 2 3] so texture is passed to the bins. Texture controls display the parameters of the active texture and update via feedback from openFrameworks to TouchOSC when switching the active texture.

NOISE

Simplex noise texture includes controls for period, speed and blur/contrast. Speed could be constant or be influenced by an audio channel.

Colour is defined via channels [R G B].

Noise texture can loop vertically and horizontally [| –] and can be set to symmetrical mode [O].

GRADIENT

Gradient speed and period can be adjusted, with optional audio channel influence for speed. Default gradient colours are RGB. Each channel can be overridden using custom Red [R G B] Green [R G B] Blue [R G B].

VIDEO

Video textures support both video and image files. Files must be placed in bin/data/video. Arrow buttons cycle through available files. Speed controls playback rate.

Video contrast can be adjusted. Each colour channel [R G B] can be blurred with optional audio influence [using channel TBC]. Gradient [1 2 3] and noise [1 2 3] textures can be selected as blur masks.

Each colour channel can be overridden using custom [R G B].

Video position [X Y] and size [X Y] can be adjusted, with an option to preserve aspect ratio [=].

TEXT

Text texture reads from long_text.txt. Text is selected using buttons [1 2 3 4 5 6] and reloaded using cmnd+f.

Text is rendered using one of the fonts [1–10]. Font size, leading, and tracking can be adjusted. Alignment can be set to centre or left.

Font size can be overridden by auto fitting to the canvas. Colour is defined via channels [R G B].

Text can be blurred per channel [R G B] as a constant, via audio input, or using Gradient texture [G1 G2 G3] or Noise [N1 N2 N3] as a mask.

Text position [X Y] and text box width can be adjusted.

BIN MIXING

All active texture bins are sent to the mixing shader. Each bin can receive any amount of active textures and blend them using modes [N S M D].

An additional fracture effect can be applied to the texture in the Bin, splitting the output into a controlled number of strips in X and Y. The strength of the effect in X and Y can be constant, or driven by a gradient texture (g1, g2, g3) or a noise texture (n1, n2, n3).

T1&T2

Two layers can be sent as textures to layers and control the same layer paraemeters as bins do [0 T1 T2].

SOUND

Audio input is split into three channels: High, Medium and Low [H M L].

Each channel includes Gain, Smoothing, and Peak controls.

Audio input can come from a microphone or from an audio file defined in configVars. The audio device index, visible in the log, must be set in configVars.

RECORDING

Two recording modes are available.

Live recording start [cntr+r] stop [shift+r]. It records a live performance session. Frame rate may decrease and frames may be skipped.

Render every frame [cmnd+f]. This mode renders every frame using a keyframed preset to drive parameter changes. OSC controls and preview are disabled during rendering.

Full-resolution screengrab capture [cmnd+g].

PRESETS

Layer Preset [LP]: Save [cmnd+s] and open [cmnd+o] selected layer parameters by overriding active layer.

Project Preset [PP]: Save [cntr+s] and open [cntr+o] all layers and textures of the project. Loading overrides the existing project.

Layer & Bins Preset (LBP): Save [shift+s] stores active layer and linked textures. Open [shift+o] loads them into the next available layer or texture slots in the current project.

KEYFRAMES

Most layer parameters can be animated using JSON keyframe preset files.

Each keyframe defines time, parameter, value, and interpolation type.

Preset files are defined in configVars.h and reloaded using [cmnd+j].

HOT KEYS

Clear project [ cntr+backspace ] Clear layer [ cmnd+backspace ] Clear Noise texture [ n+backspace ] Clear Gradient texture [ g+backspace ] Clear Video texture [ v+backspace ] Clear Text texture [ t+backspace ] Copy Layer [ cmnd+'[' ] Paste Layer [ cmnd+']' ] Copy Noise texture [ n+[ ] Paste Noise texture [ n+] ] Copy Gradient Texture [ g+[ ] Paste Gradient Texture [ g+] ] Copy Video Texture [ v+[ ] Paste Video Texture [ v+] ] Copy Text Texture [ t+[ ] Paste Text Texture [ t+] ] Undo last operation [ cmnd+z ] Paste last-changed parameter [ cmnd+v ] Update text files [ cmnd + f ] Send Feedback to all parameters [ cmnd + u ] Text line select for Font [ cmnd + 1-10 ] Controls for Audio playback: Volume up [ cmnd + '+' ] Volume down [ cmnd + '-' ] Restart Audio Playback [cntr + d]

Keyframe presets: Load / restart keyframe animation track [ cmnd + j ] Change keyframe animation track [ cntr + j ] Stop keyframe animation track [ shift + J ]

CONTROL PANEL

The control panel is always available for controlling output.

Optional rendering of the performance window is defined in configVars.

The control panel displays active layers, textures, and bins, instance grid [X Y], last changed parameter and value, audio channels, frame rate, and elapsed time since start.

MIDI

Controls designed for Faderfox UC4

Encoders[1-8] can pick up [press] and control a parameter after it was changed via OSC. Adjustment step is set by fader [9]. Faders [1-8] control the main fade for each layer.

DEPENDENCIES:

build with Open Frameworks

Open Frameworks Addons: ofxOsc.h, ofxVideoRecorder, ofxFft, ofxMidi

C++ libraries: glm/glm, unordered_map, string, vector, algorithm, json

LICENCE:

DDI © 2025 by Dina Silanteva is licensed under CC BY-NC-SA 4.0

Share: copy and redistribute the material in any medium or forma

Adapt: remix, transform, and build upon the materia

The licensor cannot revoke these freedoms as long as you follow the license terms.

Under the following terms:

Attribution: You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.

NonCommercial: You may not use the material for commercial purposes.

ShareAlike: If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.

No additional restrictions: You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.