Package Exports

@4bitlabs/crt-lite
@4bitlabs/crt-lite/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@4bitlabs/crt-lite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`@4bitlabs/crt-lite`

A tiny, simple CRT-like webgl2-based canvas renderer for ImageData

Before	After

Example

import { createCrtRenderer } from '@4bitlabs/crt-lite';

// Setup the canvas element to draw to.
const target = document.getElementById('target');
const { update } = createCrtRenderer(canvasEl);

// Get some image data
const source = document.getElementById('source');
const ctx = source.getContext('2d');
/* draw whatever you want */
const imgData = ctx.getImageData(0, 0, ctx.width, ctx.height);

//🪄🎩🐰
update(imgData);

Render Parameters

There are several tunable options when calling the update function that can be used to adjust the style of monitor.

Setting	Type	Description
`Fx`	`number`	Horizontal monitor curve/barrel distortion.
`Fy`	`number`	Vertical monitor curve/barrel distortion.
`S`	`number`	Monitor zoom.
`hBlur`	`number`	Fast GPU horizontal box-blur in pixels.
`grain`	`number`	Monitor grain. `0.0` = none/off, `1.0` = max.
`vignette`	`number`	CRT Vignetting. `0.0` = none/off, `1.0` = max.
`scanLines`	`boolean`	CGA/EGA monitor scan-line simulation.

import { createCrtRenderer, type CrtUpdateOptions } from '@4bitlabs/crt-lite';

const { update } = createCrtRenderer(canvasEl);

const crtOptions: CrtUpdateOptions = {
  Fx: -0.025,
  Fy: -0.035,
  S: 0.995,
  hBlur: 2.0,
  grain: 0.125,
  vignette: 1.0,
  scanLines: true,
};

update(imgData, crtOptions);

You can also set up a set of render defaults as the base for every render.

import { createCrtRenderer, type CrtUpdateOptions } from '@4bitlabs/crt-lite';

const renderDefaults: CrtUpdateOptions = {
  Fx: -0.025,
  Fy: -0.035,
  S: 0.995,
  hBlur: 2.0,
  grain: 0.125,
  vignette: 1.0,
  scanLines: true,
};

const { update } = createCrtRenderer(canvasEl, { renderDefaults });

// Render using the defaults…
update(imgData);

// Override and disable the grain for just this render.
update(imgData, { grain: 0.0 });