Kampos

https://github.com/wix-incubator/kampos
Admin
Kampos is a tiny and fast WebGL-based effects compositor that allows adding filter effects and...
Tokens:18,306
Snippets:85
Trust Score:9.7
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Installation

Source: https://github.com/wix-incubator/kampos/blob/master/README.md

Command to install kampos using npm.

```bash
npm install kampos
```

--------------------------------

### Kampos Initialization Example

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Demonstrates how to initialize a Kampos instance with a target element and a hue-saturation effect.

```javascript
import { Kampos, effects} from 'kampos';

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

--------------------------------

### Example Usage of Channel Split

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Shows an example of applying the channel split effect with a specified red channel offset.

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

--------------------------------

### Building Locally

Source: https://github.com/wix-incubator/kampos/blob/master/README.md

Commands to install dependencies and build the project locally.

```bash
npm install
npm run build
```

--------------------------------

### Basic Usage Example

Source: https://github.com/wix-incubator/kampos/blob/master/README.md

Demonstrates how to initialize Kampos with a target canvas, apply a hue saturation effect, set a media source, and play the effect.

```javascript
import { Kampos, effects } from 'kampos';

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

const hueSaturation = effects.hueSaturation();
hueSaturation.hue = 90;

const kampos = new Kampos({ target, effects: [hueSaturation] });

kampos.setSource(media);
kampos.play();
```

--------------------------------

### Kampos setSource Example

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Shows how to set a media element (e.g., a video) as the source for Kampos rendering.

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

--------------------------------

### GLSL Shader Example with Kampos Utilities

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

An example GLSL fragment shader demonstrating the use of `u_resolution`, `u_mouse`, and the `circle` utility function to draw a circular effect.

```glsl
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
);
```

--------------------------------

### Water Benchmark SVG and JavaScript Setup

Source: https://github.com/wix-incubator/kampos/blob/master/demo/water-svg.html

This snippet demonstrates the HTML and SVG structure required for the Water Benchmark, including CSS for styling and JavaScript for dynamically setting the image source and handling its loading. It uses a Promise to ensure the image is fully loaded before proceeding.

```html
html, body { height: 100%; margin: 0; }
svg { position: absolute; width: 0; height: 0; }
#source { filter: url(#cloudy); }
```

```javascript
const source = document.getElementById("source");
const width = window.innerWidth;
const height = window.innerHeight;
source.src = `https://picsum.photos/id/606/${width}/${height}`;

const ready = new Promise((resolve) => {
  const done = () => {
    // width = source.naturalWidth;
    // height = source.naturalHeight;
    resolve();
  };
  if (source.complete) {
    done();
    return;
  }
  source.onload = done;
});
await ready;
```

--------------------------------

### Example Usage of Deformation

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Demonstrates how to use the deformation effect with specific parameters for radius, wrap, and deformation type.

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

--------------------------------

### Example Usage of Slit Scan

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Illustrates the usage of the slit scan effect with custom intensity and frequency values.

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

--------------------------------

### Ticker API Documentation

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Details the Ticker class for batching animation of multiple Kampos instances. Covers starting and stopping the animation loop, drawing, and managing instances within the pool.

```APIDOC
Ticker:
  __constructor()
    Initializes a ticker instance for batching animation.

  start():
    Starts the animation loop.

  stop():
    Stops the animation loop.

  draw(time):
    Invokes `.draw()` on all instances in the pool.
    Parameters:
      time (number): The current time for animation.

  add(instance):
    Adds a Kampos instance to the pool.
    Parameters:
      instance (Kampos): The Kampos instance to add.

  remove(instance):
    Removes a Kampos instance from the pool.
    Parameters:
      instance (Kampos): The Kampos instance to remove.
```

--------------------------------

### flowmapGridDisplacementEffect Properties and Usage

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Defines the properties for the flowmapGridDisplacementEffect, including the FBO map, aspect ratio, intensity, and channel split settings. It also provides an example of how to use this effect within the Kampos constructor.

```javascript
const flowmapGrid = fbo.flowmapGrid();
const flowmapDisp = effects.flowmapGridDisplacement({ intenisity: 0.1 });
const instance = new Kampos({
     target,
     effects: [flowmapDisp],
     fbo: {
         size: 64,
         effects: [flowmapGrid]
     }
 });
