jsdoc

1.0.0

CABLES.Utils

Utils
Static Members
.float32Concat(first: Float32Array, second: Float32Array): Float32Array

Merge two Float32Arrays.

Returns Float32Array:
.shuffleArray(array: (Array | Float32Array)): (Array | Float32Array)

randomize order of an array

Returns (Array | Float32Array): shuffled array
.shortId(): String

generate a short "relativly unique" id

Returns String: generated ID
.uuid(): String

generate a UUID

Returns String: generated UUID
.simpleId(): Number

generate a simple ID

Returns Number: new id
.smoothStep(value: Number): Number

smoothStep a value

Returns Number: smoothed value
.smootherStep(value: any): Number

smootherstep a value

Returns Number: smoothed value
.map(value: Number, oldMin: Number, oldMax: Number, newMin: Number, newMax: Number): Number

map a value in a range to a value in another range

Returns Number: mapped value
.isNumeric(value: Any): Boolean

returns true if parameter is a number

Returns Boolean:
.isArray(value: Any): Boolean

returns true if parameter is array

Returns Boolean:
.cacheBust(url: String): String

append a unique/random parameter to a url, so the browser is forced to reload the file, even if its cached

Returns String: url with cachebuster parameter
.basename(url: String): String

return the filename part of a url

Returns String: just the filename

Math

Math
Static Members
randomSeed

set random seed for seededRandom()

.seededRandom(max: Number, min: Number): Number

generate a seeded random number

Returns Number: random value

String

String
Static Members
.endl(): String

append a linebreak to a string

Returns String: string with newline break appended ('\n')
.startsWith(prefix: String): Boolean

return true if string starts with prefix

Returns Boolean:
.endsWith(suffix: String): Boolean

return true if string ends with suffix

Returns Boolean:

ajax

.ajax()

make an ajax request

CABLES.Anim

new Anim()

Keyframed interpolated animation.

Available Easings:

CONSTANTS.ANIM.EASING_LINEAR
CONSTANTS.ANIM.EASING_ABSOLUTE
CONSTANTS.ANIM.EASING_SMOOTHSTEP
CONSTANTS.ANIM.EASING_SMOOTHERSTEP
CONSTANTS.ANIM.EASING_BEZIER

CONSTANTS.ANIM.EASING_CUBIC_IN
CONSTANTS.ANIM.EASING_CUBIC_OUT
CONSTANTS.ANIM.EASING_CUBIC_INOUT

CONSTANTS.ANIM.EASING_EXPO_IN
CONSTANTS.ANIM.EASING_EXPO_OUT
CONSTANTS.ANIM.EASING_EXPO_INOUT

CONSTANTS.ANIM.EASING_SIN_IN
CONSTANTS.ANIM.EASING_SIN_OUT
CONSTANTS.ANIM.EASING_SIN_INOUT

CONSTANTS.ANIM.EASING_BACK_IN
CONSTANTS.ANIM.EASING_BACK_OUT
CONSTANTS.ANIM.EASING_BACK_INOUT

CONSTANTS.ANIM.EASING_ELASTIC_IN
CONSTANTS.ANIM.EASING_ELASTIC_OUT

CONSTANTS.ANIM.EASING_BOUNCE_IN
CONSTANTS.ANIM.EASING_BOUNCE_OUT

CONSTANTS.ANIM.EASING_QUART_IN
CONSTANTS.ANIM.EASING_QUART_OUT
CONSTANTS.ANIM.EASING_QUART_INOUT

CONSTANTS.ANIM.EASING_QUINT_IN
CONSTANTS.ANIM.EASING_QUINT_OUT
CONSTANTS.ANIM.EASING_QUINT_INOUT

Example:
var anim=new CABLES.Anim();
anim.setValue(0,0);  // set value 0 at 0 seconds
anim.setValue(10,1); // set value 1 at 10 seconds
anim.getValue(5);    // get value at 5 seconds - this returns 0.5
Instance Members
.defaultEasing
Type: Number
.hasEnded(time: Number): Boolean

