Kampos

You can import the full build containing the core engine, ticker, effects, and transitions, or import specific modules directly from the source files to reduce bundle size.

// Import the default build
import { Kampos, Ticker, effects, transitions } from 'kampos';

// Or import specific modules directly from source
import Kampos from './node_modules/kampos/src/kampos';
import duotone from './node_modules/kampos/src/effects/duotone';
import displacement from './node_modules/kampos/src/effects/displacement';

You can install kampos using your preferred package manager. To install the full package via npm, run:

npm install kampos

To use kampos, create an instance of Kampos by providing a target (a <canvas> element) and an array of effects. Use setSource(media) to specify the input media (like a <video> or <img>) and play() to start the compositor.

import { Kampos, effects } from 'kampos';

const target = document.querySelector('canvas');
const media = document.querySelector('video');

// Create an effect and configure its properties
const hueSaturation = effects.hueSaturation();
hueSaturation.hue = 90;

// Initialize Kampos with the target canvas and the effect list
const kampos = new Kampos({ target, effects: [hueSaturation] });

// Set the input media and start playback
kampos.setSource(media);
kampos.play();

Use setSource() to provide the media (image, video, canvas, etc.) that will be processed by the effects.

Supported Source Types

You can pass:

• ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap
• A kamposSource object: { media, width, height, shouldUpdate? }

Behavior

• If the source is a HTMLVideoElement or HTMLCanvasElement, shouldUpdate defaults to true.
• The target canvas is automatically resized to match the source dimensions.
• If skipTextureCreation is false (default), textures are created immediately.

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

Call destroy() to stop the animation loop and free all WebGL resources (textures, framebuffers, etc.).

• destroy(false) (default): Stops the loop, destroys WebGL resources, and removes event listeners for context loss/creation errors. This effectively resets the instance.
• destroy(true): Keeps the source state (media, dimensions) cached so the instance can be re-initialized more easily.

kampos.destroy();

Kampos provides methods to manage the rendering loop.

play(beforeDraw, afterDraw)

Starts the animation loop.

• If a ticker was provided in the constructor, Kampos is added to that ticker.
• If no ticker was provided, it uses window.requestAnimationFrame internally.
• You can optionally pass beforeDraw and afterDraw functions to override or set the lifecycle callbacks.

stop()

Stops the animation loop. If a ticker is used, Kampos is removed from it. If using requestAnimationFrame, the loop is cancelled.

// Start playing
kampos.play((time) => {
  // logic before draw
}, (time) => {
  // logic after draw
});

// Stop playing
kampos.stop();

An effect is defined by the effectConfig type. It specifies the shaders and the data (uniforms, attributes, textures) required for the effect to run.

effectConfig Structure

• vertex: shaderConfig for the vertex shader.
• fragment: shaderConfig for the fragment shader.
• attributes: Array of Attribute objects.
• uniforms: Array of Uniform objects.
• varying: Object defining varying variables.
• textures: Array of textureConfig objects.

// Example of the structure required for an effect
const effect = {
  vertex: { main: '...' },
  fragment: { main: '...' },
  attributes: [],
  uniforms: [],
  varying: {},
  textures: []
};

Use these constants to specify the direction and effect type for shapeTransition:

Directions:

• shapeTransition.DIRECTION_TOP_LEFT (1)
• shapeTransition.DIRECTION_TOP (2)
• shapeTransition.DIRECTION_TOP_RIGHT (3)
• shapeTransition.DIRECTION_LEFT (4)
• shapeTransition.DIRECTION_CONSTANT (5)
• shapeTransition.DIRECTION_RIGHT (6)
• shapeTransition.DIRECTION_BOTTOM_LEFT (7)
• shapeTransition.DIRECTION_BOTTOM (8)
• shapeTransition.DIRECTION_BOTTOM_RIGHT (9)

Effects:

• shapeTransition.COLOR_TRANSITION (1): Transition using a color overlay.
• shapeTransition.ALPHA_TRANSITION (2): Transition using transparency.
• shapeTransition.APPEAR_ALPHA (3): Transition from a transparent canvas to the source media.