```

--------------------------------

### Running Tests

Source: https://github.com/wix-incubator/kampos/blob/master/README.md

Command to execute the project's tests.

```bash
npm run test
```

--------------------------------

### Kampos Class Methods

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Provides an overview of the methods available on the Kampos class, used for managing visual instances, setting sources, drawing, and controlling playback.

```javascript
class Kampos {
  // Initializes a new Kampos instance.
  init(): void;

  // Sets the source for the Kampos instance.
  setSource(source: kamposSource): void;

  // Draws the current frame.
  draw(): void;

  // Starts the animation playback.
  play(): void;

  // Stops the animation playback.
  stop(): void;

  // Destroys the Kampos instance and cleans up resources.
  destroy(): void;

  // Restores the rendering context.
  restoreContext(): void;
}
```

--------------------------------

### Initialize Kampos and Effects

Source: https://github.com/wix-incubator/kampos/blob/master/index.html

Demonstrates how to initialize Kampos with multiple targets, apply turbulence and custom fragment shaders, and manage offscreen rendering. It also shows how to update uniforms like resolution and pointer position.

```javascript
import { Kampos, effects, noise } from './index.js';

const target = document.querySelector('#target');
const targetCtx = target.getContext('bitmaprenderer');
const target2 = document.querySelector('#target2');
const target2Ctx = target2.getContext('bitmaprenderer');
const target3 = document.querySelector('#target3');
const target3Ctx = target3.getContext('bitmaprenderer');
const target4 = document.querySelector('#target4');
const target4Ctx = target4.getContext('bitmaprenderer');

const body = document.body;
const width = body.clientWidth / 2;
const height = body.clientHeight;

target.width = width;
target.height = height;
target2.width = width;
target2.height = height;

const offscreen = new OffscreenCanvas(width, height);

const mousePosition = [0.5, 0.5];
const mousePosition2 = [0.5, 0.5];

const turbulence = effects.turbulence({
  noise: noise.simplex,
  output: '\n',
});

const getRender = (c, d, mouse) => ({
  fragment: {
    uniform: {
      u_resolution: 'vec2',
      u_pointer: 'vec2',
    },
    constant: `
      vec3 A = vec3(0.5);
      vec3 B = vec3(0.5);
      vec3 C = vec3(${c});
      vec3 D = vec3(${d});
      vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
        return a + b * cos(6.28318 * (c * t + d));
      }
    `,
    main: `
      vec2 st = gl_FragCoord.xy / u_resolution.xy;
      float dist = distance(u_pointer, st);
      alpha = smoothstep(turbulenceValue * 0.2, 0.2 + turbulenceValue * 0.2, dist);
      color = palette(turbulenceValue, A, B, C, D);
    `,
  },
  uniforms: [
    {
      name: 'u_resolution',
      type: 'f',
      data: [width, height],
    },
    {
      name: 'u_pointer',
      type: 'f',
      data: mouse,
    },
  ],
  get mouse() {
    return this.uniforms[1].data;
  },
  set mouse(data) {
    this.uniforms[1].data[0] = data[0];
    this.uniforms[1].data[1] = data[1];
  },
});

const render = getRender(
  [1.0, 0.7, 0.4],
  [0.0, 0.15, 0.2],
  mousePosition,
);

const render2 = getRender(
  [0.0, 0.9, 0.6],
  [0.6, 0.15, 0.5],
  mousePosition2,
);

const FREQUENCY = 2 / (width > height ? width : height);
turbulence.frequency = { x: FREQUENCY, y: FREQUENCY };
turbulence.octaves = 6;

const instance = new Kampos({
  target: offscreen,
  effects: [turbulence, render],
  noSource: true,
});

const instance2 = new Kampos({
  target: offscreen,
  effects: [turbulence, render2],
  noSource: true,
});

const source = { width, height };

instance.play(
  (time) => {
    instance.setSource(source, true);
    render.mouse = mousePosition;
    turbulence.time = time * 2;
  },
  () => {
    const bitmap = offscreen.transferToImageBitmap();
    targetCtx.transferFromImageBitmap(bitmap);
  },
);