returns true if animation has ended at @time checks if last key time is < time

Returns Boolean:
.clear(time: Number)

remove all keys from animation

.setValue(time: Number, value: Number, callback: Function?)

set value at time

.getValue(time: Number?): Number

get value at time

Returns Number: interpolated value at time
new Link(patch: Object)

a link is a connection between two ops/ports -> one input and one output port

Instance Members
.getOtherPort(port: Port)

returns the port of the link, which is not port

.remove()

unlink/remove this link from all ports

.canLinkText(port1: Port, port2: Port)

return a text message with human readable reason if ports can not be linked, or can be

CABLES.Port

new Port()

data is coming into and out of ops through input and output ports


Example:
const myPort=op.inString("String Port");
Static Members
.getUiAttribs()

get ui attributes


Example:
myPort.getUiAttribs();
Instance Members
direction

direction of port (input(0) or output(1))

Type: Number
.onChange()

change listener for input value ports, overwrite to react to changes


Example:
const myPort=op.inString("MyPort");
myPort.onChange=function()
{
  Log.log("was changed to: ",myPort.get());
}
.hidePort()

hide port rectangle in op

.remove()

remove port

.setUiAttribs(newAttribs: Object)

set ui attributes


Example:
myPort.setUiAttribs({greyout:true});
.getUiAttrib(attribName: String)

get ui attribute


Example:
myPort.setUiAttribs("values");
.get()

get value of port

.setValue()

set value of port / will send value to all linked ports (only for output ports)

.getTypeString(): String

get port type as string, e.g. "Function","Value"...

Returns String: type
.getName()

return port name

.getLinkTo(otherPort: Port)

return link, which is linked to otherPort

.removeLinkTo(otherPort: Port)

removes link, which is linked to otherPort

.isLinkedTo(otherPort: Port)

returns true if port is linked to otherPort

.trigger()

trigger the linked port (usually invoked on an output function port)

.getType(): Number
CABLES.CONSTANTS.OP.OP_PORT_TYPE_VALUE = 0;
CABLES.CONSTANTS.OP.OP_PORT_TYPE_FUNCTION = 1;
CABLES.CONSTANTS.OP.OP_PORT_TYPE_OBJECT = 2;
CABLES.CONSTANTS.OP.OP_PORT_TYPE_TEXTURE = 2;
CABLES.CONSTANTS.OP.OP_PORT_TYPE_ARRAY = 3;
CABLES.CONSTANTS.OP.OP_PORT_TYPE_DYNAMIC = 4;
CABLES.CONSTANTS.OP.OP_PORT_TYPE_STRING = 5;
Returns Number: type of port
.isLinked(): Boolean
Returns Boolean: true if port is linked
.isAnimated(): Boolean
Returns Boolean: true if port is animated
.isHidden(): Boolean
Returns Boolean: true if port is hidden
.onTriggered(callback: onTriggeredCallback)

set callback, which will be executed when port was triggered (usually output port)

.portTypeNumberToString(type: Number): String

Returns the port type string, e.g. "value" based on the port type number

Returns String: The port type as string

CABLES.Op

Op

op the class of all operators

Instance Members
attachments

access file attachments as String values

Type: Object

Example:
// set shader source to attached files (files are called shader.vert / shader.frag)
shader.setSource(attachments.shader_vert,attachments.shader_frag);
.preRender()

overwrite this to prerender shader and meshes / will be called by op loadingStatus

.init()

overwrite this to initialize your op

.setUiAttrib(newAttribs: Object)

setUiAttrib possible values:

warning - warning message - showing up in op parameter panel
error - error message - showing up in op parameter panel
extendTitle - op title extension, e.g. [ + ]

Example:
op.setUiAttrib({"extendTitle":str});
.inTrigger(name: String): Port

create a trigger input port

Returns Port: created port
.inTriggerButton(name: String, names: Array): Port

create multiple UI trigger buttons

Returns Port: created port
.inFloat(name: String, value: Number): Port

create a number value input port

