kampos 0.14.6 | Documentation

Kampos

Initialize a WebGL target with effects.

new Kampos(config: kamposConfig)

Parameters

config (kamposConfig)

Example

import { Kampos, effects} from 'kampos';

const target = document.querySelector('#canvas');
const hueSat = effects.hueSaturation();
const kampos = new Kampos({target, effects: [hueSat]});

Instance Members

▸ init(config?)

Initializes a Kampos instance. This is called inside the constructor, but can be called again after effects have changed or after Kampos#destroy.

init(config: kamposConfig?): boolean

Parameters

config (kamposConfig?) defaults to this.config

Returns

boolean: success whether initializing of the context and program were successful

▸ setSource(source, skipTextureCreation?)

Set the source config.

Parameters

skipTextureCreation (boolean?) defaults to false

Example

const media = document.querySelector('#video');
kampos.setSource(media);

▸ draw(time?)

Draw current scene.

draw(time: number?)

Parameters

time (number?)

▸ play(beforeDraw?, afterDraw?)

Starts the animation loop.

If a Ticker is used, this instance will be added to that Ticker.

play(beforeDraw: function?, afterDraw: function?)

Parameters

beforeDraw (function?) function to run before each draw call

afterDraw (function?) function to run after each draw call

▸ stop()

Stops the animation loop.

If a Ticker is used, this instance will be removed from that Ticker.

stop()

▸ destroy(keepState?)

Stops the animation loop and frees all resources.

destroy(keepState: boolean?)

Parameters

keepState (boolean?) for internal use.

▸ restoreContext()

Restore a lost WebGL context fot the given target. This will replace canvas DOM element with a fresh clone.

restoreContext(): boolean

Returns

boolean: success whether forcing a context restore was successful

Ticker

Initialize a ticker instance for batching animation of multiple Kampos instances.

new Ticker()

Instance Members

▸ start()

Starts the animation loop.

start()

▸ stop()

Stops the animation loop.

stop()

▸ draw(time)

Invoke .draw() on all instances in the pool.

draw(time: number)

Parameters

time (number)

▸ add(instance)

Add an instance to the pool.

add(instance: Kampos)

Parameters

instance (Kampos)

▸ remove(instance)

Remove an instance form the pool.

remove(instance: Kampos)

Parameters

instance (Kampos)

kamposConfig

Type: Object

Properties

target (HTMLCanvasElement)

effects (Array<effectConfig>)

plane (planeConfig)

ticker (Ticker?)

noSource (boolean?)

beforeDraw (function?) : function to run before each draw call. If it returns false kampos#draw will not be called.

afterDraw (function?) : function to run after each draw call.

onContextLost (function?)

onContextRestored (function?)

onContextCreationError (function?)

kamposSource

Type: Object

Properties

width (number)

height (number)

shouldUpdate (boolean?) : whether to resample the source on each draw call

effectConfig

Type: Object

Properties

vertex (shaderConfig)

fragment (shaderConfig)

attributes (Array<Attribute>)

uniforms (Array<Uniform>)

varying (Object)

textures (Array<textureConfig>)

shaderConfig

Type: Object

Properties

main (string?)

source (string?)

constant (string?)

uniform (Object?) : mapping variable name to type

attribute (Object?) : mapping variable name to type

Attribute

Type: Object

Properties

extends (string) : name of another attribute to extend

name (string) : name of attribute to use inside the shader

size (number) : attribute size - number of elements to read on each iteration

type (string)

data (ArrayBufferView)

Uniform

Type: Object

Properties

name (string) : name of the uniform to be used in the shader

size (number?) : defaults to data.length

type (string)

data (Array)

textureConfig

Type: Object

Properties

format (string)

update (boolean?) : defaults to false

wrap ((string | {x: string, y: string})?) : with values 'stretch'|'repeat'|'mirror' , defaults to 'stretch'

utilities

Static Members

▸ resolution(params?)

Exposes the u_resolution uniform for use inside fragment shaders.

resolution(params: Object?): resolutionUtility

Parameters

params (Object?)

Name	Description
params.width `number?`	initial canvas width. Defaults to `window.innerWidth` .
params.height `number?`	initial canvas height. Defaults to `window.innerHeight` .

Returns

resolutionUtility:

Example

resolution({width: 1600, height: 900})

▸ mouse(params?)

Exposes the u_mouse uniform for use inside fragment shaders. Note that internally the y coordinate is inverted to match the WebGL coordinate system.

mouse(params: Object?): mouseUtility

Parameters

params (Object?)

Name	Description
params.initial `{x: number?, y: number?}?`	initial mouse position. Defaults to `{x: 0, y: 0}` .