instance2.play(
  (time) => {
    instance.setSource(source, true);
    render2.mouse = mousePosition2;
    turbulence.time = time * 3;
  },
  () => {
    const bitmap = offscreen.transferToImageBitmap();
    target2Ctx.transferFromImageBitmap(bitmap);
  },
);

document.body.addEventListener('mousemove', (e) => {
  mousePosition[0] = e.clientX / width;
  mousePosition2[0] = (e.clientX - width) / width;
  mousePosition[1] = (height - e.clientY) / height;
  mousePosition2[1] = (height - e.clientY) / height;
});

const video = document.querySelector('#video');
video.addEventListener(
  'timeupdate',
  () => {
    cons
```

--------------------------------

### Importing Kampos

Source: https://github.com/wix-incubator/kampos/blob/master/README.md

Shows different ways to import Kampos and its modules, including the default build and specific effects/transitions.

```javascript
import { Kampos, Ticker, effects, transitions } from 'kampos';
```

```javascript
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';
```

--------------------------------

### Kampos API Documentation

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Provides an overview of the Kampos class, its constructor, and instance members for managing WebGL rendering and effects. Includes details on initialization, source setting, drawing, animation control, and context restoration.

```APIDOC
Kampos:
  __constructor(config: kamposConfig)
    Initializes a WebGL target with effects.
    Parameters:
      config (kamposConfig): Configuration object including target and effects.

  init(config?):
    Initializes a Kampos instance. Can be called again after effects change or after destroy.
    Parameters:
      config (kamposConfig?): Configuration object, defaults to this.config.
    Returns:
      boolean: True if initialization was successful.

  setSource(source, skipTextureCreation?):
    Sets the source for rendering.
    Parameters:
      source (ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | kamposSource): The media source.
      skipTextureCreation (boolean?): Defaults to false. If true, skips texture creation.

  draw(time?):
    Draws the current scene.
    Parameters:
      time (number?): The current time for animation.

  play(beforeDraw?, afterDraw?):
    Starts the animation loop. Adds the instance to a Ticker if used.
    Parameters:
      beforeDraw (function?): Function to run before each draw call.
      afterDraw (function?): Function to run after each draw call.

  stop():
    Stops the animation loop. Removes the instance from a Ticker if used.

  destroy(keepState?):
    Stops the animation loop and frees all resources.
    Parameters:
      keepState (boolean?): For internal use.

  restoreContext():
    Restores a lost WebGL context by replacing the canvas DOM element with a fresh clone.
    Returns:
      boolean: True if context restore was successful.
```

--------------------------------

### Kampos Configuration Schema

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Defines the configuration object for initializing Kampos, including target canvas, effects, source media, and callback functions.

```APIDOC
kamposConfig:
  target: HTMLCanvasElement - The canvas element to render on.
  effects: Array<effectConfig> - An array of effect configurations to apply.
  plane: planeConfig - Configuration for the rendering plane.
  fbo: fboConfig - Frame buffer object configuration.
  ticker?: Ticker - Optional ticker for animation control.
  noSource?: boolean - If true, skips source processing.
  beforeDraw?: function - Function to run before each draw call. If it returns false, draw is skipped.
  afterDraw?: function - Function to run after each draw call.
  onContextLost?: function - Callback for WebGL context loss.
  onContextRestored?: function - Callback for WebGL context restoration.
  onContextCreationError?: function - Callback for WebGL context creation errors.
```

--------------------------------

### Apply Duotone Effect to Video

Source: https://github.com/wix-incubator/kampos/blob/master/index.html

This snippet demonstrates how to initialize Kampos with a duotone effect and play a video. It includes setting the video source and handling playback completion to transfer the video frame as an ImageBitmap.

```javascript
const duotone = effects.duotone();
const instance3 = new Kampos({
  target: offscreen,
  effects: [duotone],
});
const width = video.videoWidth;
const height = video.videoHeight;
const source = { media: video, width, height };
target3.width = width;
target3.height = height;
instance3.setSource(source);
instance3.play(
  (time) => {
    instance3.setSource(source, true);
  },
  () => {
    const bitmap = offscreen.transferToImageBitmap();
    target3Ctx.transferFromImageBitmap(bitmap);
  },
);
```

```javascript
const video2 = document.querySelector('#video2');
video2.addEventListener('timeupdate', () => {
  const duotone = effects.duotone({
    light: [1, 1, 1, 1],
    dark: [0, 0, 0, 1],
  });
  const instance4 = new Kampos({
    target: offscreen,
    effects: [duotone],
  });
  const width = video2.videoWidth;
  const height = video2.videoHeight;
  const source = { media: video2, width, height };
  target4.width = width;
  target4.height = height;
  instance4.setSource(source);
  instance4.play(
    (time) => {
      instance4.setSource(source, true);
    },
    () => {
      const bitmap = offscreen.transferToImageBitmap();
      target4Ctx.transferFromImageBitmap(bitmap);
    },
  );
}, { once: true });
```

--------------------------------

### Transitions - Static Members

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Details static methods for creating visual transitions between different states or sources, including fade, dissolve, and shape transitions.

```javascript
class Transitions {
  // Creates a fade transition.
  static fadeTransition(config: effectConfig): void;

  // Creates a displacement transition.
  static displacementTransition(config: effectConfig): void;

  // Creates a dissolve transition.
  static dissolveTransition(config: effectConfig): void;

  // Creates a shape transition.
  static shapeTransition(config: effectConfig): void;
}
```

--------------------------------

### Kampos Water Effect Initialization and Playback

Source: https://github.com/wix-incubator/kampos/blob/master/demo/water.html

Initializes Kampos instances for rendering and mapping, sets up turbulence and displacement effects, and plays the animation. It dynamically adjusts turbulence frequency based on time to create a water-like ripple effect. The source image is loaded from a URL.

```javascript
import { Kampos, effects, noise } from "../index.js";

function lerp (a, b, t) {
  return b * t + a * (1 - t);
}

const canvas = document.getElementById("target");
const mapCanvas = document.createElement("canvas");
const source = document.getElementById("source");
const width = window.innerWidth;
const height = window.innerHeight;

source.src = `https://picsum.photos/id/606/${width}/${height}`;

const ready = new Promise((resolve) => {
  const done = () => {
    resolve();
  };
  if (source.complete) {
    done();
    return;
  }
  source.onload = done;
});

await ready;

const SCALE = 15 / width;
canvas.width = width;
canvas.height = height;
mapCanvas.width = width;
mapCanvas.height = height;

const turbulence = effects.turbulence({
  noise: noise.simplex,
  frequency: { x: 0.01, y: 0.02 },
  octaves: 3,
  isFractal: false,
});

const displacement = effects.displacement({
  scale: { x: SCALE, y: SCALE },
});

displacement.map = mapCanvas;
displacement.textures[0].update = true;

const map = new Kampos({
  target: mapCanvas,
  effects: [turbulence],
  noSource: true,
});

const instance = new Kampos({
  target: canvas,
  effects: [displacement]
});

instance.setSource({
  media: source,
  width,
  height,
});

const startTime = performance.now();
const duration = 40e3;

instance.play((time) => {
  const t = ((time - startTime) % duration) / duration;
  let frequency;
  if (t <= 0.5) {
    frequency = {
      x: lerp(0.01, 0.02, t),
      y: lerp(0.02, 0.04, t)
    };
  } else {
    frequency = {
      x: lerp(0.02, 0.01, t),
      y: lerp(0.04, 0.02, t)
    };
  }
  turbulence.frequency = frequency;
  turbulence.time = time * 5;
  map.draw();
});
```

--------------------------------

### Effects - Static Members

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Lists static methods for applying various visual effects to the Kampos instance, such as brightness, hue, displacement, and more.

```javascript
class Effects {
  // Applies brightness and contrast adjustments.
  static brightnessContrast(config: effectConfig): void;

  // Adjusts hue and saturation.
  static hueSaturation(config: effectConfig): void;

  // Blends two sources.
  static blend(config: effectConfig): void;

  // Applies an alpha mask.
  static alphaMask(config: effectConfig): void;

  // Applies a duotone effect.
  static duotone(config: effectConfig): void;

  // Applies a displacement effect.
  static displacement(config: effectConfig): void;

  // Applies a turbulence effect.
  static turbulence(config: effectConfig): void;

  // Applies a kaleidoscope effect.
  static kaleidoscope(config: effectConfig): void;

  // Applies a deformation effect.
  static deformation(config: effectConfig): void;

  // Splits color channels.
  static channelSplit(config: effectConfig): void;

  // Applies a slit scan effect.
  static slitScan(config: effectConfig): void;

  // Applies flowmap grid displacement.
  static flowmapGridDisplacement(config: effectConfig): void;
}
```

--------------------------------

### Utilities - Static Members

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Exposes static utility functions for accessing global states like screen resolution and mouse position, and for geometric calculations.

```javascript
class Utilities {
  // Gets the current screen resolution.
  static resolution(): { width: number, height: number };

  // Gets the current mouse position.
  static mouse(): { x: number, y: number };

  // Calculates a circle's properties.
  static circle(x: number, y: number, radius: number): any;
}
```

--------------------------------

### Shader Configuration Schema

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Defines the configuration for a shader program, including source code, constants, uniforms, and attributes.

```APIDOC
shaderConfig:
  main?: string - The main entry point for the shader code.
  source?: string - The GLSL source code for the shader.
  constant?: string - String containing shader constants.
  uniform?: Object - Mapping of uniform variable names to their types.
  attribute?: Object - Mapping of attribute variable names to their types.
```

--------------------------------

### Kampos Demos Layout and Styling

Source: https://github.com/wix-incubator/kampos/blob/master/demo/index.html

This snippet contains the HTML structure and CSS styling for the Kampos demos page. It defines the layout for preview and content sections, navigation styling, and interactive elements like buttons and code editor appearance.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Kampos Demos</title>
  <link href="https://fonts.googleapis.com/css2?family=Nova+Round&display=swap" rel="stylesheet">
  <style>
    body { margin: 0; font-family: 'Nova round', cursive, fantasy; }
    main { display: grid; grid-template-columns: 1fr 980px; min-height: 100vh; width: 100%; overflow: clip; }
    #preview { grid-area: 1 / 1 / 2 / 3; width: 100%; height: 100vh; border: none; outline: none; }
    #section-wrapper { position: relative; grid-area: 1 / 2 / 2 / 3; transition: transform 0.5s; transform: translateX(100%); }
    #section-wrapper.open { transform: translateX(0); }
    header { text-align: right; }
    nav { position: fixed; width: 256px; z-index: 20; top: 0; }
    nav { padding-left: 1em; }
    nav ul { margin: 1rem 0; padding: 0; list-style: none; }
    nav li { padding: 1rem; background: #ffffff80; }
    nav li a { color: black; }
    button { cursor: pointer; background: linear-gradient(45deg, beige, plum); }
    .code-container { position: relative; }
    .refresh-button { position: absolute; top: 1px; right: 1em; z-index: 10; padding: 1em 2em; font-size: 16px; font-weight: bold; }
    #open-code { position: fixed; top: auto; bottom: 1em; z-index: 10; }
    #open-code::before { content: 'Code { }'; }
    #section-wrapper.open + #open-code::before { content: 'X'; }
    header button { cursor: pointer; }
    .CodeMirror { height: 100vh; opacity: 0.4; transition: opacity 0.5s; }
    .CodeMirror:hover, .CodeMirror:focus-within { opacity: 1; }
  </style>
</head>
<body>
  <main>
    <iframe id="preview" src="/demos/index.html"></iframe>
    <div id="section-wrapper">
      <header>
        <button id="open-code">Code</button>
      </header>
      <nav>
        <ul>
          <li><a href="#section4">Duotone effect with hue-rotation</a></li>
          <li><a href="#section1">Fractal noise displacement</a></li>
          <li><a href="#section2">Cross-fade</a></li>
          <li><a href="#section3">Displacement transition</a></li>
          <li><a href="#section5">Cellular noise</a></li>
          <li><a href="#section6">Dissolve transition</a></li>
          <li><a href="#section7">Dissolve Gallery</a></li>
          <li><a href="#section8">Kaleidoscope</a></li>
          <li><a href="#section9">Luminance Mask</a></li>
          <li><a href="#section10">Deformation</a></li>
          <li><a href="#section11">Channel Split</a></li>
          <li><a href="#section12">Water-like Displacement</a></li>
          <li><a href="#section13">Shape transition</a></li>
          <li><a href="#section14">Grid mouse displacement</a></li>
        </ul>
      </nav>
      <div class="code-container">
        <button class="refresh-button">Refresh</button>
        <div id="code"></div>
      </div>
    </div>
  </main>
</body>
</html>
```

--------------------------------

### HTML Structure for Kampos Water Benchmark

Source: https://github.com/wix-incubator/kampos/blob/master/demo/water.html

Provides the basic HTML structure for the Kampos water benchmark. It includes a target canvas for the main effect and a source element (initially hidden) to load the background image.

```html
html, body { height: 100%; margin: 0; }
#target { display: block; width: 100%; height: 100%; background-color: #000; }
#source { display: none; }
```

--------------------------------

### Displacement Effect Parameters

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Defines the parameters for the displacement effect, controlling input method, scaling, and blue channel usage for displacement intensity.

```APIDOC
displacement(params?)

Parameters:
params (`object`?):
  input (`string`?): Input method to use. Defaults to `displacement.TEXTURE`.
  scale (`{x: number, y: number}`?): Initial scale for x and y displacement. Defaults to `{x: 0.0, y: 0.0}`.
  enableBlueChannel (`boolean`?): Enable blue channel for displacement intensity. Defaults to `false`.

Properties:
TEXTURE (`string`): Use texture sampling as input method.
CLAMP (`string`): Stretch the last value to the edge. This is the default behavior.
DISCARD (`string`): Discard values beyond the edge of the media.
WRAP (`string`): Continue rendering values from the opposite direction when reaching the edge.

Returns:
`displacementEffect`

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

--------------------------------

### displacementTransitionEffect API

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

API documentation for the displacementTransitionEffect. This effect uses a displacement map to transition between media sources. It supports scaling for both source and target media.

```APIDOC
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 for the transition.
    progress: number - Number between 0.0 and 1.0, indicating the transition progress.
    sourceScale: {x?: number, y?: number} - Displacement scale values of the source media.
    toScale: {x?: number, y?: number} - Displacement scale values of the target media.
    disabled: boolean - Flag to disable the effect.
  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};
```

--------------------------------

### fadeTransitionEffect API

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

API documentation for the fadeTransitionEffect. This effect allows transitioning between media sources with transparency. It requires a target media source and a progress value.

```APIDOC
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, indicating the transition progress.
    disabled: boolean - Flag to disable the effect.
  Example:
    effect.to = document.querySelector('#video-to');
    effect.progress = 0.5;
```

--------------------------------

### CSS Styling for Kampos Project Page

Source: https://github.com/wix-incubator/kampos/blob/master/index.html

Provides the CSS styles used for the Kampos project page, including background gradients, font styles, layout for navigation and main content, and responsive adjustments for different screen sizes.

```css
body {
  min-height: 100vh;
  margin: 0;
  background-image: linear-gradient( -45deg, peachpuff, palegreen, plum, peachpuff, palegreen, plum ), linear-gradient( 45deg, purple, darkblue, rebeccapurple, purple, darkblue, rebeccapurple ), url('./kampos.svg');
  background-blend-mode: screen;
  background-repeat: no-repeat;
  background-position: center;
  font-family: 'Nova round', cursive, fantasy;
  font-size: 16px;
  color: darkslateblue;
}

nav > ul {
  display: flex;
  width: 100vw;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  flex: 1 auto;
  padding: 1rem 0.5rem;
}

nav li.nav-items {
  font-size: 16px;
  font-weight: bold;
}

nav a, nav a:visited {
  color: darkslateblue;
}

nav a:hover {
  color: darkslateblue;
}

main {
  margin: 30vh auto 0;
  text-align: center;
}

h1, h2 {
  color: #bada;
}

h1 {
  font-size: 96px;
  margin: 0;
  text-shadow: 0 6px 10px darkslateblue;
}

h2 {
  font-size: 28px;
  margin: 0;
  text-shadow: 0 4px 4px darkslateblue;
}

header > span {
  position: absolute;
  top: 50px;
  right: 50px;
}

.target-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  pointer-events: none;
}