Returns Port: created port
.inBool(name: String, value: Boolean): Port

create a boolean input port, displayed as a checkbox

Returns Port: created port
.inString(name: String, value: String): Port

create a String value input port

Returns Port: created port
.inValueText(name: String, value: String): Port

create a String value input port displayed as TextArea

Returns Port: created port
.inStringEditor(name: String, value: String): Port

create a String value input port displayed as editor

Returns Port: created port
.inDropDown(name: String, values: Array, value: String): Port

create a string select box

Returns Port: created port
.inSwitch(name: String, values: Array, value: String): Port

create a string switch box

Returns Port: created port
.inInt(name: String, value: number): Port

create a integer input port

Returns Port: created port
.inURL(name: String): Port

create a file/URL input port

Returns Port: created port
.inTexture(name: String): Port

create a texture input port

Returns Port: created port
.inObject(name: String): Port

create a object input port

Returns Port: created port
.inArray(name: String): Port

create a array input port

Returns Port: created port
.inFloatSlider(name: String, defaultvalue: number, min: number, max: number): Port

create a value slider input port

Returns Port: created port
.outTrigger(name: String): Port

create output trigger port

Returns Port: created port
.outNumber(name: String, default: number): Port

create output value port

Returns Port: created port
.outBool(name: String): Port

create output boolean port

Returns Port: created port
.outString(name: String): Port

create output string port

Returns Port: created port
.outObject(name: String): Port

create output object port

Returns Port: created port
.outArray(name: String): Port

create output array port

Returns Port: created port
.outTexture(name: String): Port

create output texture port

Returns Port: created port
.getPort(portName: String): Port

return port by the name portName

Returns Port:
.getPortById(id: String): Port

return port by the name id

Returns Port:
.setUiError(error: id, text: txt, level: level)

show op error message - set message to null to remove error message

.addEventListener(name: which, callback: function)
.removeEventListener(name: which, callback: function)

remove an eventlistener

.setEnabled(b: any, boolean: any)

enable/disable op

.setPortGroup(name: String, ports: Array)

organize ports into a group

.removePort(port: Port)

remove port from op

.toWorkPortsNeedToBeLinked(port1: Port, port2: Port, port3: Port)

show a small X to indicate op is not working when given ports are not linked

.refreshParams()

refresh op parameters, if current op is selected

.isCurrentUiOp(): Boolean

Returns true if op is selected and parameter are shown in the editor, can only return true if in editor/ui

Returns Boolean: is current ui op
.getNamespaceClassName(opName: String): String

Returns an op category for the op.

Returns String: The op category

CABLES.EMBED#addPatch

.CABLES.EMBED#addPatch(containerElement: (object | string), patch: options)

add patch into html element (will create canvas and set size to fill containerElement)

CABLES.Patch

new Patch(config: PatchConfig)

Patch class, contains all operators,values,links etc. manages loading and running of the whole patch

see PatchConfig


Example:
CABLES.patch=new CABLES.Patch(
{
    patch:pStr,
    glCanvasId:'glcanvas',
    glCanvasResizeToWindow:true,
    canvas:{powerPreference:"high-performance"},
    prefixAssetPath:'/assets/',
    onError:function(e){console.log(e);}
});
Static Members
new Variable(name: String, value: (String | Number))
Type: Object
Static Members
.Variable.getValue(): (String | Number | Boolean)
Returns (String | Number | Boolean):
Instance Members
.getName(): (String | Number | Boolean)
Returns (String | Number | Boolean):
.setValue(): (String | Number | Boolean)
Returns (String | Number | Boolean):
.addListener(callback: Function)

function will be called when value of variable is changed

.removeListener(callback: Function)

remove listener

Instance Members
.getFPS(): Number

current number of frames per second

Returns Number: fps
.isEditorMode(): Boolean

returns true if patch is opened in editor/gui mode

Returns Boolean: editor mode
.pause()

pauses patch execution

.resume()

resumes patch execution

.setVolume(volume: Number)