Returns

mouseUtility:

Example

mouse({initial: {x: 0.5, y: 0.5}})

▸ circle()

Exposes the circle function to be used by effects. This function takes a point, radius, and spread, and returns a value between 0 and 1.

circle(): circleUtility

Returns

circleUtility:

Example

circle()

resolutionUtility

Type: Object

Properties

resolution ({width: number?, height: number?})

Example

mouse.resolution = {width: 854, height: 480};

mouseUtility

Type: Object

Properties

position ({x: number?, y: number?})

Example

mouse.position = {x: 0.4, y: 0.2};

circleUtility

Type: Object

Example

float aspectRatio = u_resolution.x / u_resolution.y;
vec2 st_ = gl_FragCoord.xy / u_resolution;
float circle_ = circle(
     vec2(st_.x * aspectRatio, st_.y),
     vec2(u_mouse.x * aspectRatio, u_mouse.y),
     0.35,
     0.1
);

effects

Static Members

▸ brightnessContrast(params?)

brightnessContrast(params: Object?): brightnessContrastEffect

Parameters

params (Object?)

Name	Description
params.brightness `number` (default `1.0`)	initial brightness to use.
params.contrast `number` (default `1.0`)	initial contrast to use.

Properties

brightness (number)

contrast (number)

Returns

brightnessContrastEffect:

Example

brightnessContrast({brightness: 1.5, contrast: 0.8})

▸ hueSaturation(params?)

hueSaturation(params: Object?): hueSaturationEffect

Parameters

params (Object?)

Name	Description
params.hue `number` (default `0.0`)	initial hue value
params.saturation `number` (default `1.0`)	initial saturation value

Properties

hue (number) : rotation in degrees

saturation (number)

Returns

hueSaturationEffect:

Example

hueSaturation({hue: 45, saturation: 1.3})

▸ blend(params?)

blend(params: Object?): blendEffect

Parameters

params (Object?)

Name	Description
params.mode `("normal" \| "multiply" \| "screen" \| "overlay" \| "darken" \| "lighten" \| "color-dodge" \| "color-burn" \| "hard-light" \| "soft-light" \| "difference" \| "exclusion" \| "hue" \| "saturation" \| "color" \| "luminosity")` (default `'normal'`)	blend mode to use
params.color `Array<number>` (default `[0,0,0,1]`)	Initial color to use when blending to a solid color

Returns

blendEffect:

Example

blend('colorBurn')

▸ alphaMask(params?)

alphaMask(params: Object?): alphaMaskEffect

Parameters

params (Object?)

Name	Description
params.isLuminance `boolean` (default `false`)	whether to use luminance when reading mask values

Returns

alphaMaskEffect:

Example

alphaMask()

▸ duotone(params?)

duotone(params: Object?): duotoneEffect

Parameters

params (Object?)

Name	Description
params.dark `Array<number>` (default `[0.741,0.0431,0.568,1]`)	initial dark color to use.
params.light `Array<number>` (default `[0.988,0.733,0.051,1]`)	initial light color to use.

Returns

duotoneEffect:

Example

duotone({dark: [0.2, 0.11, 0.33, 1], light: [0.88, 0.78, 0.43, 1]})

▸ displacement(params?)

displacement(params: Object?): displacementEffect

Parameters

params (Object?)

Name	Description
params.wrap `string?`	wrapping method to use. Defaults to `displacement.CLAMP` .
params.scale `{x: number, y: number}?`	initial scale to use for x and y displacement. Defaults to `{x: 0.0, y: 0.0}` which means no displacement.
params.enableBlueChannel `boolean?`	enable blue channel for displacement intensity. Defaults to `false` .

Properties

CLAMP (string) : stretch the last value to the edge. This is the default behavior.

DISCARD (string) : discard values beyond the edge of the media - leaving a transparent pixel.

WRAP (string) : continue rendering values from opposite direction when reaching the edge.

Returns

displacementEffect:

Example

displacement({wrap: displacement.DISCARD, scale: {x: 0.5, y: -0.5}})

▸ turbulence(params)

turbulence(params: object): turbulenceEffect

Parameters

params (object)

Name	Description
params.noise `string`	3D noise implementation to use.
params.output `string?`	how to output the `turbulenceValue` variable. Use `turbulence.COLOR` or `turbulence.ALPHA` for outputting to color or alpha correspondingly. Defaults to `turbulence.COLOR` .
params.frequency `{x: number, y: number}` (default `{x:0.0,y:0.0}`)	initial frequencies to use for x and y axes.
params.octaves `number` (default `1`)	initial number of octaves to use for turbulence noise generation.
params.isFractal `boolean` (default `false`)	initial number of octaves to use for turbulence noise generation.
params.time `number` (default `0`)	initial time for controlling initial noise value.
params.input `string?`	how to define `turbulenceSeed` . Defaults to `turbulence.FRAGCOORD_XY_TIME` .