#target2 {
  left: 50%;
}

#target3 {
  position: fixed;
  top: 10vh;
  left: 5vw;
  z-index: -1;
  pointer-events: none;
}

#target4 {
  position: fixed;
  bottom: 10vh;
  right: 5vw;
  z-index: -1;
  pointer-events: none;
}

#video, #video2 {
  position: fixed;
  top: 0;
  content-visibility: hidden;
}

@media (min-width: 641px) {
  html, body {
    margin: 0;
  }
  main {
    width: -moz-fit-content;
    width: fit-content;
  }
  h1 {
    font-size: 128px;
  }
  h2 {
    font-size: 32px;
  }
  nav > ul {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
  }
  nav li.nav-items {
    font-size: 20px;
    padding: 1rem 2rem;
  }
}
```

--------------------------------

### Ticker Class Methods

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Details the methods for the Ticker class, responsible for managing the animation loop and event handling within Kampos.

```javascript
class Ticker {
  // Starts the ticker.
  start(): void;

  // Stops the ticker.
  stop(): void;

  // Draws the current frame.
  draw(): void;

  // Adds an item to the ticker.
  add(item: any): void;

  // Removes an item from the ticker.
  remove(item: any): void;
}
```

--------------------------------

### Brightness and Contrast Effect Configuration

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Configures the brightness and contrast of an image effect. Properties include brightness, contrast, and boolean flags to disable these adjustments.

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

--------------------------------

### Turbulence Effect Parameters

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Details the parameters for the turbulence effect, including noise implementation, output format, frequency, octaves, fractal settings, time, and input method for seeding.

```APIDOC
turbulence(params: object): turbulenceEffect

