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

Documentation

Full documentation for the library can be found here.

Getting Started

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 invoking the update function that can be used to adjust the monitor style.

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

Setting Render Defaults

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 });