Ignis

Fire, drawn as dots. Flames that rise, cool and fade, embers that break loose and ride the wind, smoke that carries on up after the light has gone. A campfire, a candle, a torch, a match and a forge, bushfire fronts right across the canvas, fireworks, and lava. Canvas 2D, no dependencies, one script.

Fourth of the TonkaTuff libraries, after Ephemeris (the sky), Coriolis (the weather) and Swarm (living things). The dots are sized the same way, so all four sit together on a page.

Use it

<script src="https://cdn.jsdelivr.net/gh/TonkaTuff/ignis@v0.2.0/dist/ignis.min.js"></script>
<canvas class="fire" width="300" height="200" data-fire-body="campfire"></canvas>

Every canvas.fire on the page mounts itself. Height sets the size; a wider canvas gives a front more ground to burn. Add canvases later with Ignis.register(). One thing at a time: dist/<name>.min.js is the core plus that one.

Things

Family	Name	What marks it out
Hearth	campfire	the one you sit around: two logs and a tongue of flame
	bonfire	taller and hungrier, embers climbing into the dark
	candle	a teardrop on a wick, blue at the base, barely moving
	torch	a flame on a stick, leaning with the wind
	match	strikes, flares, settles, burns down and goes out, then again
	forge	coals breathing with the bellows, sparks when the hammer lands
Bushfires	bushfire	a front right across the width, smoke leaning downwind
	grassfire	low, fast and yellow, running with the wind
	crown-fire	when it gets into the canopy: tall tongues, embers everywhere
	firestorm	a fire making its own weather, and the sky goes red
	ember-attack	the embers arrive long before the front does
	black-saturday	Victoria, 7 February 2009
	ash-wednesday	South Australia and Victoria, 16 February 1983, and the wind change
Fireworks	fireworks	peonies, chrysanthemums and willows, a few in the air at once
	new-years-eve	more shells, faster, red and gold and blue
	willows	gold stars that droop and hang
	catherine-wheel	a spinning rim throwing sparks
Lava	lava-lake	a dark crust cracking into glowing seams
	kilauea	the same lake, hotter, the seams wide open
	lava-flow	a channel running across the canvas, hot down the middle
	stromboli	a cone throwing blobs up to cool on the way down

How it burns

Every flame dot is born at the foot of the fire with a fixed slot across it and a fixed phase, rises, cools from white through orange to red, and fades at the tip. The envelope flickers with noise, the tongues lean with the wind, embers climb higher than the flames and wink out, and smoke spreads and greys as it goes. Fireworks go up on a hashed schedule and burst into stars that slow, fall and fade. Lava is heat as a function of place and time, so the crust drifts and the seams open and close. Nothing is remembered between frames: each one is a function of time, so a still frame, a loop and a scrub all work.

Knobs

attribute	value	what it does
data-fire-body	name	one of the names above
data-fire-form	fire candle torch match forge front	the shape of a fire; fireworks take shell willow wheel, lava takes lake flow fountain
data-fire-height	number	flame height as a fraction of the canvas height; 0.5 for a campfire, 0.42 for a front
data-fire-width	number	half the fire's foot as a fraction of the height, 0.15 by default; a front always spans the canvas
data-fire-wind	number	how far flames, embers and smoke lean, positive to the right; 0.1, or 0.5 for a front
data-fire-embers	number	embers as a fraction of the flame dots, 0.12 by default
data-fire-smoke	number	smoke as a fraction of the flame dots, 0.35 by default
data-fire-flames	number	scale the flames themselves, 1 by default
data-fire-n	number	flame dots at a 64px height, scaled up with size; 700 by default
data-fire-tempo	number	how fast it all happens, 1 by default
data-fire-logs	0	a campfire without the logs
data-fire-slots -period -reach	number	fireworks: shells in the air at once (4), seconds between them (3.4), burst size as a fraction of the height (0.26)
data-fire-seams -heat -speed	number	lava: how many seams (1), how open they are (1), how fast a flow runs (0.06)
data-fire-ink	1	monochrome dots that follow the page theme
data-fire-lite	1	half the dots
data-fire-ground	1	a night behind, lit by the fire
data-fire-glow	0	no soft glow, just the dots on a clear canvas

Any data-fire-<knob> reaches the mode as opts.knob, numbers parsed. Colours come from CSS custom properties, inherited: --fire-cold, --fire-mid, --fire-hot for the tip, the body and the heart of the flame, --fire-glow for the light it throws.

JavaScript

Ignis.body('bonfire', ctx, 200, t, dark, { w: 400, ground: true });
Ignis.GROUPS;   // { Hearth: [...], Bushfires: [...], Fireworks: [...], Lava: [...] }

Build

npm run build writes dist/ignis.min.js and one dist/<name>.min.js per thing. tools/verify.html and tools/verify-min.html, served over http, check every bundle draws pixel-identical to the source.

MIT.