Pixel fire

A small pixel-art fire burns on a dark red block in the middle of a pale green card. The flame is 16 by 16 texels at 60 percent of the card's height, drawn with smoothing off so every texel is a hard square, and the block under it is the same width, cut off by the bottom edge.

The flipbook is generated, not drawn. A hot row sits under the texture, hotter in the middle than at the sides. Every step each cell passes its heat one row up, drifting a column left or right at random and losing a little, so tongues rise and break apart. After a warm-up, 32 steps become 32 frames, played at 18 a second. Heat maps to seven colours from deep red to near white, and alpha is binary: a texel is solid fire or a clean gap, never half transparent.

The pointer edits a live buffer, not a frame. Normally the buffer copies the current frame. Within 2.8 texels of the pointer, lit cells are moved one to four texels along the pointer's travel and upward, heated toward white, and the cells they leave become gaps. Disturbed cells then relight from the flipbook at random, so a carved hole fills in raggedly while the animation keeps playing underneath. The tips also lean toward the pointer by up to two whole texels, and a tap empties every lit cell at once.

• Generate the flipbook once from a seeded heat simulation: a hot source row, heat passed up a row per step with a random sideways drift and a random loss.
• Map heat to a short ramp of flame colours with binary alpha, and drop cells below a threshold to gaps.
• Keep a mutable RGBA buffer. Undisturbed cells copy the current frame exactly; disturbed ones relight from it at random and relax back.
• Under the pointer, move lit cells along its velocity plus an upward bias, heat them, keep the brighter colour at the destination, and clear the source.
• Shift each row toward the pointer by a whole number of texels that grows toward the tips, then put the buffer in a 16 by 16 canvas and draw it scaled with smoothing off.
• Under reduced motion, draw one flipbook frame untouched.

• FLAME (seven colours, deep red to near white): The flame ramp, coolest first.
• COOL_MIN, COOL_RANDOM (0.02, 0.065): Heat lost per row. Higher makes shorter, raggeder tongues.
• FPS (18): Flipbook speed.
• BURN_RADIUS (2.8): How many texels the pointer reaches.
• HEAL_RATE (6): How fast a carved hole relights.
• BLOCK, GROUND (dark reds, #f0f7ee): The block's colours and the card's ground.
• SEED (7): The roll both textures come from.