Introduction
Lucinate is a modular layer-based app for algorithmic art, generative visuals, video synthesis, and image processing.
It comes with a bunch of ready-made shader libraries to get you started right away, as well as built-in library functions to aid you in coding your own shaders.
Strips
The main view shows a number of columns, called Strips. Each strip contains an Output View, a Toolbar, and a Shader Stack.
Tap the plus button to add a new strip.
Output View
At the top of each Strip is the shader output view, which displays the currently generated video output from the shader stack of this strip.
Shader Stack
Below the output view and toolbar is the most important thing, the Shader Stack, which is a stack of Shader Layers, where each layer runs a Shader Function. The image travels bottom-up, from background to foreground.
The stack starts empty. Tap the big Background button to add a new Shader Layer.
The bottom of the stack also holds Modulators, that can modulate any parameters of Shader Layers or Modulator Layers. Tap the big Modulator button to add a new Modulator.
Toolbar
Between the output view and shader stack is a toolbar with various controls:
- Stack Menu
- Show a menu with actions and settings for this stack.
- Play
- Toggle play for this stack. When playing, the output view is rendered each frame and time is incremented.
- Rewind
- Restart all shaders in this stack from time 0. Long-press or Cmd-click to reset touch/move/cam uniforms.
- Preview Mode
- Change the Preview Mode.
- Expand
- Expand the output view, keeping the strip as a side-bar. (Not available on iPhone)
- Fullscreen
- Show output view in fullscreen. On iPhone, you can also rotate the phone to landscape orientation to automatically go fullscreen.
- Display
- Select this stack as Main Output to be sent to video recording and external display. Deselect it to black out the display window.
You can re-order strips by dragging the toolbar and dropping it before or after another strip.
Preview Modes
- Opaque
- Draw the output view opaque, ignoring the alpha channel.
- Alpha Blend
- Blends the output view against a background. The background color and pattern is set in the preview settings.
- Inspect RGBA
- Inspect the RGBA color components. Draws each component in its own quarter. Tap and drag the screen to zoom and show pixel value. Infinite values are shown in cyan, NaNs in magenta, negative values in orange, and values above 1.0 in yellow.
- Pixel Zoom
- Inspect pixels. Tap and drag the screen to move the zoom-window.
Stack Settings
- Trash
- Delete this strip.
- Export Snapshot
- Export the current frame as an image: PNG, HEIC, HEIC HDR, JPEG, or Copy to Pasteboard.
- More...
-
- Add Strip Before
- Add Strip After
- Copy
- Paste
- Duplicate
- Remove all Layers
- Remove disabled Layers
- Render Target
-
- Resolution: Tap to set custom fixed resolution.
- Scale factor: Follow project resolution by scale factor.
- Mipmapped: Enable mipmap generation.
- Framerate
-
- Divider: Divide the frame rate.
- Controls
-
touchvalue.movevalue.cam.orgvalue.cam.dirvalue.cam.orbitvalue.- Reset.
Shader Layer
The Shader Layer contains a Shader Function, which is the small GPU-program that generates or processes the actual image, all the controls and inputs of the shader function, and an optional blend operation.
Buttons
A layer consists of the following elements:
- Expand
- Expands or collapses the various controls and inputs for this layer. Long-press or Cmd-click to expand/collapse this and all layers below.
- Function
- Shows the Library Browser that allows you to select and load a Shader Function.
- Blend
- Shows the blending-options for this layer.
- Visible
- Toggles this layer on or off. Long-press or Cmd-click to solo this layer, temporarily disabling all layers above it.
Context menu
Long-press (iOS) or right-click (Mac) the Function button to show a menu of actions for this layer:
- Edit Code
- Open this function in the code editor.
- Insert Above
- Insert a new layer above this layer.
- Insert Below
- Insert a new layer below this layer.
- Reset Parameters
- Reset all parameters to default values.
- Copy
- Copy to clipboard.
- Paste
- Paste from clipboard.
- Duplicate
- Duplicate this layer.
- Remove
- Delete this layer.
You can re-order layers and move them between stacks by drag-and-drop.
Library Browser
A Library is a text file containing the code for one or more Shader Functions.
If the library browser was shown from a layers Function, tap a Shader Function to load it in this layer.
Tap the edit button to open this Library in the built-in code editor.
The bundled Libraries are read-only and can not be edited, but you can save an editable copy of the library from the editor. You can also tap the plus button inside "iCloud" or "Local" locations of the Library Browser to create a new Library.
Long-press or right-click a library to show its context menu:
- Trash
- Delete this library.
- Rename
- Rename this library.
- Share
- Share/export this library.
- Move to iCloud/Local
- Move this library between iCloud and Local storage.
- Edit Code
- Open this library in the editor.
Blending
The blending mode of the Shader Layer determines how it's combined with the layer below it in the stack (or for the bottom layer, transparent black).
Layers go from bottom (background) to top (foreground), as in most other layer-based graphics software. The image flows from bottom and up through the layers before reaching the final stack output.
Note
In addition to this built-in blending, a Shader Function can also take direct color input and do its own blending or processing inside the shader code.
Blend Menu
Tap the blend button to show the available blending presets.
Preset names with arrows indicate that Source and Destination layers are swapped.
Most presets assume pre-multiplied alpha.
Blend Bypass
Tap the toggle in the top-left of the blend menu to disable/enable blending. This is useful to temporarily disable blending.
Channel Mask
At the top of the blend menu is the channel mask, consisting of four toggle buttons for each color component: R, G, B and A. When any channel is toggled off, its value will not be changed or written to by this layer, but will keep its current value.
For example, use this to let Alpha or RGB be passed through from the layer below, or apply a color adjustment or effect on selected channels only.
Alpha = 1
Next to the mask buttons you will find a button named "A=1". When enabled, this will force the alpha output to 1.0, which is the maximum value.
For example, this can be useful on the top layer if you want to make sure the image is fully opaque before exporting it.
Note
The A=1 toggle has no effect if A is off in the Channel Mask.
Custom blending
For full control, tap the edit button in the top-right of the blend menu. This will display the blending matrix that allows you to specify a custom blend operation:
| Src x | Dest x | ||
|---|---|---|---|
| RGB | [ Fs ] | [ OP ] | [ Fd ] |
| Alpha | [ Fs ] | [ OP ] | [ Fd ] |
Blending is done through the formula Out = Src * Fs OP Dest * Fd,
where Src is this layer and Dest is the layer below it.
Tap the F or OP buttons to select the factors and operators.
Factors
Fs and Ds determines the factors multiplied with Src and Dest:
| Factor | |
|---|---|
| 0 | Zero |
| 1 | One |
| Srgb | Source Color |
| 1-Srgb | 1 - Source Color |
| Sα | Source Alpha |
| 1-Sα | 1 - Source Alpha |
| Drgb | Destination Color |
| 1-Drgb | 1 - Destination Color |
| Dα | Destination Alpha |
| 1-Dα | 1 - Destination Alpha |
| Sα⋀1-Dα | Source Alpha Saturated |
| Crgb | Blend Color |
| 1-Crgb | 1 - Blend Color |
| Cα | Blend Alpha |
| 1-Cα | 1 - Blend Alpha |
The last four uses a separate Blend Color/Alpha, which is shown as a color slider widget, and allows user control of the blend factor value.
Operators
The operator OP is one of:
| Operator | |
|---|---|
| + | Src + Dest |
| - | Src - Dest |
| -- | Dest - Src |
| ⋀ | MIN( Src, Dest ) |
| ⋁ | MAX( Src, Dest ) |
Note
The Factors are ignored by the MIN and MAX operators.
Blend Groups
Sometimes you may wish to treat a chain of layers as a group, and blend their output as a whole.
In Lucinate, this is achieved by using an off-screen group buffer that exists in parallell to the normal display buffer. Shaders work on this group buffer, and when the group is finished you blend it into the display buffer using the Commit Group function. Conversely, the Display to Group function copies the current display buffer back into the group buffer.
In the example diagram above, two layers are first rendered as a group into the display, then two other layers are blended as a group into the display on top of the first group. Finally, a last layer is applied on the results.
To add a Commit Group, add a new layer and select the "Commit Group" function from the "Group" library.
Typically, the layer immediately above a Commit Group starts a new group by not reading from or blending with the current image (as indicated by the dotted lines in the diagram). However, it's also possible to start the new group by continuing from the previously committed image — blending with or processing it further.
If there is no Commit Group layer further up, the top-most ungrouped layers are applied directly to the display buffer after all groups are blended. This allows you to apply final processing layers to the result before it reaches the display.
Shader Inputs & Parameters
If the Shader Function declares any texture inputs, sampler states, or user parameters, they will show up in the layer user interface.
Long-press or right-click the parameter title for a context menu where you can reset it to default values.
Shader Parameters
Parameters allows user control of variables in the Shader Function, via sliders and toggles etc. They are declared in the Shader Function.
You can double-tap number boxes and slider value labels for a numeric entry popup.
If the parameter supports modulation, a triangle indicator will be shown to the left of the parameter title.
Texture Inputs
Texture input buttons shows the currently selected texture source for that input. If the selected texture is mipmapped, the button text has a small triangle prepended.
Tap a texture input to show the texture grid view, which allows you to select a texture source to use for this input.
The texture grid view has the following tab sections:
-
Stacks: Use the final output of a stack as a texture. This also includes Previous Pass, which will use the output of the previous pass in this stack as a texture.
-
Camera: Use the live video from a connected or built-in camera as a texture.
-
User Media: Use a video or image file as a texture. Right-click or long-press and select Replace to replace this texture.
Tap the plus-button to add a new user texture from imported or bundled files.
Tap outside of any texture grid cell to select None, which is a transparent black 1x1 texture.
Most texture sources have settings. Right-click or long-press and select Settings to access them.
Note
The Previous Pass is typically the previous output frame, useful for feedback-effects. If the stack contains an End Pass or Commit Pass layer, this texture will contain the result of that pass.
Sampler State
When using a texture, a sampler state object is used to configure how the texture is sampled. These can be defined programatically in the shader function, or exposed as a user parameter with the following options:
Filter
Decides the behaviour when scaling a texture.
- Filter Nearest: Nearest pixel is used.
- Filter Linear: Linear filtering is used.
Address mode
Decides the behaviour when sampling coordinates outside the (0,0) to (1,1) bounds.
- Clamp to Edge: Clamps to the color at the edge of the texture.
- Repeat: Repeats the texture.
- Mirror Repeat: Repeat with mirroring.
- Clamp to Zero: Clamps to transparent black.
Audio Inputs
When the shader uses audio input arguments such as audio::env or audio::fft, they will expose an Audio Analyzer button that allows you to select which analyzer instance this shader input should connect to.
All but audio::wave will also show a dB gain setting that can be used to adjust the gain of this input.
Project Menu
Tap the Project button in the main toolbar to open the Project Menu.
Project
- Title
- Project title. Tap the button for rename, trash, and further options.
- New
- Create new project.
- Open
- Open existing project.
- Close
- Close this project and show the Launch screen.
Help
- Users Guide
- Show the bundled Users Guide.
Resources
- Textures Sources
- This opens a list of all texture sources, where you can add, replace or delete user textures or change settings for textures.
Info
Displays various info about the GPU and app.
Settings Menu
Tap the menu button in the main toolbar to open the Settings Menu.
Main Output
- External Display / Display Window
- On iPad and iPhone, toggles between external display (enabled) and standard screen mirroring (disabled). On Mac, toggles a separate display window that can be moved to an external screen.
- Black on Pause
- When enabled, the external display is black while main timeline is paused.
- Ext Screen Mode
- If an external display is in use, this shows the available screen modes and allows you to change it.
Render Target
- Resolution
- Render resolution. Tap to change resolution.
- Orientation
- The orientation and aspect ratio of the current resolution. Tap to flip orientation.
- Framerate
- The preferred framerate, synchronized to the current display. The available options are integer divisions of the maximum rate of the display.
- Colorspace
- Set colorspace. DisplayP3 is a wide-gamut colorspace that allows deeper colors if your display supports it. Any Image or Camera texture sources will automatically adapt or convert as needed.
Audio & MIDI
- Audio Input
- Configure audio settings and Audio Analyzers.
- MIDI Input
- Select CoreMIDI source for MIDI inputs.
Previews
- Dynamic Range
- Enable extended dynamic range (HDR), showing color values above 1.0 for displays that supports it.
- Background Style
- Set the background style of stack output views when they are not in Opaque mode.
- Background Gray
- Background grayscale level of stack output views.
- Min Filter
- Set filter used when content is scaled down.
- Mag Filter
- Set filter used when content is scaled up.
Code Editor
Tap the Edit button in the main toolbar to show the code editor, where you can edit libraries of shader code on-the-fly.
- Library Title
- Tap the current library title at the top of the editor to show the library browser.
- Build
- Save and re-compile the code. Any Layers using this library will reload their Shader Functions automatically.
- Menu
-
Show editor menu:
- Open...
- Show the shader library browser to load a shader library or include file into the editor.
- Save Copy
- Save an editable copy of this library.
- Revert to saved
- Discard any edits and reload from saved.
- Settings
- Change editor settings such as text font and color scheme.
- Find
- Find (and replace) text.
- Search Help
- Open the Function Reference help page. If any text is selected, it will be entered in the help search field.
Syntax Coloring
You can add custom syntax color schemes by adding .json files in a "ColorSchemes" subfolder of the apps documents folder.
Example:
"background": "#131313",
"nonwords": "#ffffff",
"comments": "#7c7367",
"default": "#bfbfbf",
"functions": "#47b0b7",
"keywords": "#3d8fd1",
"types": "#3dd17f",
"brackets": "#ccaa70",
"preproc": "#b76040",
"selection": "#777777"
Grid View
Tap the Grid button to show the grid view.
Tap a grid cell to quickly scroll to that strip. Long-press a cell to select it as Main Output.
Modulation
Parameters can be affected by Modulators.
Modulators
Modulators such as LFOs and Audio Envelope followers can be created by tapping the Modulator button at the bottom of the Stack.
There are fixed global Modulators for MIDI. Make sure you have a MIDI source connected to the global MIDI Input in the Settings Menu.
Each Modulator can have multiple outputs. For example, the MIDI CC modulators have one output per CC (0-127), and LFOs have one Unipolar and one Bipolar output.
Parameter Modulation
If the parameter supports modulation, a triangle indicator () will be shown to the left of the parameter title.
Tap a parameter title to show the modulation view for the parameter.
Vector parameters will have one modulation input per component. For example, an RGBA Color will have four inputs: R, G, B and A.
The modulation view will show one section for each modulation input of the parameter, each section consisting of the following elements:
- Main Modulator
- Tap the modulator button to select a main Modulator. Tap the output button to select which output of the modulator to use.
- Via Modulator
- Tap the modulator button to select a Via Modulator. For numeric parameters, the Main Modulator value will be multiplied with the value of the Via Modulator. For boolean parameters, the Threshold will be multiplied with the value of the Via Modulator.
- Amount (For numeric parameters)
- Set the modulation amount, in the parameter's own units. The modulation value will be multiplied by this and then added to the initial parameter value.
- Threshold (For boolean and trigger parameters)
- Set the threshold for when the modulation value will flip the boolean parameter state.
- Boolean Op (For boolean parameters)
- Decides if the modulation should AND, OR or XOR (invert) with the initial parameter state.
- Meter
- A horizontal bar showing the current modulation value resulting from the selected Main and Via Modulator.
External Display
External display is supported on both iPad, iPhone and Mac.
If External Display / Display Window is enabled in settings, the strip with selected Main Output button will be shown on the external display (iPad and iPhone) or in the separate display window (Mac).
On iPad and iPhone, connect a display via a suitable adapter (HDMI), or use AirPlay screen mirroring to an Apple TV or similar.
On Mac, drag the display window into your external display and fullscreen it.
When an external display is used, the rendering is synchronized to that display.
Video Recording
Tap the Record button in the main toolbar to show the video recording settings.
The Status section will indicate if there is a recording in progress or if it's ready to start recording. If ready, tap Start to start recording. If already recording, tap Stop to stop recording.
The current stack selected as Main Output will be recorded. This can be switched on-the-fly while recording. If no stack is selected, the video will record black frames.
Input
- Video Source
- Select which stack to record. This also changes Main Output stack.
- Audio Source
- Select the Audio Source to record.
Video Format
- File Type
- Choose video container file type.
- Codec
- Choose video codec. Not all codecs are available on all device models.
- Resolution
- Choose custom resolution or use the project render target resolution.
- Dynamic Range
- Enable High Dynamic Range, encoding color values above 1.0. Uses HLG transfer curve. HEVC 10 Codec highly recommended to avoid banding.
Audio Format
- Sample Rate
- Set target audio sample rate. If the Audio Source provides a different sample rate, it will be converted. The sample rate matching the current Audio Source is marked with an asterix.
- Codec
- Set audio codec. AAC, ALAC or Linear PCM.
Video Compression
- Bitrate
- Choose between Automatic and Manual bitrate mode.
- Quality
- Shown when Bitrate mode is Automatic. The bitrate varies to keep a constant quality. Complex frames will take more space than simple ones. Only available for HEVC codecs.
- Mbit/s
- Shown when Bitrate mode is Manual. Enter the target average bitrate in Mbit/s.
- B-Frames
- Allow bi-directional frames. When enabled, frames can be reordered for better compression.
Beat Sync
Tap the Tempo button in the main toolbar to configure the Beat Clock, where you can set tempo and sync options.
There are two time sources available in the app:
- Main timeline (seconds)
- Beat Clock (beats)
Shader time parameters can be set to follow Beats instead of Seconds. Tap a time parameters / Clock button to configure its clock source and other settings.
The Beat Clock can be externally synchronized with Ableton Link or MIDI Clock.
Audio Analyzers
Shaders with audio inputs (such as audio::fft) connect to Audio Analyzers, which provide waveform, FFT and envelope follower data to the shader input.
Tap Audio Inputs in the Audio & MIDI settings page to view and configure Audio Analyzers.
By default there is a single analyzer, but you can tap the plus button to create additional ones.
Each Analyzer in turn connects to an Audio Source, such as hardware audio interface inputs or Ableton Link Audio channels. Tap the source button to show a menu of available audio sources.
Right-click or long-press an Analyzer to change its settings (such as FFT size) or remove it. An analyzer can't be removed while assigned to any existing shader audio input in the project.
The full signal flow looks like this:
Note
For Ableton Link Audio, you must enable both Link and Link Audio in the Ableton Link settings, reached via the Tempo button in the main toolbar.
Colorspaces
Internally, the shader stack uses a linear 16-bit floating point format. It's automatically converted to the appropriate colorspace for display and export, typically with an sRGB gamma curve. Thus, outputting a 0.5 grayscale value will be displayed as perceived middle gray.
Due to the floating point format, the image values in the stack are not bound to 0.0-1.0. This allows extended dynamic range (HDR) by generating values above 1.0 if your display supports it.
Contact
- Chat & support: Lucinate Discord server
- Website: kymatica.com
- E-mail: info@kymatica.com