set volume [0-1]

.getAssetPath()

get asset path

.getFilePath(filename: String): String

get url/filepath for a filename this uses prefixAssetpath in exported patches

Returns String: url
.addOp(objName: String, UI: Object)

create a new op in patch


Example:
// add invisible op
patch.addOp('Ops.Math.Sum', { showUiAttribs: false });
.setVariable(name: String, value: (Number | String | Boolean))

set variable value

.getVar(name: String): Variable
Returns Variable: variable
.getVars()
.getVars(): Array<Variable>
Returns Array<Variable>: variables
.preRenderOps()

invoke pre rendering of ops

.dispose()

stop, dispose and cleanup patch

Events
onOpAdd

op added to patch event

Type: Object
Properties
op (Op) : new op
onOpDelete

op deleted from patch

Type: Object
Properties
op (Op) : that will be deleted
variablesChanged

variables has been changed / a variable has been added to the patch

Type: Object
Properties
port1 (Port)
port2 (Port)

PatchConfig

PatchConfig

configuration object for loading a patch

Type: Object
Properties
prefixAssetPath (String?) : path to assets
glCanvasId (String?) : dom element id of canvas element
onError (Function?) : called when an error occurs
onFinishedLoading (Function?) : called when patch finished loading all assets
onFirstFrameRendered (Function?) : called when patch rendered it's first frame
glCanvasResizeToWindow (Boolean?) : resize canvas automatically to window size
doRequestAnimation (Boolean?) : do requestAnimationFrame set to false if you want to trigger exec() from outside (only do if you know what you are doing)
clearCanvasColor (Boolean?) : clear canvas in transparent color every frame
clearCanvasDepth (Boolean?) : clear depth every frame
glValidateShader (Boolean?) : enable/disable validation of shaders *
silent (Boolean?)
fpsLimit (Number?) : 0 for maximum possible frames per second
glslPrecision (String?) : default precision for glsl shader

CGL.Context

new Context()

cables gl context/state manager

Instance Members
pMatrix

Current projection matrix

Type: mat4
mMatrix

Current model matrix

Type: mat4
vMatrix

Current view matrix

Type: mat4
.getViewPort(): Array

get current gl viewport

Returns Array: array [x,y,w,h]
.setViewPort(x: Number, y: Number, w: Number, h: Number)

set current gl viewport

.pushShader(shader: Object)

push a shader to the shader stack

.popShader()

pop current used shader from shader stack

.pushGlFrameBuffer(framebuffer: Object)

push a framebuffer to the framebuffer stack

.pushGlFrameBuffer(framebuffer: Framebuffer)

push a framebuffer to the framebuffer stack

.popGlFrameBuffer(): Object

pop framebuffer stack

Returns Object: current framebuffer or null
.getCurrentFrameBuffer(): Object

get current framebuffer

Returns Object: current framebuffer or null
.getCurrentFrameBuffer(): Framebuffer

get current framebuffer

Returns Framebuffer: current framebuffer or null
.popFrameBuffer(): Framebuffer

pop framebuffer stack

Returns Framebuffer: current framebuffer or null
.checkFrameStarted()

log warning to console if the rendering of one frame has not been started / handy to check for async problems

.addNextFrameOnceCallback(callback: function)

execute the callback next frame, once

.pushviewMatrix(viewmatrix: mat4)

push a matrix to the view matrix stack

.popViewMatrix(): mat4

pop view matrix stack

Returns mat4: current viewmatrix
.pushPMatrix(projectionmatrix: mat4)

push a matrix to the projection matrix stack

.popPMatrix(): mat4

pop projection matrix stack

Returns mat4: current projectionmatrix
.pushModelMatrix(modelmatrix: mat4)

push a matrix to the model matrix stack


Example:
// see source code of translate op:
cgl.pushModelMatrix();
mat4.translate(cgl.mMatrix,cgl.mMatrix, vec);
trigger.trigger();
cgl.popModelMatrix();
.popModelMatrix(): mat4

pop model matrix stack

