Always animates to the current value
Smooths out jumps in values in an array
trigger a simple bang animation going from 1 to 0
animate between two values based on a boolean value
switch between multiple anim ranges of a keyframed 3d scene
parses string containing ranges of frames and play as coherent animation
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
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
remove points from an array3 with different shapes
Transform Array3 by flipping on an axis
average x,y,z values of an array3x
get 3 values XYZ from an array
interpolate between two arrays
multiply every XYZ member of array3x
visually edit positions in an array of point coordinates
Push three numbers to the end of an array (was ArrayPushValue3x)
extract definable amount of random xyz points from 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 distance between 2 points from an array
Returns the length of a vector from an array 3
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
Triggers when any array values or the array length has changed
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
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 /concatinate arrays by trigger
Merge multiple arrays - in consecutive order
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 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
Reverses an array (creates a copy of the array before), shallow copy
put an array into an array
set a number 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
Can generate 3 kinds of arrays. Number - 1,2,3,4 - Normalized - (ContinuousNumberArray)
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
Iterates over an array in steps of three and outputs three values
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.
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
Shuffles/Randomizes the order of an array of triplets
Randomizes the order of elements inside an array
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.
sort an array3, by the distance of each point to the previous point
sort an array of objects by value of object keys
Sorts an array of numbers and also get sorted indices
Returns a number with the total distance between the points/items in an array3
get position in array3/spline at distance from start
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
For subdividing splines, smoothing lines using cubic bezier interpolation
switch between multiple arrays
switch between multiple arrays
Stores various textures in an array, starts at the beginning again when end reached
transform (translate,rotate,scale) positions in an array3x
Weaves two arrays together (combine, join, merge)
process and manipulate collections (arrays) of data Particle Spray simulation
create arrays for circular shapes, helix,circle etc
fill a XYZ array with existing duplicate points until it reaches the length
calculates a circle path, outputs array3x
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
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
Outputs `0` for `false` and `1` for `true` (converter, 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
Inverts a boolean value (negate, flip, not)
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
Starts / stops a loading task (async loader)
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
Contains a collection of nice color palettes output to texture or array via index
Use a color value on multiple places
Converts a color from HSB to RGB (conversion, HSV, HSL, colour, mode)
Converts a hex color like `#ff0000` to number values
convert RGB color to HSB Hue, Saturation, Brightness
convert RGB float values to HEX color String
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 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
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())
Shows console log output on the screen
Log incoming values to the console/dev tools
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
Outputs a stack trace to the console
Reports the browser being used
Get light/dark color scheme preference of the browser
evaluate a javascript expression
browser js memory consumption
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 certain key is pressed or released
Triggers when a key is pressed
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
read NRPN value from controller
send midi NRPN data to a midi output
Only read a range of notes (e.g. C1 to C2)
send midi note 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 the state of mouse buttons
get delta of mouse position while dragging
outputs delta values controlled by the mousewheel (scroll, zoom)
Get mouse coordinates and events
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 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 png 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
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 (renderer)
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
create an array of textures
load multiple texture from filenames given as an array
load multiple images into 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
Load an image as a texture
will trigger when canvas was resized
output current input texture or a default texture
Outputs current viewport size
which webgl version is being used
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
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
sine animate gltf nodes by a filter
Get the transform from the GLTFscene op
output all transformations of nodes starting with [search]
Control a single node from the GLTFscene op
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
Test if a boundingbox could be visible in the current viewport
Calculate a bounding box from a geometry
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
change intensity of r,g,b channels
enable disable RGB color channels
colorize a black and white image using a gradient texture
fill image using a color (overlay)
Denoise texture effect - used to smooth out noisy images
draws a gradient from white to black back to white over distance of the scene
draw the content of a depth texture
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
post processing antialiasing
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
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
Adjust aspect ratio of an image compose branch
capture the current state of an imageCompose branch by copying the texture
Compose Images and effects as layers to generate new Images
apply color filter/effects by using a lookup 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
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
Offsets the xy components of an RGB texture
Set random numbers into an imagecompose
draws a 2d rectangle into a texture.
Remove alpha information from image
multiply image colors by color channel
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
Generate different texture waveforms. Sine, sawtooth and triangle.
Generates 4 different waveform textures. Sine, sawtooth,Triangle, Square.
waving wobble motion effect
Map the range of color number values to another
normalize texture rgb values
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
Convert a RGBE texture to HDR/floating point texture
Round number values of texture color channels
compare and pass through of color channel values
fractional brownian motion noise
Creates a black and white glitched texture to use for displacement
Creates a hexagonal noise texture
Multilayer perlin noise variation
Draw perlin noise into an image
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
iterate over an array3: translate to xyz, then trigger next op
rotate an object to always face the camera
get camera attributes from current camera/orbit controls
get the current position of viewmatrix/camera eye
Transforms and projects the scene from the point of view of the camera.
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)
nine slice image format texture mapped rectangle
Draws a rectangle with rounded corners
draw a rectangle (plane, square)
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
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 it's 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
colorize instanced meshes by picking random color from a texture
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 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
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 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
Appends a HTML DOM Element to another
Simple Audio Player, using HTML5 Audio, does not need WebAudio
Load a background image and use css styling
set file dependant on browser
set css filter to html element (blur/opacity/contrast)
Modify a css property of an element with a string
Set css style properties of a html element
Define a custom stylesheet
create a cables logo which links to cables gl
compares two images and shows the difference as a pink color
Create a html DIV element
Set childs of a HTML Element
get html element absolute position and size in pixels on screen
translate,scale and rotate a HTML element using css transform
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
gets current value of CSS Variable
Show another website in an iframe element
create an image(img) html element
HTML input/textarea element to allow the user to enter text
show a typical web loading/progress indicator animation
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
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
Selects all matching elements in the DOM
Selects an element in the DOM
remove CSS class [classname] from all html elements that have class [classname]
the current x y top left scrolling position of html page or element
set color value of a CSS variable
set CSS variable string 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
html video player element
detect if the browser window/tab has focus
size of browser window in pixels
play a youtube video in a HTML 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)
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
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 the array at the position defined by a path
Outputs all the values of the properties of an array of objects given a path
Returns an array from a JSON-object
finds a number at a position in an object defined by path
Get a number from an object
Returns the object at the position defined by a path
Get an object from an object
Get string from object by key
Finds a string at a position in an object defined by path
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
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
Calculates a vector (x and y) based on an angle in degrees
Converts a radian measurement to its corresponding value 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
Outputs the minimum value since reset has been triggered
Result will be the smaller number of the inputs
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
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
send an object to a websocket connection
Create a websocket connection and receive data from it
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
Sets a specific output value on trigger
Switches two number values using a boolean
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
Display an image in the sidebar
adjust appearance of sidebar
add tabs or switchbar to a sidebar
Sidebar overlay to control values
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 multiple strings together
Joins two strings together
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
Count number of line breaks in a string
Format a number to a string in the given locale and format
associate numbers by strings
Convert a number to a string
outputs the first valid string
Parses a string and returns a floating point number / string to number
Parse a string to a integer number / string to number
Generate a random string of given characters
Converts a number to a string with num decimal places, adds 0's
create a string with a fixed length filling the space with a character
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
Switch between multiple strings by a string index
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
outputs a unique identifier string
Convert all characters in a string to upperase
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
triggers if value 1+2 are equal
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
randomly trigger output ports
Triggers all ops underneath Num X * Num Y times
Triggers all ops below x times (for loop / while)
Triggers one of the out ports - value index switch case (was SwitchTrigger)
animated switching between things
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
Get the time since last trigger
timed switching of 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
triggers when array has changed
triggers when array has changed
triggers when string has changed
triggers when texture has changed
Trigger the following childs once
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
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 input string on the patchfield
Displays long input string on the patchfield
Displays texture at input port
Show pixel colors of connected texture as a table, useful for debugging
Get a number variable value at time of trigger
Get a string variable value at time of trigger
get a texture from a variable
Set an array variable by a trigger
set number variable by trigger
Set an object variable by trigger
set string variable by trigger
outputs an object containing all variables
Creates a spectrogram texture from an audio FFT array
Extracts FFT, RMS & Waveform data from an incoming audio signal
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
Holds an audio file / sample in a buffer
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
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, e.g. index.html?Parameter=ParameterValue
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
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.
create an array of div elements
Set css style properties of a html element
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
connect to a socketcluster server and manage the connection
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