Properties

COLOR (string)

ALPHA (string)

Returns

turbulenceEffect:

Example

turbulence({noise: kampos.noise.simplex, output: turbulence.COLOR, octaves: 4, isFractal: true})

▸ kaleidoscope(params?)

kaleidoscope(params: Object?): kaleidoscopeEffect

Parameters

params (Object?)

Name	Description
params.segments `number` (default `6`)	number of times the view is divided.
params.offset `number` (default `{x:0.0,y:0.0}`)	offset to move the source media from the center.
params.rotation `number` (default `0`)	extra angle to rotate the view.

Returns

kaleidoscopeEffect:

Example

kaleidoscope({segments: 12})

▸ deformation(params?)

Depends on the resolution utility. Depends on the mouse utility.

deformation(params: Object?): deformationEffect

Parameters

params (Object?)

Name	Description
params.radius `number?`	initial radius to use for circle of effect boundaries. Defaults to 0 which means no effect.
params.wrap `string?`	wrapping method to use. Defaults to `deformation.CLAMP` .
params.deformation `string?`	deformation method to use within the radius. Defaults to `deformation.NONE` .

Returns

deformationEffect:

Example

deformation({radius: 0.1, wrap: deformation.CLAMP, deformation: deformation.TUNNEL})

▸ channelSplit(params?)

channelSplit(params: Object?): channelSplitEffect

Parameters

params (Object?)

Name	Description
params.offsetRed `{x: number?, y: number?}?`	initial offset to use for red channel offset. Defaults to `{x: 0.0, y: 0.0}` which means no offset.
params.offsetGreen `{x: number?, y: number?}?`	initial offset to use for green channel offset. Defaults to `{x: 0.0, y: 0.0}` which means no offset.
params.offsetBlue `{x: number?, y: number?}?`	initial offset to use for blue channel offset. Defaults to `{x: 0.0, y: 0.0}` which means no offset.
params.offsetInputR `string?`	code to use as input for the red offset. Defaults to `u_channelOffsetR` .
params.offsetInputG `string?`	code to use as input for the green offset. Defaults to `u_channelOffsetG` .
params.offsetInputB `string?`	code to use as input for the blue offset. Defaults to `u_channelOffsetB` .

Returns

channelSplitEffect:

Example

channelSplit({offsetRed: {x: 0.02, y: 0.0}})

▸ slitScan(params)

slitScan(params: Object): slitScanEffect

Parameters

params (Object)

Name	Description
params.noise `noise`	2D noise implementation to use.
params.time `number` (default `0.0`)	initial time for controlling initial noise value.
params.intensity `number` (default `0.1`)	initial intensity to use.
params.frequency `number?`	initial frequency to use .
params.direction `string` (default `'x'`)	direction to apply the slit scan effect.
params.offsetInput `string?`	code to use as input for adding offset. Defaults to empty.

Returns

slitScanEffect:

Example

slitScan({intensity: 0.5, frequency: 3.0})

brightnessContrastEffect

Type: Object

Properties

brightness (number)

contrast (number)

brightnessDisabled (boolean)

contrastDisabled (boolean)

Example

effect.brightness = 1.5;
effect.contrast = 0.9;
effect.contrastDisabled = true;

hueSaturationEffect

Type: Object

Properties

hue (number)

saturation (number)

hueDisabled (boolean)

saturationDisabled (boolean)

Example

effect.hue = 45;
effect.saturation = 0.8;

blendEffect

Type: Object

Properties

color (Array<number>) : backdrop solid color as Array of 4 numbers, normalized (0.0 - 1.0)

disabled (boolean)

Example

const img = new Image();
img.src = 'picture.png';
effect.color = [0.3, 0.55, 0.8, 1.0];
effect.image = img;

alphaMaskEffect

Multiplies alpha value with values read from mask media source.

alphaMaskEffect

Type: Object

Properties

disabled (boolean)

isLuminance (boolean)

Example

const img = new Image();
img.src = 'picture.png';
effect.mask = img;
effect.disabled = true;

duotoneEffect

Type: Object

Properties

light (Array<number>) : Array of 4 numbers, normalized (0.0 - 1.0)

dark (Array<number>) : Array of 4 numbers, normalized (0.0 - 1.0)

disabled (boolean)

Example

effect.light = [1.0, 1.0, 0.8];
effect.dark = [0.2, 0.6, 0.33];