Parameters:
params (`object`):
  noise (`string`): 3D noise implementation to use.
  output (`string`?): How to output the `turbulenceValue` variable. Use `turbulence.COLOR` or `turbulence.ALPHA`. Defaults to `turbulence.COLOR`.
  frequency (`{x: number, y: number}`): Initial frequencies for x and y axes. Defaults to `{x:0.0,y:0.0}`.
  octaves (`number`): Initial number of octaves for turbulence noise generation. Defaults to `1`.
  isFractal (`boolean`): Initial number of octaves for turbulence noise generation. Defaults to `false`.
  time (`number`): Initial time for controlling initial noise value. Defaults to `0`.
  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})
```

--------------------------------

### Kampos Source Schema

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Defines the source object for Kampos, specifying the media content and update behavior.

```APIDOC
kamposSource:
  media: ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap - The media source.
  width: number - The width of the source media.
  height: number - The height of the source media.
  shouldUpdate?: boolean - Whether to resample the source on each draw call.
```

--------------------------------

### Deformation Effect Parameters

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Details the parameters for the deformation effect. This effect depends on the `resolution` and `mouse` utilities.

```APIDOC
deformation(params?): deformationEffect

Parameters:
params (`Object`?):
  (No specific parameters listed in the provided text, but implies dependency on external utilities.)