Returns mat4: current modelmatrix
.modelMatrix(): mat4

get model matrix

Returns mat4: current modelmatrix
.pushDepthTest(enabled: Boolean)

push depth testing enabled state

.pushDepthTest(enabled: Boolean)

push depth write enabled state

.stateCullFace(): Boolean

current state of depth testing

Returns Boolean: enabled
.stateCullFace(): Boolean

current state of depth writing

Returns Boolean: enabled
.stateCullFace(): Boolean

current state of face culling

Returns Boolean: enabled
.popCullFace()

pop depth testing state

.popCullFace()

pop depth writing state

.popCullFace()

pop face culling enabled state

.pushCullFaceFacing(enabled: Boolean)

push face culling face enabled state

.pushCullFaceFacing()

push face culling face side

.stateCullFaceFacing(): Boolean

current state of face culling side

Returns Boolean: enabled
.popCullFaceFacing()

pop face culling face side

.pushDepthFunc(depthtesting: Boolean)

enable / disable depth testing like gl.depthFunc(boolean);

.stateDepthFunc(): Boolean

current state of blend

Returns Boolean: depth testing enabled/disabled
.popDepthFunc()

pop depth testing and set the previous state

.pushBlend(blending: Boolean)

enable / disable blend like gl.enable(gl.BLEND); / gl.disable(gl.BLEND);

.popBlend()

pop blend state and set the previous state

.stateBlend(): boolean

current state of blend

Returns boolean: blending enabled/disabled
.pushBlendMode(blendmode: Number, premultiplied: Boolean)

push and switch to predefined blendmode (CONSTANTS.BLEND_MODES.BLEND_NONE,CONSTANTS.BLEND_MODES.BLEND_NORMAL,CONSTANTS.BLEND_MODES.BLEND_ADD,CONSTANTS.BLEND_MODES.BLEND_SUB,CONSTANTS.BLEND_MODES.BLEND_MUL)

.popBlendMode()

pop predefined blendmode / switch back to previous blendmode

.shouldDrawHelpers()

should an op now draw helpermeshes

CGL.Shader

Shader

Example:
var shader=new CGL.Shader(cgl,'MinimalMaterial');
shader.setSource(attachments.shader_vert,attachments.shader_frag);
Instance Members
.enableExtension(name: any)

enable an extension for the shader

.copyUniforms(shader: any)

copy all uniform values from another shader

.copy(): any

copy current shader

Returns any: newShader
.setSource(srcVert: String, srcFrag: String)

set shader source code

.toggleDefine(name: name, value: any)

easily enable/disable a define without a value

.define(name: String, value: Any)

add a define to a shader, e.g. #define DO_THIS_THAT 1

.hasDefine(name: String): Boolean

return true if shader has define

Returns Boolean:
.removeDefine(name: name)

remove a define from a shader

.removeModule(module: shaderModule)

remove a module from shader

.addModule(module: shaderModule, sibling: shaderModule?)

add a module

.addUniformFrag(type: String, name: String, value: any): CGL.Uniform

add a uniform to the fragment shader

Returns CGL.Uniform:
.addUniformVert(type: String, name: String, value: any): CGL.Uniform

add a uniform to the vertex shader

Returns CGL.Uniform:
.addUniformBoth(type: String, name: String, value: any): CGL.Uniform

add a uniform to both shaders

Returns CGL.Uniform:
.addUniformStructFrag(structName: String, uniformName: String, members: Array): Object

add a struct & its uniforms to the fragment shader

Returns Object:

Example:
const shader = new CGL.Shader(cgl, 'MinimalMaterial');
shader.setSource(attachments.shader_vert, attachments.shader_frag);
shader.addUniformStructFrag("Light", "uniformLight", [
{ "type": "3f", "name": "position", "v1": null },
{ "type": "4f", "name": "color", "v1": inR, v2: inG, v3: inB, v4: inAlpha }
]);
.addUniformStructVert(structName: String, uniformName: String, members: Array): CGL.Uniform

