Every cell samples the picture once, then asks a threshold map whether it should light up. Change the map and you change the whole filter — dots, squares, crosses, rings, ordered blocks, or any glyph you hand it. The pointer drags a decaying trail that both bends where cells read the source and lights the cells it crosses.
Black turns on first, white last. Because the test is lum >= threshold,
a shape grows out of the map continuously instead of stepping through fixed sizes —
and a glyph is just a map baked from your own artwork at increasing scales.
Pass a <video>, an
<img>, or a <canvas> you keep drawing into.
Nothing here ships as a file — the clip on screen is generated at load.
An SVG path, a single character, a canvas, an image, or a draw function. It is rasterised once into the map, so the cost is the same whatever you supply.
Cell size, screen angle, contrast, inversion and colour mode are all live. Mono, duotone and full-colour sampling share one pass.
var fx = HalftoneMedia.init(document.querySelector(".stage"), {
preset: "orb-cursor",
source: document.querySelector("video#clip"),
shape: "glyph",
glyph: "M50 2 L62 38 L98 38 L69 60 L80 96 L50 74 L20 96 L31 60 L2 38 L38 38 Z",
cellSize: 12, angle: 15, colorMode: "duotone"
});