Returns:
`deformationEffect`
```

--------------------------------

### Effect Configuration Schema

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Defines the configuration for a single visual effect, including vertex and fragment shaders, attributes, uniforms, and textures.

```APIDOC
effectConfig:
  vertex: shaderConfig - Configuration for the vertex shader.
  fragment: shaderConfig - Configuration for the fragment shader.
  attributes: Array<Attribute> - Array of attribute configurations.
  uniforms: Array<Uniform> - Array of uniform configurations.
  varying: Object - Object defining varying variables between shaders.
  textures: Array<textureConfig> - Array of texture configurations.
```

--------------------------------

### SIL Open Font License (OFL) Version 1.1

Source: https://github.com/wix-incubator/kampos/blob/master/docs/assets/fonts/LICENSE.txt

The SIL Open Font License (OFL) Version 1.1 provides a legal framework for the distribution and modification of font software. It allows free use, study, modification, and redistribution under specific conditions, ensuring fonts remain open and are not sold independently.

```APIDOC
SIL Open Font License Version 1.1 - 26 February 2007

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.

The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the copyright statement(s).

"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.

"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.

5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
```

--------------------------------

### Noise Functions

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Provides implementations for various noise generation algorithms, including Perlin noise and Simplex noise in 2D and 3D.

```javascript
// Perlin noise in 3D
function perlinNoise3D(x: number, y: number, z: number): number;