add a struct & its uniforms to the vertex shader

Returns CGL.Uniform:

Example:
const shader = new CGL.Shader(cgl, 'MinimalMaterial');
shader.setSource(attachments.shader_vert, attachments.shader_frag);
shader.addUniformStructVert("Light", "uniformLight", [
{ "type": "3f", "name": "position", "v1": null },
{ "type": "4f", "name": "color", "v1": inR, v2: inG, v3: inB, v4: inAlpha }
]);
.addUniformStructBoth(structName: String, uniformName: String, members: Array): Object

add a struct & its uniforms to the both shaders. PLEASE NOTE: it is not possible to add the same struct to both shaders when it contains ANY integer members.

Returns Object:

Example:
const shader = new CGL.Shader(cgl, 'MinimalMaterial');
shader.setSource(attachments.shader_vert, attachments.shader_frag);
shader.addUniformStructBoth("Light", "uniformLight", [
{ "type": "3f", "name": "position", "v1": null },
{ "type": "4f", "name": "color", "v1": inR, v2: inG, v3: inB, v4: inAlpha }
]);
.addAttribute(attr: any, attribObject: Object): Object

adds attribute definition to shader header without colliding with other shader modules... when attrFrag is defined, vertex shader will output this attribute to the fragment shader

Returns Object:
.pushTexture(texture: uniform, texture: texture, texture: type)

push a texture on the stack. those textures will be bound when binding the shader. texture slots are automatically set

.popTexture()

pop last texture

.popTextures()

pop all textures

CGL.Framebuffer

new Framebuffer(cgl: Context, width: Number, height: Number, options: Object?)

a framebuffer

Static Members
.getGlFrameBuffer(): Object

get native gl framebuffer

Returns Object: framebuffer
.getDepthRenderBuffer(): Object

get depth renderbuffer

Returns Object: renderbuffer
.getTextureColor(): Texture

get color texture

Returns Texture: rgba texture
.getTextureDepth(): Texture

get depth texture

Returns Texture: depth texture

CGL.Geometry

new Geometry(name: String)

a geometry contains all information about a mesh, vertices, texturecoordinates etc. etc.


Example:
// create a triangle with all attributes
const geom=new Geometry("triangle"),

geom.vertices = [
     0.0,           sizeH.get(),  0.0,
    -sizeW.get(),  -sizeH.get(),  0.0,
     sizeW.get(),  -sizeH.get(),  0.0 ];

geom.vertexNormals = [
     0.0,  0.0,  1.0,
     0.0,  0.0,  1.0,
     0.0,  0.0,  1.0 ];

geom.tangents = [
    1,0,0,
    1,0,0,
    1,0,0 ];

geom.biTangents = [
    0,1,0,
    0,1,0,
    0,1,0 ];

geom.texCoords = [
     0.5,  0.0,
     1.0,  1.0,
     0.0,  1.0, ];

geom.verticesIndices = [
    0, 1, 2 ];
Instance Members
.clear()

clear all buffers/set them to length 0

.getAttributes(): Array<Object>
Returns Array<Object>: returns array of attribute objects
.getAttribute(name: String): Object
Returns Object:
.setAttribute(name: String, data: Array, itemsize: Number)

create an attribute

.setVertices(data: (Array | Float32Array))

set vertices

.setTexCoords(data: (Array | Float32Array))

set texcoords

.calcTangentsBitangents()

Calculates tangents & bitangents with the help of uv-coordinates. Adapted from Lengyel, Eric. “Computing Tangent Space Basis Vectors for an Arbitrary Mesh”. Terathon Software 3D Graphics Library. https://fenix.tecnico.ulisboa.pt/downloadFile/845043405449073/Tangent%20Space%20Calculation.pdf

.unIndex(Boolean: any)

remove all vertex indizes, vertices array will contain 3*XYZ for every triangle

CGL.BoundingBox

BoundingBox

bounding box

Instance Members
.maxAxis

get biggest number of maxX,maxY,maxZ

Type: Number
.size

size of bounding box

