Always animates to the current value
trigger a simple bang animation going from 1 to 0
Animate between two numbers based on a boolean value
parses string containing ranges of frames and play as coherent animation
switch between multiple anim ranges of a keyframed 3d scene
animates after a trigger from 1 to 0 to 1
Low-frequency oscillation for animations
Animates between random values defined by a min and max value
simple animation between two values
animation in the form of a sine/cosine curve (sinus/cos)
Smooths out jumps in values (AverageInterpolation)
snap at certain points (e.g. while scrolling)
Spring simulation based on input target value.
Animates a text/string, like it is being typed out by a person
measure the time difference between two triggers
A timer that can be started, paused and reset by triggering
process and manipulate collections (arrays) of data Outputs the angle between points in 3D space (degree)
animate values in an array to another array
Can generate 3 kinds of arrays. Number - 1,2,3,4 - Normalized - (ContinuousNumberArray)
convert an array1 to array2,3,4 by choosing content for new axis
inserts zeroes every third item
create an array of num triplets set to default values xyz
average x,y,z values of an array3x
get 3 values XYZ from an array
interpolate between two arrays
Iterates over an array in steps of three and outputs three values
multiply every XYZ member of array3x
Push three numbers to the end of an array (was ArrayPushValue3x)
extract definable amount of random xyz points from an array
Set three numbers at index in an array
add number to every XYZ member of array3x
remove every 3rd item of an array - changes array length
Converts an array3 to an array4 by filling it up with 1
Returns the length of a vector from an array 3
create an array of num quadruples set to default values xyz
get 4 values from an array
set four numbers at index in an array
convert an array4 to array3 by dropping every 4th number
Converts array contents to absolute values - converts all negative numbers to positive numbers
Append an array to an existing array
stores values in an array / fifo array buffer
circular buffer for xyz values
Extracts x elements from an array
repeat chunks of an array multiple times
Clamp the values of an array to a min and max value
check if array contains a number (find,search,indexOf)
Divides all values in an array by one number
Returns the fractional remainder of all values in an array
simple way to create small arrays of numbers
get an array from an array of arrays
Returns a value from an array
get an object from an array
get a string from an array at [index]
get texture from array at index
Pick values from input array at given indices and stride
output index where value is greater than number and smaller then next number
find lowest/highest numbers in an array
iterate over an array of arrays
Loop over every element of an array
iterate over an array of objects
Loop over every element of an array
iterate over an array of objects
Number of items in an array
Performs logical comparison operations on a single array of numbers
Performs logical comparison operations on two arrays
If value of array is between min and max then the value is 1 else 0
Create an array that is filled with values looked up by index from another array
Pick from multiple mathematical modes which can all be applied to a single array
performs a math operations on two arrays
Calculates a user defined mathematical expression
Calculates a user defined mathematical expression
Applies a max operation to all values in an array
Merge multiple arrays - in consecutive order
merge /concatinate arrays by trigger
Applies a min operation to all values in an array
Applies a modulo operation to all values in an array
Multiply every number in an array
Create an array that contains X numbers between start and end values
Create an array filled with other arrays
filter key value pairs in objects in an array of objects
remove key-value pairs from objects in an array of objects
convert an array of objects into readable string format
Packs multiple arrays into a new array
Packs two individual arrays into a new array
Packs 2 individual arrays into an array2 - without needing a trigger
Packs 3 individual arrays into a xyz array
Packs 3 individual arrays into an array3 - without needing a trigger
Pack 4 arrays into one array
Packs 3 individual arrays into an array3 - without needing a trigger
Applies a Pow function to an array
Push/Append a string to the end of an array
quantize input to nearest number in array
Extract a definable amount of values from an array
set a number at index in an array
set a string at index in an array
Performs a sin or cos operation on the contents of an array
Applies a smoothstep function to the contents of an array
Returns the square root of all values in the array
Subtracts one number from all values in an array
Adds one number to all values in an array
Sum up every number in an array with the sum of the previous
sum of every number in an array
manage/re-order components of an array (stride)
splits an array up into an array of arrays
convert an array to a byte buffer (Uint8ClampedArray)
Join array values to a string (concat)
filters an array for duplicate items and returns all unique items in a new array
will give you information about the count of "duplicates" in an array, as an object
Unpacks an xy array into separate arrays
splits a xyz array into 3 individual arrays
Splits a xyzw array into 4 individual arrays
insert/add/unshift a string to the beginning of an array
smooth/average values in an array
Array filled with `0`, only one can be `1`
Copy an array with a trigger, reset to use a default array
create a copy of an array
Remove elements from an array from the beginning and/or the end
apply easing curve to numbers in an array
Fill an array with random duplicates
compare elements from an array and remove not matching ones
Creates a new array with all sub-array selements concatenated into it
capture the current input and copy it to the output, even after a reload
Only allows an array through if pass through is true
Get an array of values by key of objects in an array
generates RGBA array from up to 4 arrays (HSBA)
get the min, max and average value from an array
min,max and average values of an array2
min,max and average values of an array3
interpolate between two arrays (lerp) - linear interpolation
interpolate between two arrays, only a few numbers at the same time
interpolate between all values of an array
get interpolated values between the indices of an array3x
generate spline using lissajous formulas
makes the 1st and last point of an array the same, good for closing splines and shapes
Maps values in an Array from one range into another.
Create an array from multiple number inputs
Contains a collection of color palettes in groups of 5 in an array
Creates An array filled with Perlin noise values
coordinate generation like arrangement of leaves in some plants
create a random array of 1 to 4 dimensions
Generates an array filled with random english words
Remove Points from an array, e.g. xth points, random, duplicates
Reverses an array with value triplets [x, y, z, ...]
Array of fixed size, index is automatically incremented and restarts after reaching the end
Shift array contents based upon rotate amount
Route an array to an output port
Change the Number of an array at an index
set three values at position index in an array
Randomizes the order of elements inside an array
Shuffles/Randomizes the order of an array of triplets
Creates An array filled with Simplex noise values (Range: -1, 1)
Smooths out changes in values of an array
Sorts an array of numbers with one of two modes - ascending or descending
Sorts an array with the lowest values of the selected component.
Sorts an array of numbers and also get sorted indices
Returns a number with the total distance between the points/items in an array3
convert an array of splines to one "line stripped" array
Parse a string into an array (create, split string, stringToArray)
Turns a string into an array of single characters or ASCII numbers
outputs an array containing a line number for every character
For subdividing splines, smoothing lines using cubic bezier interpolation
switch between multiple arrays
Switch between multiple input arrays
switch between multiple arrays
Stores various textures in an array, starts at the beginning again when end reached
Weaves two arrays together (combine, join, merge)
process and manipulate collections (arrays) of data remove points from an array3 with different shapes
visually edit positions in an array of point coordinates
Repeat an array by transforming it x times
Returns the distance between 2 points from an array
Particle Spray simulation
create arrays for circular shapes, helix,circle etc
fill a XYZ array with existing duplicate points until it reaches the length
Generates a 3d point field with controllable amount of xyz points (was PointsField3d)
generate coordinates for a hexagon grid, outputs array3x
Generate coordinates for a rectangular field / grid of points
generate an array of XYZ coordinates of an rectangle
Generates a point field mapped to the surface of a sphere
recalculate a spline / change number of points of a spline
sort an array3, by the distance of each point to the previous point
get position in array3/spline at distance from start
For subdividing splines, smoothing lines using cubic bezier interpolation
transform (translate,rotate,scale) positions in an array3x
Let’s you tap in a beat, useful to synchronise visuals to music (VJ, sync, sound)
read MIDI information at time x
Filter MidiJson for notes
Outputs `true` if both input values are `true` (boolean)
trigger true or false values
Switches two number values using a boolean
convert boolean to string
Delay the input/output of a boolean by x seconds
Triggers if input value is `false`
Switch, trigger one or the other trigger port based on the input value
Returns `true` if input value is `1`
Returns `true` if input value is `0`
Sets output to `1` when triggered, turns back to `0` automatically after x seconds
result is false if input is true and vice versa (negate/toggle/switch/!=)
Returns `true` if one or more of the input booleans are `true`
Output another number if input number is zero
parse boolean from string/number
Route a boolean to an output port
Toggle a boolean value by triggering
Triggers next only after value has changed to `false`
Triggers next only after value has changed to `true`
Triggers when boolean value has changed
outputs the path to the assets
Executes an external function (external javascript)
output current frames per second
trigger from external function when embedded into a website
Outputs the current subpatch op name
trigger events / get information about asset-loading status
read patch config when embedding on another page
Outputs `true` if patch is executed in the cables editor (UI)
Upload a file into the cables patch assets using a base64 string
Sort an array of colors by saturation/lightness etc.
Contains a collection of nice color palettes output to texture or array via index
Use a color value on multiple places
texture containing a colour gradient that can be altered with an editor
Converts a hex color like `#ff0000` to number values
Calculate the luminance contrast between two colors
Calculate the luminance of a RGB color
Output the CMYK value of a RGB color
convert RGB float values to HEX color String
convert RGB color to HSB Hue, Saturation, Brightness
Convert RGB color to HSL values
pop/remove the last number from an array
push/append an array to an array
push/append an array to an array
push/append a number to an array
push/append multiple numbers to an array
push/append an object to an array
push/append a string to an array
shift/remove the first number from an array
get a copy of the current state of an array
Set key/values to the current ObjectCompose from an existing object
set array as object property
set a boolean as object property
set number as object property
set object as object property
set string as object property
Append a string to a string
Remove characters from the beginning or end of a string
returns the array at the position defined by a path
Outputs all the values of the properties of an array of objects given a path
finds a number at a position in an array defined by path
Returns the object at the position defined by a path
Finds a string at a position in an array defined by path
returns the array at the position defined by a path
Outputs all the values of the properties of an array of objects given a path
finds a number at a position in an object defined by path
Returns the object at the position defined by a path
Finds a string at a position in an object defined by path
read a value from the stack to use it later in the trigger branch
read a value from the stack to use it later in the trigger branch
read a value from the stack to use it later in the trigger branch
push a value on to the stack to use it later in the trigger branch
push a value on to the stack to use it later in the trigger branch
push a value on to the stack to use it later in the trigger branch
Returns current date and time and timestamp
Perform date calculations
Calculates the difference between two timestamps
String representation of a date
parses a date and time in iso format and outputs a millisecond timestamp
Calculates the timestamp of a date by year / month / day / hour / minute
Value since the time origin in milliseconds (performance.now())
convert a timestamp to an ISO date string
Shows console log output on the screen
Log incoming values to the console/dev tools
Crash the editor in many ways
execute glGetError after every gl command and log to browser console
see current gl states and error message
dump all gl commands of one frame to console
Measure the time used to render all child nodes in milliseconds
Reports the browser being used
Get light/dark color scheme preference of the browser
evaluate a javascript expression
browser js memory consumption
detect if the user interacted with or activated the page
Opens a sharing dialog to share text and images
Outputs the button states of a gamepad
get axis and angle of a joystick/thumbstick
list connected gamepads - press a button to connect
get the state of your keyboards arrow keys
Triggers when a key is pressed
Triggers when certain key is pressed or released
simple controller example op for game characters
Emulates a MIDI keyboard using your regular keyboard
read CC value from Midi controller
send MIDI CC data to a midi output
Map 3 midi notes to values
sends out midi clock signals as triggers
connect to MIDI device output port
detailed information about Midi events being sent
Only read a range of notes (e.g. C1 to C2)
send midi note data to a midi output
read NRPN value from controller
send midi NRPN data to a midi output
Connect to MIDI device input port
transpose incoming midi notes
Converts a MIDI value to a note string
vibrating a mobile device
tries to get the geo coordinates from the mobile device/browser
locks orientation to landscape or portrait mode
get values from the device motion sensor mobile
detect two finger pinch gestures on touchscreens
get orientation of the physical screen
Reads the accelerometer data from a mobile device
Get mouse coordinates and events
Get the state of mouse buttons
get delta of mouse position while dragging
outputs delta values controlled by the mousewheel (scroll, zoom)
locks the pointer to the canvas and hides the cursor
detect touch gestures like swipe and pan
touch screen input: e.g. position of fingers
rendering on webxr virtual reality immersive devices
tracking of vr hand controller
Create a physics body/collision shape using a any geometry or select a shape
Check if physics bodies are colliding
Control and move a character in a physics environment
First person camera to use with AmmoCharacter
Visualize the physical bodies as lines and points
Emit Ammo physics bodies by triggering
Cast a ray and detect colliding bodies
Create physics bodies from a GLTF File
Use the detect-gpu library to assess performance of the client running the patch
wrapper for echarts-library
capture echart-library-events
FxHash simulator / generator of seeded random numbers
create an array of div elements
Set css style properties of a html element
Play Bodymovin/Lottie animations as SVG in a HTML element
Play a Lottie animation in a texture
Generate an animated geometry from MpFaceTracking Point Coordinates
Get face mesh from webcam/video using mediapipe library
Get points and lines for left/right hand from mediapipe
Get individual coordinates of fingers or wrist from an array of mediapipe data
Get hand data from mediapipe library, use with MpHand
Get coordinates of specific body parts from mediapipe data
Get pose-data (points/landmarks/lines) from webcam using mediapipe library
Load OTF & TTF fonts via OpenType library
get svg path from (OTF) OpentypeFont using the opentype library
Outputs an array of data from a user defined OSC address
Shows the current active address of an incoming OSC message
Outputs a single number from a user defined OSC address
Outputs up to 4 numbers from a user defined OSC address
Cellular automata system as feedback loop texture.
connect to a socketcluster server and manage the connection
Receives object from the socketcluster socket/topic
Receives trigger from the socketcluster socket/topic
sends an object via socketcluster/websocket
sends a trigger via socketcluster/websocket
get info for clients listening on a socketcluster topic
FFmpeg video converter toolbox op
Create a new empty file on your local harddrive
Check if a file exists on the local file system
Create a directory on the local file system
Open the native file manager application using that path
convert local path to file-url
Read all entries in a directory
Resolves a paths into an absolute path
Choose a directory on your hard drive
Choose a file on your hard drive
Get statistics about a file on the local file system
Get Default System Directories Paths
Watch a directory, get a trigger when a file changes
Create a binary file on the local file system from a base64 string
Write a string to a text file on the local file system
Create a Web/Http server locally
Answer http requests by sending string to the browser/client
Outputs your local IP Adress
send data to a OSC device
Read a text file as string from the local file system
start a socketcluster server
Use the Teachable Machines audio classifier for your microphone. Insert the uploaded model URL.
Use the Teachable Machines image classifier. Insert the uploaded model URL.
Use the Teachable Machines pose detection with your webcam. Insert the uploaded model URL.
Track a position of a specific color in the current webcam stream
Text-to-Speech, speaks different languages (speech synthesis)
speech to text recognition
create a texture from an array of number values
change how colors are mixed (blending/mixing modes)
check if webgl canvas element is in the current browser viewport
the size of the canvas in pixels, aspect ratio and pixel density
convert a canvas to texture
sets all cleared pixels to one colour. Use to change the background colour.
Clears the depth buffer (zbuffer, z buffer)
enable/disable RGBA color channels of your entire scene
pick a color at x,y coordinates of canvas
translate away from a point in space
Download a texture as an image file
draw texture mapping coordinates
Open a new window that shows a copy of the patch canvas
Load MSDF Font data and texture to use
Resize canvas element to a specific pixel size or aspect ratio
Will only allow an Object to to be output if the the pass through parameter evaluates to true
set gl blendmodes directly
information about the webgl context
force rendering of meshes using points,lines or triangles
texture containing a colour gradient that can be altered with an editor
transform and arrange elements into a grid
reset all transforms (modelmatrix)
reset the view matrix (cameras etc.)
play a image sprite animation
An area which is interactive
Render Multiple Layers in a specific order
A Simple way to write text on the screen.
Trigger other ops once every frame to create smooth animations
Record the renderer-output to video
Draw the same mesh multiple times on the GPU
morph from one geometry to another
convert screen pixel coordinates to range 0-1
outputs the first valid texture of the input ports
Orthogonal projection / objects in distance don't appear smaller (isometric)
Force a manually set viewport size for connected ops
Show WebGl Performance Statistics
Measure the time used to execute all child ops
Adjust FOV, field of view, and frustum clipping
Remaps world co-ordinates to a pixel co-ordinate system
save points/coordinates in an array
collect world space coordinates into an array
collect screen pixel coordinates into an array
Transforms objects randomly in space
record, render an animation and save as webm video file or png image sequence
Render a geometry as mesh
render to multiple textures at the same time
reset current transforms to initial value (identity)
Download the current screen content as png file
visualize normals, tangents or bitangents
Scatter an object on the surface of a mesh with different distribution methods
draw text using the FontMSDF operator
Load an image as a texture
create an array of textures
load multiple images into an array
load multiple texture from filenames given as an array
get the color of a pixel in a texture
extract colors from a texture
generate an array3 of grid positions from a texture
Create points by sampling texture
will trigger when canvas was resized
output current input texture or a default texture
Outputs current viewport size
generate a cubemap from 6 textures
use a cubemap or equirectangular texture as a material
visualize cubemap as folded texture or equirectangular texture
convert an equirectangular map to a cubemap
render a scene into a cubemap
render an equirectangular map or a cubemap as scene background
Test if a boundingbox could be visible in the current viewport
Calculate a bounding box from a geometry
Convert an animation into an array of coordinates
get view matrix from a gltf camera
gltf draco compression library
expose geometry from gltf meshes, also possible to expose submaterial geometries
export array of positions from a hierarchy of a branch structure in a gltf, e.g. a skeleton bones
output some infos about the current parent GLTF scene
switch between meshes e.g. like a stop motion animation
render weighted morph targets/shape keys from a gltf file
Control a single node from the GLTFscene op
sine animate gltf nodes by a filter
Get the transform from the GLTFscene op
output all transformations of nodes starting with [search]
Assigns a material to a node inside of the gltfScene op
render a skinned mesh (bone/rigging/rigged animation)
Load textures from inside a .glb file
set transformation of a gltf node
play gltf vertex anim directly with its own timing
Modify current alpha/opacity
Set alphachannel of current imagecompose via a texture mask
Blur the pixels of an image
Draws a Border (rectangular frame) around the current ImageCompose
adjust image brightness and contrast
bulge and pinch an image (deform,stretch,distort)
Draw a checkerboard pattern
simulating lens effect by shifting rgb channels
Draw 2d circle into texture
Clamps a texture to min and max values - Also has remap modes
Increase contrast in midtones
fill image using a color (overlay)
change intensity of r,g,b channels
enable disable RGB color channels
colorize a black and white image using a gradient texture
Denoise texture effect - used to smooth out noisy images
draw the content of a depth texture
draws a gradient from white to black back to white over distance of the scene
Remove colors from image / greyscale
convert color to black and white patterns
Draws an image into a composition
Draw only the edges of an image
Blurs a texture - simple and fast
flip the image on x or y axis
Convert a Float32 bit/HDR texture to RGBE format (only positive numbers)
add post processing fog (nebula) to a scene
post processing antialiasing
Allows for Gamma correction of a texture
Draws a simple gradient between three colors
Make one pixel lines thicker via postprocessing
Adjust Hue of current ImageCompose
Compose Images and effects as layers to generate new Images
Adjust aspect ratio of an image compose branch
capture the current state of an imageCompose branch by copying the texture
Creates a lens dirt like texture
Creates a procedural texture simulating scratches on a lens
adjust levels to correct the tonal range of an image
Remove darkest or brightest parts of the image
apply color filter/effects by using a lookup texture
simple mix/fade of two input images
draw multiple images at once
map a pattern to value levels of your texture
fill image with one color picked at a position
visualize the difference of neighbouring pixels (slope)
Changes color lookup for every pixel using a displacement map
display texture using polar/radial coordinate system
simulate lens flare effect
Set random numbers into an imagecompose
draws a 2d rectangle into a texture.
Remove alpha information from image
multiply image colors by color channel
Offsets the xy components of an RGB texture
Convert a RGB Texture to Hue/Saturation/Lightness values as RGB colors
Draw round corners around image (border)
Generates different 2d shapes to use as a texture
skew / stretch an image by rendering scaled sides
Create a texture of stripes /lines
modulo pixel color values
render the difference of two textures
Convert a black and white map to a normal map
Creates a twirl/swirl/spiral effect in a texture
adjust vibrance/saturation
Simulating an old camera effect of fading away the edges of the image
Generates 4 different waveform textures. Sine, sawtooth,Triangle, Square.
Generate different texture waveforms. Sine, sawtooth and triangle.
waving wobble motion effect
Map the range of color number values to another
normalize texture rgb values
Convert a RGBE texture to HDR/floating point texture
apply simple mathematical functions on pixels color values
Execute a glsl code math expression in a image compose
transform RGB values interpreted as XYZ coordinates
Round number values of texture color channels
compare and pass through of color channel values
fractional brownian motion noise
Render "gabor noise" into a texture
Creates a black and white glitched texture to use for displacement
Creates a hexagonal noise
Multilayer perlin noise variation
Draw perlin noise into an image
Render "shard noise" into a texture
noise made from triangles
animate values in a matrix to a new matrix
interpolate position on a spline/array3x
render lots of particles following a path/spline/array3x
rotate an object to always face the camera
Transforms and projects the scene from the point of view of the camera.
get camera attributes from current camera/orbit controls
get the current position of viewmatrix/camera eye
current xyz coordinates (modelmatrix)
gyroscope motionsensor camera
Get the scalar scaling of a matrix
get current projectionmatrix
interpolate between two matrices
outputs an inverted matrix
transforms view to look from eye to center
get translation of a matrix
rotate your object by clicking and dragging the mouse
multiplies current modelmatrix with a quaternion
Set up a camera, rotated by a quaternion
place random objects on a grid
Place random objects on a grid
Scale all child objects (scaleXYZ)
screen/pixel coordinates of the current transform
convert screen coordinates to a 3d position
displaces each point of a mesh in fixed direction
Transform objects in 3d space (rotate, translate, scale)
transform a matrix (mat4)
multiply current modelmatrix
Translate objects (move / position in 3D space)
translate the view/camera matrix
Translate any geometry underneath it using vectors and speed.
simple camera you control with W,A,S,D keys like in a FPS game
cables logo mesh/geometry
Rule of thirds image composition helper
render a rectangular corner
Draws a cross with controllable thickness and length.
draw parameterizable cylinder (aka tube,pipe,round,circle)
A freely deformable plane, rectangle, polygon
Draws a rectangle using the full WebGL canvas size
Convert vertices of a geometry to a data texture
Draw a simple grid of lines
generate a rectangular mesh where the height is defined by the luminance of an image
generates a helix, spiral spline
Renders a icosahedron (polyhedron with 20 faces)
Draw a line between two points
Draw the same mesh multiple times on the GPU
Creates a 3d mesh from a 2d area expressions
visualize an array of coordinates as points
Visualize a RGB texture as XYZ coordinates as points
Generate polyhedron meshes
Warp a texture mapped quad (projection mapping)
draw a rectangle (plane, square)
nine slice image format texture mapped rectangle
Draws a rectangle with rounded corners
Draws a simple spline only one pixel wide
Simple Wireframe Line Renderer
Draw parameterizable sphere
draw a star mesh (saw,gear)
Draws text in 3d space using one of the font ops
Draw a torus (doughnut, donut, ring mesh)
A sphere mesh with uniform distributed vertices
PBR image based lighting setup
PBR/Physical Based Rendering Material for realistic materials
ambient light for phong material shading
Directional light for phong shading
A shaded material for lighting objects
Point light for phong shading
reset lights for everything triggered after
spot light that emits a cone of light
render mesh normals as colors
A material without shading
display texture and replace a color with transparency
Write your own custom shader
draw meshes using the cables error material shader
visualize which faces are facing the camera
Easy to use image based lighting Material
Minify GLSL shader source code
Draw all vertices as points / circles
draw meshes using XYZ position coordinates as RGB color
set a uniform value of the current shader
set a uniform value of the current shader
view current shader source code
read back all uniforms values of the current bound shader
render a shader into a texture
Switch between two shaders
Draw a mesh, showing only its vertex colors
visually debug vertices of your 3D geometry
Renders following meshes as wireframes
do not draw pixels inside a defined 3d area
rotate vertices in an area around a center point
Scales the size of meshes within the area of influence
Translate object positions with a noise function
Change the position of all meshes inside of the area of influence
bend objects along an axis
clamp/restrict the vertex position to min/max values per axis
Colorize all meshes around current position
deform a spherical area of a mesh
discard transparent pixels in material textures
explode a (divided) mesh in the direction of faces normals
Fog as a shadereffect applied to a material
add fresnel glow to any material
displace positions of instanced meshes using a texture
displace position of instanced object by perlin noise value
colorize instanced meshes using a texture
discard pixel if texture coordinate is below threshold
3d space noise for mesh materials
vertex shader modulo operation on vertex position
Displace vertices using perlin noise animation
Scale vertices of an object in the direction of face normals
add shadow capabilities to any material
Deform a mesh along a spline
texture projection on meshes
Transform and repeat texture coordinates of a mesh via vertex shader
transform vertices of a mesh via vertex shader
twist a mesh around an axis
Use vertex color as basecolor/diffuse color
Use mesh vertexcolor as Alpha/Opacity
Displace the vertices of a mesh with the pixels brightness values from a texture
only draw the first X vertices of a mesh
set vertex positions of a mesh from a texture
sine wave vertex displacement
Converts a base-64 image string into a texture
Simple texture filled with one color
combine multiple textures into one by copying colorchannels
copy a texture and optionally resize it
A very simple empty transparent texture with an opacity of 0
load .exr floating point texture files
draw a graph of a value into a texture
graphical representation of distribution of color in a texture
combine multiple textures into one by copying colorchannels
Create a RGB color palette using an array
screen space ambient occlusion from depth texture
Switch between multiple textures
Switch between different textures
Generates a texture of Text using one of the font ops
Information about Textures in an array
Outputs information about the connected texture
Load a SVG image and convert to a texture of pixels
Converts a texture into a base-64 image string
convert a texture to a 3d coordinate grid storing coordinates in texture RGB channels
Play a video file and use it as a texture
Use your webcam camera as a texture
change depth testing method (depthMask,depthWrite,depthFunc)
Disable the rendering of front or back facing triangles with culling
merge two geometries into one
get the id/index of the current set material
get the id/index of the current object/mesh
align a geometry / change its pivot / center / origin point
create a simple bounding box from width,height,depth
calculate normals of a geometry
disconnect faces/polygons of a mesh
flip all normals of a geometry
capture all following meshes into one geometry
Get vertices of a geometry as array3x (vertex vertices)
basic extrusion of flat geometry
Create a geometry from array data
information about a geometry
merge two geometries to one
Generate an .obj file as string from a geometry
generate an array of lines from a mesh to render a wireframe
convert geometry to only flat triangles without reusing vertices positions
parse an obj string to a geometry object
randomize order of triangles in a geometry
Reverses the order of vertices in a geometry, back facing triangles become front facing ones
uniform scaling of geometry vertices
sort geometry triangles by position
Generate a SVG path string of a string using an opentype font
create new triangles in a mesh (subdivide)
transform vertices of geometry
Draws multiple triangles using coordinates from an array
Triangulate a 2d path to a flat and filled 3d geometry
Define filters to get colliding and intersecting bodies
Add Bodies and check if they intersect/collide with each other
test one body against all bodies in the world
test intersect bodies collision against a point/coordinate
Cast a ray and check if it intersect/collide with bodies
Define a world to check for intersections and collisions
Align a HTML element to another, keep positioning
Appends a HTML DOM Element to another
set file dependant on browser
compares two images and shows the difference as a pink color
Set childs of a HTML Element
add child elements to another HTML Element
get html element absolute position and size in pixels on screen
Output css attributes of an element as a string
fade html elements in or out
Html element interaction events
get html element absolute positions and sizes by classname
Load a font file like .otf, .ttf, .woff via css
triggers when asynchronous requests finised loading
Switch webgl to fullscreen
Set innerHTML or innerTEXT of an HTML element
creates a mailto: link to open the default email app
markdown markup language to html parser
create a modal HTML overlay with a darkened background
Use image as mouse cursor
Selects an element in the DOM
Selects all matching elements in the DOM
Scroll an area, so the html element is visible/in view
the current x y top left scrolling position of html page or element
detect if the browser window/tab has focus
size of browser window in pixels
Element Accessibility properties for screen reader
Get all attributes from an element an object
Read or Get the value of an HTML element Attribute
Write or Set the value of an HTML element Attribute
Load a background image and use css styling
Define a custom stylesheet
set css filter to html element (blur/opacity/contrast)
Set css style properties of a html element
Modify a css property of an element with a string
3d Transform a HTML element by using CSS3D properties
Set CSS border properties of a HTML element
Set text and background colors of an HTML element
Set css padding of a html element
Add shadows to html elements
Set the size of an element
Set font and text properties of a html element
translate,scale and rotate a HTML element using css transform
gets current value of CSS Variable
set color value of a CSS variable
set CSS variable string value
Set CSS variable URL value
add or remove css class to/from a HTML element
Transform an Element in 3d space using CSS3D
Move html element to current transformation in screen space
Simple Audio Player, using HTML5 Audio, does not need WebAudio
Create a html DIV element
A more convinient version of div element op, that can be used for creating html without writing much css code
Show another website in an iframe element
create an image(img) html element
HTML input/textarea element to allow the user to enter text
html video player element
Add a custom event listener
Listen to events of an element
Prevents the default on a JavaScript event
Stop a JavaScript event (bubbling / capturing)
create a cables logo which links to cables gl
show a typical web loading/progress indicator animation
Trigger a simple pop up notification on the screen
shows a playbutton for forcing a simple user interaction
simple html ui for timeline/mediaplayers (was: TimeLineUI)
Generate a qr code as a texture
play a youtube video in a HTML element
Creates a copy of a JSON object
get all values of a CSV column as array of strings
Will only allow an Object to to be output if the the pass through parameter evaluates to true
Request a json file and output an object (ajax, url, json)
Remove a Property from an Object by Key
filter values from an object if key starts with input string
outputs the last changed object
Returns an array from a JSON-object
Get a number from an object
Get an object from an object
Get string from object by key
check if object is null or a valid object
returns an array of strings, which contain the keys of the object
merge key+values of two objects
result is first connected valid object
record objects and download as json file
Set array by key in an object
Set rgba array by key in an object
set number at key in an object
set object as value in an object
set a string value by key in an object
cast an object port to an array port
set output object when triggered
extract all object values as an array
Parses a string to a JSON object
Route an object to an output port
save/download an object as json file
control order and flow of objects
Allows switching between objects
Switch between multiple object inputs
set a number value of an object using trigger
set a string value of an object using trigger
Returns the absolute, positive value
Add to and multiply a number, set to current value
outputs the angle between two points (degree)
multiply every XYZ coordinate with a matrix
calculate 2d positions of an array3x
Calculates the angle from a specified point to the coordinate origin.
average of last two values
generate coordinates of a butterfly curve
Returns the smallest integer greater than or equal to a given number
x and y coordinates of a circle
Makes sure a value is within range cuts off the rest
Calculates the cosine of an angle.
Computes the cross product of two vec3's
crossfade between 2 values
Converts a radian measurement to its corresponding value in degrees.
Calculates a vector (x and y) based on an angle in degrees
difference to the last value (previous, store)
add delta values to an clamped absolute value
Difference between two numbers
Calculates the Distance between two 2d points
distance between two 3d points, calculated when triggered
Divides a number by another
map a value to an easing curve
Calculates the power of Euler’s number
positive numbers become negative and vice versa (negate)
returns the largest integer less than or equal to a given number
returns the fractional part of a number
random numbers fitting a Gaussian, or normal, distribution
increment a number by triggering
return fraction of value by index
Interpolate between values, lerp, linear interpolate
detect if a number rising or falling
Calculates the logarithm of Number
map geo locations (latitude - longitude) to spherical coordinates
Maps a value from one range into another.
Allows different mathematical operations to be applied to two numbers
calculates a user defined mathematical expression
Sets the output to the input value which is higher
Outputs the maximum value since reset has been triggered
project mercator coordinates
Mercator map and center an array of latitudes and longitudes to a local coordinate system
Result will be the smaller number of the inputs
Outputs the minimum value since reset has been triggered
outputs the remainder after division of one number by another
multiply XYZ values with a gl matrix vec3 x mat4
is a number capable of being divided.
subtract a number from one
outputs a perlin noise value like random
returns PI (3.141592653589793) * multiply amount
test if a point is in or outside of a rectangle
value of x to the power of y
Return the next values as power of two
Converts a degree measurement to its corresponding value in radians.
add up random numbers by triggering
Simple way to get random numbers without using arrays
Random number generator from a string seed
Create rotation matrix from normal
Outputs number rounded to the nearest integer
round to the next even number
Custom easing curve via schlick bias and gain
Calculate the Average of the last X values
Calculates the sine of an angle.
interpolate smoothly between two input values
Interpolate smoothly between two input values
measure speed of how much a value changes
Subtracts Number2 from Number1 (minus, -)
Calculates the ratio of the sine and cosine of an angle.
calculates a user defined mathematical expression
generate random number between min and max (was: random2)
result is true if value is between number1 and number2
result is true if value is between or equal number1 and number2
Performs logical comparisons on numbers (compare, operators)
result is true if number1 and number2 are equal
result is true if number 1 is greater or equals number 2
result is true if number1 is greater than number2
triggers when value is between min and max
Checks if Value is even or not
Is n1 smaller than n2? (lesser, less)
create a cables.gl CORS proxy URL
Create a websocket connection and receive data from it
send an object to a websocket connection
delay the value data flow by x seconds
capture the current input and copy it to the output, even after a reload
Let’s a number through only if control bool is true, like a gate
Number op which only outputs integers
Returns the maximum safe integer (number, constant)
Returns the minimum safe integer (number, constant)
Stores a value, use the same value in different places (was: value.value)
Copies the input value to the output ports (value sequence)
State management of all parameters connected to it - Create presets of multiple ops
remember/store last set number
Routes the value to one of the output ports (based on index, relay)
control order and flow of numbers
switch between number values by index
Switch between multiple number inputs
Sets a specific output value on trigger
Stores a 3D coordinate (was Value3)
triggers every time the input value changed
sidebar push button/trigger element
Shows a color-picker in the sidebar
display a value or string
Shows a drop-down (select) element in the sidebar
organize sidebar elements into groups
steps through numerical or array values one by one
load a local file and output as data url
Enter a number in the sidebar
Sidebar overlay to control values
date or datetime picker in the sidebar
Display an image in the sidebar
adjust appearance of sidebar
add tabs or switchbar to a sidebar
Display text in the sidebar
show values of all variables in a sidebar
Sidebar slider element (range)
Get a string from an sidebar input field
sidebar boolean toggle/switch element
2d coordinate input element
Insert a line break in a string of words
Check if an array contains a string which can also be a number (find,search,indexOf)
Create an array of strings and optionally attach index-number
String rotate characters like a split-flap display
Joins two strings together
Joins multiple strings together
concatinate/join multiple string inputs
Copy string to clipboard on trigger
delay the output of a string by n seconds
filter valid strings (not null,undefined or empty)
capture the current input and copy it to the output, even after a reload
Output string if pass through is true
string conversion using handlebars template engine
create a fixed length string from a number 1 -> 0001
Limit number of lines in a string
Convert linebreaks to html breaks
Lorem ipsum dolor sit amet
convert all characters to small letters
Create a md5 hash of a string
Format a number to a string in the given locale and format
associate numbers by strings
Convert a number to a string
Count number of line breaks in a string
outputs the first valid string
Parse a string to a integer number / string to number
Generate a random string of given characters
create a string with a fixed length filling the space with a character
Converts a number to a string with num decimal places, adds 0's
Route a string to an output port
download a textfile containing the input string
control order and flow of strings
does a string starts with another string?
Combine multiple Values to a new String
check if string contains another string (find,search,indexOf)
check if content of two strings is the same
output the line number at the character index
iterate over every character of a string
number of characters in a string
replace occurrences of a string with another string
sort each line of a string alphabetically
create an array from multiple string input ports
Switch between multiple strings by a string index
Parses a string and returns a floating point number / string to number
Remove whitespace from both ends of a string
remove html tags from a string
Subset of a string between one index and another
Switch between multiple strings with an index
switch between multiple string inputs
Convert all characters in a string to upperase
outputs a unique identifier string
decode a string to base64
encode a string to base64
trigger a download of a base64 binary file
example how to code a viz layer op
Material Example Template
Is a template for creating Array ports
Is a template for creating Boolean ports
Is a template for creating Object ports
Is a template for creating String ports
Is a template for creating Trigger ports
Is a template for creating Value ports
shader effect example template
Automatically starts the timeline playback when opening patch
Prerenderer based on timeline progress
jump to a key in the timeline
Render the patch at certain times
use position and play pause state of cables timeline
Returns the current frame number of the timeline
current set length of the timeline
Automatic rewind of timeline at a certain time
overwrite timeline time value
Player controls for the timeline
set time of timeline to 0 (rewind, restart)
set current time of timeline
Returns the current time of the timeline
toggle between timeline playing and being paused
Animate and get value at "time" of timeline
delay triggering next port by x seconds
Allows a trigger to pass only if the gate is open
outputs true if being triggered last frame
Lets a trigger through every nth time (trigger limiter)
Outputs the last number of the input port which was triggered
output a number by triggering an index port
randomly trigger output ports
Triggers all ops below x times (for loop / while)
Triggers all ops underneath Num X * Num Y times
Triggers one of the out ports - value index switch case (was SwitchTrigger)
animated switching between things
Triggers one of the output ports - value index switch case
route trigger output by string
control the order of execution/triggering
route input triggers by index to one output
Triggers only once when threshold is crossed
timed switching of trigger
Get the time since last trigger
simple button to trigger manually
Counts how often the port was triggered
Increments with each trigger and loops depending on min and max loop values.
triggers evenly distributed by value
Extends a trigger (useful in big patches for better overview)
trigger if a value decreases / gets smaller
Outputs a trigger if the value of a number increases
Limits how often a trigger goes through to x ms
Outputs a number when triggered
Trigger the following children once
triggers when array has changed
triggers when Object has changed
triggers when string has changed
triggers when texture has changed
Receives triggers from a TriggerSend op with the same variable name
receives all named trigges and relays them, optionally using a filter-prefix on the name
Allows triggers to be sent to a TriggerReceive op with the same variable name
Allows triggers to be sent to a TriggerReceive op with the same variable name
Counts how often the port is triggered per second
Triggers when the input value became zero
Organize and group your patch operators
Displays a comment in the patch area
Get the default theme colors of the cables editor
Helper op for sub-patches
Helper op for sub-patches
Displays information of the distribution of numerical values in an array
Visualize Array as line graph
Show the contents of the input array in a table in the patch, useful for debugging
Visualize the state of a boolean input in the patch, useful for debugging
Displays graphs for the numbers on the input port in the patchfield
Log changes of input values line by line, use like a logfile for debugging
Displays input string on the patchfield
Visualize numbers as a bar in patch, useful for debugging
Show information about any object for patch debugging
Displays long input string on the patchfield
Displays texture at input port
Show pixel colors of connected texture as a table, useful for debugging
Visualize triggering for debugging reasons
Output the current patch coordinates
Patchfield cable routing helper for array cables
Patchfield cable routing helper for number cables
Patchfield cable routing helper for object cables
Patchfield cable routing helper for string cables
Routing Helper for trigger cables
Get a number variable value at time of trigger
Get a string variable value at time of trigger
get a texture from a variable
outputs an object containing all variables
Set an array variable by a trigger
set number variable by trigger
Set an object variable by trigger
set string variable by trigger
Set an object variable by trigger
Creates a spectrogram texture from an audio FFT array
Extracts FFT, RMS & Waveform data from an incoming audio signal
Holds an audio file / sample in a buffer
Route audio from one input channel to any output channel
Play back audio data stored in an AudioBuffer
Outputs the waveform of an audio file as a spline array
stereo pan an audio signal from left to right
record, playback and download audio
Different kinds of audio filters
send bpm based triggers like a clocked trigger sequencer / clock divider
sequence triggers by defining a pattern (like a drum machine)
Audio reverb using an impulse response (sample)
dj style filter (lowpass and highpass)
add a delay effect to an audio stream
get average value in an area of a fft audio analysis buffer
Changes the gain / volume
Generates notes based on key presses
Access to the microphone and/or audio input devices
Converts a midi value to a frequency
Mix audio signals together
Outputs a musical scale array (major, minor, ...) as strings, steps and midi notes
Sends an audio signal to your speakers
3 filters in one - an eq to quickly process an audio signal
Outputs the waveform of an audio file as a geometry
add waveshaping (distortion, overdrive, fuzz) to an audio stream
cookie of the current website as object
information about a filename, like url protocol, suffix etc
will redirect to same URL using https protocol
Information about the current URL
Outputs true if the patch is inside of an iframe
Store and retreive a number in browser localstorage
Store and retreive a string in browser localstorage
gives updated information about window.location.hash
sets window.location.hash to the specified value(s)
Returns a URL query parameter