effects / ascii-render-pass

ASCII Render Pass

A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine.

Frame 0 / 119

The preview uses an authored 320 × 240 scene snapshot at local frame 15 (30 fps). View the original source XML.

Use this effect

VideoML XML

Save this example as example.videoml.xml and place the downloaded asset in an assets/ directory beside it. Run vml pipeline example.videoml.xml with a VideoML installation that supports frame effects.

Download Geist-Latin.woff2 to assets/.

<vml id="ascii-authored-example" width="320" height="240" fps="30" duration="8s">
  <assets><asset id="font" src="assets/Geist-Latin.woff2" media-type="font/woff2"/></assets>
  <scene id="source" start="2s" duration="2s">
    <video-title id="source-title" props='{&quot;text&quot;:&quot;Authored source&quot;,&quot;fontSize&quot;:20,&quot;color&quot;:&quot;#151515&quot;,&quot;position&quot;:{&quot;x&quot;:20,&quot;y&quot;:20}}'/>
    <frame-effect id="source-canvas" effect-id="videoml/particle-text-dissolve" effect-version="1" props='{&quot;parameters&quot;:{&quot;text&quot;:&quot;Scene&quot;,&quot;density&quot;:&quot;low&quot;,&quot;accent&quot;:&quot;blue&quot;}}'/>
  </scene>
  <scene id="sink" start="4s" duration="4s">
    <frame-effect id="ascii" effect-id="videoml/ascii-render-pass" effect-version="1" props='{&quot;parameters&quot;:{&quot;sourceSceneId&quot;:&quot;source&quot;,&quot;sourceFrame&quot;:75,&quot;charset&quot;:&quot; .:-=+*#%@&quot;,&quot;grid&quot;:&quot;med&quot;,&quot;resolve_at&quot;:1.4,&quot;accent&quot;:&quot;green&quot;,&quot;exit&quot;:&quot;none&quot;}}'/>
  </scene>
</vml>

TypeScript

Requires the frozen stdlib package, a page element with id="effect-root", and the referenced local assets. Revoke any generated object URLs when the host disposes the effect.

import { createEffectRegistry, mountEffect } from '@videoml/stdlib/effects';
import { registerCatalogC001 } from '@videoml/stdlib/effects/catalog-c001';

const root = document.querySelector<HTMLElement>('#effect-root');
if (!root) throw new Error('Missing #effect-root');
const assets: Record<string, string> = {};
const response = await fetch('/catalog-assets/c001-authored-scene.png');
if (!response.ok) throw new Error('Snapshot unavailable');
const image = await response.blob();
const sceneSnapshots = { async capture(request) {
  if (request.sceneId !== 'source' || request.frame !== 75 || request.signal.aborted) throw new Error('Unknown snapshot');
  const bitmap = await createImageBitmap(image);
  if (request.signal.aborted || bitmap.width !== 320 || bitmap.height !== 240) { bitmap.close(); throw new Error('Invalid snapshot'); }
  return { bitmap, close: () => bitmap.close() };
} };
const registry = createEffectRegistry();
registerCatalogC001(registry);
const effect = mountEffect(root, registry, {
  "id": "videoml/ascii-render-pass",
  "version": "1",
  "parameters": {
    "sourceSceneId": "source",
    "sourceFrame": 75,
    "charset": " .:-=+*#%@",
    "grid": "med",
    "resolve_at": 1.4,
    "accent": "green",
    "exit": "none"
  },
  "startFrame": 0,
  "endFrame": 120
}, { width: 320, height: 240, fps: 30, seed: 0, assets, sceneSnapshots });
await effect.seek(0);
// Call await effect.dispose() and revoke asset URLs when finished.

Upstream Apache-2.0 license · GSAP license · Geist font license

implemented · interactive preview

This entry is implemented but not yet verified.

ASCII Render Pass

Parameters

Use this effect

VideoML XML

TypeScript