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?)
setSource(source)
draw(time)
play(beforeDraw)
stop()
destroy(keepState)
restoreContext()

Ticker

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

new Ticker()
Instance Members
start()
stop()
draw(time)
add(instance)
remove(instance)

kamposConfig

kamposConfig

Type: Object

Properties
effects (Array<effectConfig>)
ticker (Ticker?)
noSource (boolean?)
beforeDraw (function?) : function to run before each draw call. If it returns false kampos#draw will not be called.
onContextLost (function?)
onContextRestored (function?)
onContextCreationError (function?)

kamposSource

kamposSource

Type: Object

Properties
media ((ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap))
width (number)
height (number)

effectConfig

effectConfig

Type: Object

Properties
vertex (shaderConfig)
fragment (shaderConfig)
attributes (Array<Attribute>)
uniforms (Array<Uniform>)
varying (Object)
textures (Array<textureConfig>)

shaderConfig

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

Attribute

Type: Object

Properties
name (string)
size (number)
type (string)
data (ArrayBufferView)

Uniform

Uniform

Type: Object

Properties
name (string)
size (number?) : defaults to data.length
type (string)
data (Array)

textureConfig

textureConfig

Type: Object

Properties
format (string)
data ((ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap)?)
update (boolean?) : defaults to false
wrap ((string | {x: string, y: string})?) : with values 'stretch'|'repeat'|'mirror' , defaults to 'stretch'

effects

effects
Static Members
brightnessContrast(params?)
hueSaturation(params?)
blend(params?)
alphaMask(params?)
duotone(params?)
displacement(params?)
turbulence(params)

brightnessContrastEffect

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

hueSaturationEffect

Type: Object

Properties
hue (number)
saturation (number)
hueDisabled (boolean)
saturationDisabled (boolean)
Example
effect.hue = 45;
effect.saturation = 0.8;

blendEffect

blendEffect

Type: Object

Properties
color (Array<number>) : backdrop solid color as Array of 4 numbers, normalized (0.0 - 1.0)
image ((ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap)) : to use as backdrop
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
mask ((ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap))
disabled (boolean)
isLuminance (boolean)
Example
const img = new Image();
img.src = 'picture.png';
effect.mask = img;
effect.disabled = true;

duotoneEffect

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

displacementEffect

Type: Object

Properties
map ((ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap))
scale ({x: number?, y: number?})
disabled (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;

transitions

transitions
Static Members
fadeTransition()
displacementTransition(params?)
dissolveTransition(params?)

fadeTransitionEffect

fadeTransitionEffect

Type: Object

Properties
to ((ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap)) : media source to transition into
progress (number) : number between 0.0 and 1.0
disabled (boolean)
Example
effect.to = document.querySelector('#video-to');
effect.progress = 0.5;

displacementTransitionEffect

displacementTransitionEffect

Type: Object

Properties
to ((ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap)) : media source to transition into
map ((ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap)) : displacement map to use
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

dissolveTransitionEffect

Type: Object

Properties
to ((ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap)) : media source to transition into
map ((ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap)) : dissolve map to use
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]
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