displacementEffect

Type: Object

Properties

scale ({x: number?, y: number?})

disabled (boolean)

enableBlueChannel (boolean)

Example

const img = new Image();
img.src = 'disp.jpg';
effect.map = img;
effect.scale = {x: 0.4};

turbulenceEffect

Generates a turbulence/fractal noise value stored into turbulenceValue. Depends on a noise(vec3 P) function to be declared and injected via the noise param, for example, simply supplying the perlinNoiseEffect.

turbulenceEffect

Type: Object

Properties

frequency ({x: number?, y: number?})

octaves (number)

isFractal (boolean)

Example

effect.frequency = {x: 0.0065};
effect.octaves = 4;
effect.isFractal = true;

kaleidoscopeEffect

Type: Object

Properties

segments (number)

offset ({x: number?, y: number?})

rotation (number)

disabled (boolean)

Example

effect.segments = 8;
effect.offset = { x: 0.5, y: 0.5 };
effect.rotation = 45;

deformationEffect

Type: Object

Properties

disabled (boolean)

radius (number)

Example

effect.disabled = true;
effect.radius = 0.253;

channelSplitEffect

Type: Object

Properties

disabled (boolean)

offsetRed ({x: number?, y: number?})

offsetGreen ({x: number?, y: number?})

offsetBlue ({x: number?, y: number?})

Example

effect.offsetRed = { x: 0.1, y: 0.0 };

slitScanEffect

Type: Object

Properties

disabled (boolean)

intensity (number)

frequency (number)

time (number)

Example

effect.intensity = 0.5;
effect.frequency = 3.5;

transitions

Static Members

▸ fadeTransition()

fadeTransition(): fadeTransitionEffect

Returns

fadeTransitionEffect:

Example

fadeTransition()

▸ displacementTransition(params?)

displacementTransition(params: Object?): displacementTransitionEffect

Parameters

params (Object?)

Returns

displacementTransitionEffect:

Example

displacementTransition()

▸ dissolveTransition(params?)

dissolveTransition(params: Object?): dissolveTransitionEffect

Parameters

params (Object?)

Name	Description
params.low `number` (default `0.0`)	initial lower edge of intersection step
params.high `number` (default `0.01`)	initial higher edge of intersection step
params.color `Array<number>` (default `[0,0,0,0]`)	color to transition to if not transitioning to media
params.textureEnabled `boolean` (default `true`)	whether to enable transition to texture instead of color

Returns

dissolveTransitionEffect:

Example

dissolveTransition()

fadeTransitionEffect

Type: Object

Properties

progress (number) : number between 0.0 and 1.0

disabled (boolean)

Example

effect.to = document.querySelector('#video-to');
effect.progress = 0.5;

displacementTransitionEffect

Type: Object

Properties

progress (number) : number between 0.0 and 1.0

sourceScale ({x: number?, y: number?}) : displacement scale values of source media

toScale ({x: number?, y: number?}) : displacement scale values of target media

disabled (boolean)

Example

const img = new Image();
img.src = 'disp.jpg';
effect.map = img;
effect.to = document.querySelector('#video-to');
effect.sourceScale = {x: 0.4};
effect.toScale = {x: 0.8};

dissolveTransitionEffect

Type: Object

Properties

color (Array<number>) : a solid color to transition to with alpha channel, Array of 4 number in range [0.0, 1.0]

low (number) : lower edge of intersection step, in range [0.0, 1.0]

high (number) : higher edge of intersection step, in range [0.0, 1.0]

progress (number) : number in range [0.0, 1.0]

textureEnabled (boolean) : whether to enable transitioning to texture instead of color

disabled (boolean)

Example

const img = new Image();
img.src = 'dissolve.jpg';
effect.map = img;
effect.to = document.querySelector('#video-to');
effect.progress = 0.5;

perlin-noise-3d

Implementation of a 3D classic Perlin noise. Exposes a noise(vec3 P) function for use inside fragment shaders.

perlin-noise-3d

cellular-noise-3d

Cellular noise ("Worley noise") in 3D in GLSL. Exposes a noise(vec3 P) function for use inside fragment shaders.

cellular-noise-3d

simplex-3d

Implementation of a 3D Simplex noise. Exposes a noise(vec3 v) function for use inside fragment shaders.

simplex-3d

simplex-2d

Implementation of a 2D Simplex noise. Exposes a noise(vec2 v) function for use inside fragment shaders.

simplex-2d

white

Implementation of white noise with 3 seeds. Exposes a noise(vec3 seed) function for use inside fragment shaders.

white

planeConfig

Type: Object