// Cellular noise in 3D
function cellularNoise3D(x: number, y: number, z: number): number;

// Simplex noise in 3D
function simplex3D(x: number, y: number, z: number): number;

// Simplex noise in 2D
function simplex2D(x: number, y: number): number;

```

--------------------------------

### Channel Split Effect Configuration

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Simulates a channel split effect by offsetting the red, green, and blue color channels. The effect can be disabled, and offsets can be specified per channel.

```javascript
effect.offsetRed = { x: 0.1, y: 0.0 };
// effect.offsetGreen = { x: 0.0, y: 0.1 }; // Optional: offset green channel
// effect.offsetBlue = { x: 0.0, y: 0.0 }; // Optional: offset blue channel
// effect.disabled = true; // Optional: disable the effect
```

--------------------------------

### Kampos Texture Configuration

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Defines the structure for configuring texture properties in Kampos. It includes format, data source, update flag, and wrapping modes.

```javascript
textureConfig {
  format: string;
  data?: ArrayBufferView | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap;
  update?: boolean;
  wrap?: string | {x: string, y: string};
}
```

--------------------------------

### Deformation Effect Parameters

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Defines parameters for deformation effects, including radius, wrapping method, and deformation method. Defaults are provided for each parameter.

```APIDOC
deformationEffect(params?)