Type: vec3
.center

center of bounding box

Type: vec3
.x

center x

Type: Number
.y

center y

Type: Number
.z

center z

Type: Number
.minX

minimum x

Type: Number
.minY

minimum y

Type: Number
.minZ

minimum z

Type: Number
.maxX

maximum x

Type: Number
.maxY

maximum y

Type: Number
.maxZ

maximum z

Type: Number
.copy()

returns a copy of the bounding box

CGL.Mesh

new Mesh(cgl: Context, geometry: Geometry, glPrimitive: Number?)

webgl renderable 3d object


Example:
const cgl=op.patch.cgl
const mesh=new CGL.Mesh(cgl, geometry);

function render()
{
  mesh.render(cgl.getShader());
}
Instance Members
.updateVertices(geometry: Geometry)

update vertices only from a geometry

.setAttribute(attribute: String, data: Array, itemSize: Number, options: Object)

update attribute

.updateTexCoords(geometry: Geometry)

update texture coordinates only from a geometry

.updateNormals(geometry: Geometry)

update normals only from a geometry

.setGeom(geometry: Geometry)

set geometry for mesh

.render(shader: Shader)

draw mesh to screen

CGL.Uniform

new Uniform(shader: Shader, type: String, name: String, value: (Number | Port))

Shader uniforms

types:

f    - float
2f   - vec2
3f   - vec3
4f   - vec4
i    - integer
t    - texture
m4   - mat4, 4x4 float matrix
f[]  - array of floats
2f[] - array of float vec2
3f[] - array of float vec3
4f[] - array of float vec4

Example:
// bind float uniform called myfloat and initialize with value 1.0
const unir=new CGL.Uniform(shader,'f','myfloat',1.0);
unir.setValue(1.0);

// bind float uniform called myfloat and automatically set it to input port value
const myPort=op.inFloat("input");
const pv=new CGL.Uniform(shader,'f','myfloat',myPort);
Instance Members
.getGlslTypeString(): string

returns type as glsl type string. e.g. 'f' returns 'float'

Returns string: type as string
.setValue(value: (Number | Array | Matrix | Texture))

CGL

CGL
Static Members
DEG2RAD

multiply to get radians from degree, e.g. 360 * CGL.DEG2RAD

Type: Number
RAD2DEG

to get degrees from radians, e.g. 3.14 * CGL.RAD2DEG

Type: number
.getWheelDelta(event: MouseEvent): Number

get normalized mouse wheel delta (including browser specific adjustment)

Returns Number: normalized delta

reUnescapedHtml

reUnescapedHtml

Used to match HTML entities and HTML characters.

CGL.Texture

new Texture(cgl: Context, options: Object?)

A Texture


Example:
// generate a 256x256 pixel texture of random colors
const size=256;
const data = new Uint8Array(size*size*4);

for(var x=0;x<size*size*4;x++) data[ x*4+3]=255;

const tex=new CGL.Texture(cgl);
tex.initFromData(data,size,size,CGL.Texture.FILTER_NEAREST,CGL.Texture.WRAP_REPEAT);
Static Members
.load(cgl: Context, url: String, onFinished: Function, options: Object): Texture

load an image from an url

Returns Texture:
.getTempTexture(cgl: Context): Texture

returns the default temporary texture (grey diagonal stipes)

Returns Texture:
.getRandomTexture(): Texture

returns a reference to a random texture

Returns Texture:
.getTempGradientTexture(cgl: Context): Texture

returns a gradient texture from black to white

Returns Texture:
.createFromImage(cgl: Context, image: Object, options: Object)

create texturem from image data (e.g. image or canvas)

.isPowerOfTwo(x: Number): Boolean

returns true if x is power of two

Returns Boolean:
Instance Members
.compareSettings(otherTexture: Texture): Boolean

returns true if otherTexture has same options (width/height/filter/wrap etc)

Returns Boolean:
.clone(): Texture

returns a new texture with the same settings (does not copy texture itself)

Returns Texture:
.setSize(width: Number, height: Number)

