banner

A banner is a scalar field frozen at an instant and read across a rectangle. The package ships no fields of its own: field is a function you write.

import { bannerSvg } from "@mariovagomarzal/lattice/banner";

const field = (x: number, y: number, t: number) => Math.sin(2 * Math.hypot(x, y) - 1.5 * t);

const svg = bannerSvg({ field, width: 1500, height: 500 });

bannerSvg

field

source

time0.00

span7

format

size

width

height

texture

pitch63×21 cells

weight1.00

fill0.46

alpha min0.07

alpha span0.33

colors

polarity

ink#e8e1cf

paper#151b17

accentnone

Options

option	type	default	what it does
field	`Field`	`required`	The field the banner draws.
time	`number`	`0`	The instant of the field that is drawn, in field time.
range	`Range \| null`	`null`	Range the field is rescaled against, or null to estimate it with calibrate.
width	`number`	`1500`	Width of the banner, in pixels.
height	`number`	`500`	Height of the banner, in pixels.
pitch	`number`	`24`	Distance between cell centers, in pixels. The cell count follows from the banner size.
span	`number`	`7`	Field units the short side of the grid spans.
fill	`number`	`0.46`	Share of its cell a glyph covers, in [0, 1]. At 1 the glyphs touch, at 0 there is nothing to draw.
weight	`number`	`1`	Ink gain, as a gamma.
alphabet	`readonly string[]`	`ramp`	The ramp the levels are quantized with, from empty to full ink.
typeface	`Typeface \| null`	`spaceMono`	Outlines the glyphs are drawn with, or null to set them as text.
fontFamily	`string`	`"Space Mono, monospace"`	The mono family the glyphs are named as. Used only when typeface is null.
ink	`string`	`meet.colors.text`	Color of the glyphs.
alpha	`Alpha \| null`	`{ min: 0.07, span: 0.33 }`	Ink opacity, as a floor and the span above it. Null draws every glyph solid.
paper	`string \| null`	`meet.colors.base`	Color behind them, or null for none.
accent	`string \| null`	`null`	Color of the densest glyphs, or null to keep the banner monochrome.