Parameters:

params.radius `[number]` (default 0): Initial radius for the circle of effect boundaries.
params.wrap `[string]` (default deformation.CLAMP): Wrapping method to use.
params.deformation `[string]` (default deformation.NONE): Deformation method to use within the radius.
```

--------------------------------

### fboConfig Object

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Defines the configuration for Frame Buffer Objects (FBOs). It includes properties for size and effects.

```javascript
/**
 * @typedef {Object} fboConfig
 * @property {number} size - The size of the FBO.
 * @property {Array<effectConfig>} effects - An array of effect configurations.
 */
```

--------------------------------

### flowmapGrid Function

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Initializes and returns a flowmapGridFBO object. It takes an optional options object to configure the grid's appearance and behavior, such as aspectRatio, radius, relaxation, width, and height. Defaults are provided for most parameters.

```javascript
flowmapGrid(options)

Parameters:
options: Object (optional, defaults to {})
  aspectRatio: number (default 16/9)
  radius: number (default 130)
  relaxation: number (default 0.93)
  width: number (default window.innerWidth)
  height: number (default window.innerHeight)

Returns:
flowmapGridFBO: An object representing the flowmap grid.
```

--------------------------------

### Transition Direction Constants

Source: https://github.com/wix-incubator/kampos/blob/master/docs/index.html

Defines constants for various transition directions used in Kampos. These are string values representing directions like 'left', 'right', 'top', 'bottom', and combinations thereof.

```javascript
const DIRECTION_LEFT = 'left';
const DIRECTION_RIGHT = 'right';
const DIRECTION_TOP = 'top';
const DIRECTION_BOTTOM = 'bottom';
const DIRECTION_TOP_LEFT = 'topLeft';
const DIRECTION_TOP_RIGHT = 'topRight';
const DIRECTION_BOTTOM_LEFT = 'bottomLeft';
const DIRECTION_BOTTOM_RIGHT = 'bottomRight';
const DIRECTION_CONSTANT = 'constant';
```

--------------------------------

### Image Container Positioning for E2E Testing

Source: https://github.com/wix-incubator/kampos/blob/master/test/e2e/index.html

Specifies the absolute positioning for the image container in the default E2E testing state and overrides it to static positioning when the '.image-test' class is applied. It also controls the display of video and SVG elements based on the '.image-test' class.

```css
#image-container {
  position: absolute;
  top: 0;
  left: 0;
}

.image-test #image-container {
  position: static;
}

.image-test video {
  display: none;
}

.image-test svg {
  display: block;
}
```
Tokens:
Raw