set pixel size of texture

.initFromData(data: Array<Number>, width: Number, height: Number, filter: Number, wrap: Number)

create texturem from rgb data

.initTexture(image: Object, filter: Number)

set texture data from an image/canvas object

.delete()

delete texture. use this when texture is no longer needed

.isPowerOfTwo(): Boolean

return true if texture width and height are both power of two

Returns Boolean:
.getEmptyTexture(): Texture

returns a reference to a small empty (transparent) texture

Returns Texture:

WEBAUDIO

WEBAUDIO
Static Members
.createAudioContext(op: any)

Part of the Web Audio API, the AudioBuffer interface represents a short audio asset residing in memory.

.createAudioContext(op: any)

Part of the Web Audio API, the AudioNode interface is a generic interface for representing an audio processing module.

.createAudioContext(op: any)

The AudioContext interface represents an audio-processing graph built from audio modules linked together

.createAudioContext(op: CABLES.Op)

Checks if a global audio context has been created and creates it if necessary. This audio context can be used for native Web Audio as well as Tone.js ops. Associates the audio context with Tone.js if it is being used

.getAudioContext()

Returns the audio context. Before createAudioContext must have been called at least once. It most cases you should use createAudioContext, which just returns the audio context when it has been created already.

.createAudioInPort(op: CABLES.Op, portName: string, audioNode: AudioNode, inputChannelIndex: number): (CABLES.Port | undefined)

Creates an audio in port for the op with name portName When disconnected it will disconnect the previous connected audio node from the op's audio node.

Returns (CABLES.Port | undefined): The newly created audio in port or undefined if there was an error
.replaceNodeInPort(port: CABLES.Port, oldNode: any, newNode: any)

Sometimes it is necessary to replace a node of a port, if so all connections to this node must be disconnected and connections to the new node must be made. Can be used for both Audio ports as well as AudioParam ports if used with an AudioParam pass e.g. synth.frequency as newNode

.createAudioOutPort(op: CABLES.op, portName: string, audioNode: AudioNode): (CABLES.Port | undefined)

Creates an audio out port which takes care of (dis-)connecting on it’s own

Returns (CABLES.Port | undefined): The newly created audio out port or undefined if there was an error
.createAudioParamInPort(op: CABLES.Op, portName: string, audioNode: any, options: any, defaultValue: any): (CABLES.Port | undefined)

Creates an audio param in port for the op with name portName. The port accepts other audio nodes as signals as well as values (numbers) When the port is disconnected it will disconnect the previous connected audio node from the op's audio node and restore the number value set before.

Returns (CABLES.Port | undefined): The newly created port, which takes care of (dis-)connecting on its own, or undefined if there was an error
.loadAudioFile(patch: CABLES.Patch, url: string, onFinished: loadAudioFileFinishedCallback, onError: loadAudioFileErrorCallback)

Loads an audio file and updates the loading indicators when cables is run in the editor.

.isValidToneTime(t: (string | number)): boolean

Checks if the passed time is a valid time to be used in any of the Tone.js ops.

Returns boolean: True if time is valid, false if not
.isValidToneNote(note: string): boolean

Checks if the passed note is a valid note to be used with Tone.js

Returns boolean: True if the note is a valid note, false otherwise

CABLES

CABLES
Static Members
.now()

current time in milliseconds

CABLES.Timer

new Timer()

Measuring time

Instance Members
.isPlaying(): Boolean

returns true if timer is playing

Returns Boolean: value
.update(): Number

update timer

Returns Number: time
.getMillis(): Number
Returns Number: time in milliseconds
.get(): Number
Returns Number: value time in seconds
.togglePlay()

toggle between play/pause state

.setTime(t: any, time: Number)

set current time

.play()

(re)starts the timer

.pause()

pauses the timer

onPlayPause(cb: any, callback: Function)

adds callback, which will be executed it playing state changed

Type: Function
onTimeChange(cb: any, callback: Function)

adds callback, which will be executed when the current time changes

Type: Function