@woosh/meep-engine 3.18.0 → 3.20.0

package/src/shade/playground/particle_ecs/bonfire_effects.d.ts

@@ -0,0 +1,145 @@
+/**
+ * @returns {NodeDescriptionVisualRegistry}
+ */
+export function particle_node_visuals(): NodeDescriptionVisualRegistry;
+/**
+ * Open one of the saved effects as a document.
+ *
+ * @param {string} name see {@link BONFIRE_EFFECT_NAMES}
+ * @param {object} [json] an effect to open instead of the saved one — what the page hands over when
+ *        somebody imports a file they downloaded earlier
+ * @returns {ParticleEffectDocument}
+ */
+export function bonfire_effect_document(name: string, json?: object): ParticleEffectDocument;
+/**
+ * All four, as documents.
+ *
+ * @returns {Object<string, ParticleEffectDocument>}
+ */
+export function bonfire_effect_documents(): {
+    [x: string]: ParticleEffectDocument;
+};
+/**
+ * The ECS component a document describes, compiled.
+ *
+ * `null` when the effect does not compile. A graph an author has half-rewired is the ordinary case
+ * for that, so it is the caller's business to say so rather than this one's to throw — which is why
+ * the page can leave the previous effect burning while the editor shows the error.
+ *
+ * @param {ParticleEffectDocument} document
+ * @param {string|null} [texture] image URL to draw with, used when the document names none of its
+ *        own. The page's sprites are generated at runtime, so they cannot be in the file
+ * @returns {ParticleEffect|null}
+ */
+export function bonfire_effect_component(document: ParticleEffectDocument, texture?: string | null): ParticleEffect | null;
+/**
+ * The four effects, ready to go on entities.
+ *
+ * @param {object} [textures] image URLs to draw with, `null` for an untextured (flat quad) effect
+ * @param {string|null} [textures.flame]
+ * @param {string|null} [textures.smoke]
+ * @param {string|null} [textures.ember]
+ * @param {string|null} [textures.soot]
+ * @returns {{flame: ParticleEffect, smoke: ParticleEffect, embers: ParticleEffect, soot: ParticleEffect}}
+ */
+export function bonfire_effects(textures?: {
+    flame?: string | null;
+    smoke?: string | null;
+    ember?: string | null;
+    soot?: string | null;
+}): {
+    flame: ParticleEffect;
+    smoke: ParticleEffect;
+    embers: ParticleEffect;
+    soot: ParticleEffect;
+};
+/**
+ * The sprite URLs keyed the way the effects are, so the page and the editor agree on which image
+ * belongs to which effect. `bonfire_sprites()` names the ember one in the singular.
+ *
+ * @param {object} [textures]
+ * @returns {Object<string, string|null>}
+ */
+export function bonfire_sprite_urls(textures?: object): {
+    [x: string]: string | null;
+};
+/**
+ * A bonfire, as four saved particle effects.
+ *
+ * Flame, smoke, embers and soot: four effects that read as one fire because they were authored
+ * against one another — the smoke starts where the flame stops being bright, the embers leave from
+ * inside the flame core and outlive it, and the soot rides the same plume as the smoke and then
+ * falls out of it.
+ *
+ * ## They are documents, not code
+ *
+ * Each is a {@link ParticleEffectDocument} saved as JSON in `effects/`: the per-particle attribute
+ * declarations, the INIT and UPDATE node graphs with the positions they were arranged at, and the
+ * emitter settings. That is the whole effect, and it is what the editor opens — press `E` on the
+ * page, change something, download the result, drop it over the file, reload. There is no porting
+ * step and no authoring code to keep in step with what was edited, because the file the editor
+ * writes **is** the effect.
+ *
+ * Which is the same claim `ParticleEffectSerializationAdapter` makes about a level: the VM's
+ * instruction set is a durable format, so an effect is content. These documents keep the *graph*
+ * rather than the bytecode because they are the authoring form — a level saves the compiled program,
+ * an author's file saves what it was compiled from.
+ *
+ * ## How each effect is built
+ *
+ * Every one of them has the same skeleton, which is the skeleton of nearly every particle effect:
+ *
+ * - **INIT** places the particle, gives it a velocity, and rolls its lifetime, its base size and a
+ *   personal `seed`. There is no built-in age or lifetime — the effect declares what it needs, which
+ *   is why `age` and `life` are ordinary attributes.
+ * - **UPDATE** advances the age, kills the particle when it runs out, integrates the forces, and
+ *   drives the drawn size and colour from `age / life` through a ramp — a curve for the size and a
+ *   gradient for the colour, both written into the program as arithmetic rather than sampled from a
+ *   table the host has to keep in step.
+ *
+ * Two things are worth knowing before editing one:
+ *
+ * - **One store per attribute per phase.** Every store runs and nothing orders them, so a second
+ *   store does not refine the first, it replaces it — which is how the smoke's drag silently ate its
+ *   own velocity integration until the editor's validator was pointed at it. The graph editor calls
+ *   that an error; nothing at runtime does.
+ * - **The register budget is shared.** The VM keeps its file in shader registers, and one program
+ *   needing more than `PARTICLE_VM_FAST_REGISTER_SLOTS` swaps emit and simulate for storage-backed
+ *   variants *for the whole system* — so an effect that grows past it slows down every effect in the
+ *   scene rather than itself. `bonfire.spec.js` pins it.
+ *
+ * The turbulence in all four is three decorrelated `simplex3` samples read as a vector, at a point
+ * that drifts with time so the field scrolls through the rising column. Deliberately not the
+ * library's `curl3`, which is twelve samples for a divergence-free field: over a metre of flame
+ * nobody can tell, and the budget above is shared.
+ *
+ * ## Lighting
+ *
+ * None of these opt into `EMITTER_FLAG.LIGHTING`, and that is not an oversight: the shipped lighting
+ * hook is `chunk_particle_lighting_unlit`, a pass-through, so the flag would cost a bit in a record
+ * and change no pixel. The smoke and the soot are *painted* lit instead — their gradients carry the
+ * fire's warmth low down where the fire would light them and the moon's blue higher up, over the
+ * particle's own age. When the lit hook lands the gradients are what to reconsider.
+ */
+/**
+ * The four saved documents, by the key the page knows them by.
+ *
+ * Exported as the raw JSON rather than as documents, because a document is mutable and every caller
+ * that opens one wants its own.
+ *
+ * @type {Object<string, object>}
+ */
+export const BONFIRE_EFFECT_JSON: {
+    [x: string]: object;
+};
+/**
+ * The order the page offers them in, which is also least to most incidental: the flame is the thing,
+ * and the soot is the detail that makes it read.
+ *
+ * @type {string[]}
+ */
+export const BONFIRE_EFFECT_NAMES: string[];
+import { NodeDescriptionVisualRegistry } from "../../../core/model/node-graph/visual/NodeDescriptionVisualRegistry.js";
+import { ParticleEffectDocument } from "../../../../editor/particles/effect/ParticleEffectDocument.js";
+import { ParticleEffect } from "../../../engine/graphics/ecs/particles/ParticleEffect.js";
+//# sourceMappingURL=bonfire_effects.d.ts.map

package/src/shade/playground/particle_ecs/bonfire_effects.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bonfire_effects.d.ts","sourceRoot":"","sources":["../../../../../src/shade/playground/particle_ecs/bonfire_effects.js"],"names":[],"mappings":"AAyGA;;GAEG;AACH,yCAFa,6BAA6B,CAUzC;AAED;;;;;;;GAOG;AACH,8CALW,MAAM,SACN,MAAM,GAEJ,sBAAsB,CAIlC;AAED;;;;GAIG;AACH;QAFoB,MAAM,GAAE,sBAAsB;EAIjD;AAED;;;;;;;;;;;GAWG;AACH,mDALW,sBAAsB,YACtB,MAAM,GAAC,IAAI,GAET,cAAc,GAAC,IAAI,CAY/B;AAED;;;;;;;;;GASG;AACH;IANkC,KAAK,GAA5B,MAAM,GAAC,IAAI;IACY,KAAK,GAA5B,MAAM,GAAC,IAAI;IACY,KAAK,GAA5B,MAAM,GAAC,IAAI;IACY,IAAI,GAA3B,MAAM,GAAC,IAAI;IACT;IAAC,KAAK,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,cAAc,CAAC;IAAC,MAAM,EAAE,cAAc,CAAC;IAAC,IAAI,EAAE,cAAc,CAAA;CAAC,CAcxG;AAED;;;;;;GAMG;AACH,+CAHW,MAAM;QACG,MAAM,GAAE,MAAM,GAAC,IAAI;EAStC;AA7LD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH;;;;;;;GAOG;AACH;QAFiB,MAAM,GAAE,MAAM;EAO5B;AAEH;;;;;GAKG;AACH,mCAFU,MAAM,EAAE,CAEsE;8CA1FjF,wEAAwE;uCAExC,+DAA+D;+BADvE,0DAA0D"}

package/src/shade/playground/particle_ecs/bonfire_effects.js

@@ -0,0 +1,202 @@
+import {
+    NodeDescriptionVisualRegistry
+} from "../../../core/model/node-graph/visual/NodeDescriptionVisualRegistry.js";
+import { ParticleEffect } from "../../../engine/graphics/ecs/particles/ParticleEffect.js";
+import { ParticleEffectDocument } from "../../../../editor/particles/effect/ParticleEffectDocument.js";
+import { PARTICLE_NODE_REGISTRY } from "../../renderer/particles/graph/ParticleNodeRegistry.js";
+import "../../renderer/particles/graph/particle_node_library.js";
+import flame_json from "./effects/flame.json";
+import smoke_json from "./effects/smoke.json";
+import embers_json from "./effects/embers.json";
+import soot_json from "./effects/soot.json";
+
+/**
+ * A bonfire, as four saved particle effects.
+ *
+ * Flame, smoke, embers and soot: four effects that read as one fire because they were authored
+ * against one another — the smoke starts where the flame stops being bright, the embers leave from
+ * inside the flame core and outlive it, and the soot rides the same plume as the smoke and then
+ * falls out of it.
+ *
+ * ## They are documents, not code
+ *
+ * Each is a {@link ParticleEffectDocument} saved as JSON in `effects/`: the per-particle attribute
+ * declarations, the INIT and UPDATE node graphs with the positions they were arranged at, and the
+ * emitter settings. That is the whole effect, and it is what the editor opens — press `E` on the
+ * page, change something, download the result, drop it over the file, reload. There is no porting
+ * step and no authoring code to keep in step with what was edited, because the file the editor
+ * writes **is** the effect.
+ *
+ * Which is the same claim `ParticleEffectSerializationAdapter` makes about a level: the VM's
+ * instruction set is a durable format, so an effect is content. These documents keep the *graph*
+ * rather than the bytecode because they are the authoring form — a level saves the compiled program,
+ * an author's file saves what it was compiled from.
+ *
+ * ## How each effect is built
+ *
+ * Every one of them has the same skeleton, which is the skeleton of nearly every particle effect:
+ *
+ * - **INIT** places the particle, gives it a velocity, and rolls its lifetime, its base size and a
+ *   personal `seed`. There is no built-in age or lifetime — the effect declares what it needs, which
+ *   is why `age` and `life` are ordinary attributes.
+ * - **UPDATE** advances the age, kills the particle when it runs out, integrates the forces, and
+ *   drives the drawn size and colour from `age / life` through a ramp — a curve for the size and a
+ *   gradient for the colour, both written into the program as arithmetic rather than sampled from a
+ *   table the host has to keep in step.
+ *
+ * Two things are worth knowing before editing one:
+ *
+ * - **One store per attribute per phase.** Every store runs and nothing orders them, so a second
+ *   store does not refine the first, it replaces it — which is how the smoke's drag silently ate its
+ *   own velocity integration until the editor's validator was pointed at it. The graph editor calls
+ *   that an error; nothing at runtime does.
+ * - **The register budget is shared.** The VM keeps its file in shader registers, and one program
+ *   needing more than `PARTICLE_VM_FAST_REGISTER_SLOTS` swaps emit and simulate for storage-backed
+ *   variants *for the whole system* — so an effect that grows past it slows down every effect in the
+ *   scene rather than itself. `bonfire.spec.js` pins it.
+ *
+ * The turbulence in all four is three decorrelated `simplex3` samples read as a vector, at a point
+ * that drifts with time so the field scrolls through the rising column. Deliberately not the
+ * library's `curl3`, which is twelve samples for a divergence-free field: over a metre of flame
+ * nobody can tell, and the budget above is shared.
+ *
+ * ## Lighting
+ *
+ * None of these opt into `EMITTER_FLAG.LIGHTING`, and that is not an oversight: the shipped lighting
+ * hook is `chunk_particle_lighting_unlit`, a pass-through, so the flag would cost a bit in a record
+ * and change no pixel. The smoke and the soot are *painted* lit instead — their gradients carry the
+ * fire's warmth low down where the fire would light them and the moon's blue higher up, over the
+ * particle's own age. When the lit hook lands the gradients are what to reconsider.
+ */
+
+/**
+ * The four saved documents, by the key the page knows them by.
+ *
+ * Exported as the raw JSON rather than as documents, because a document is mutable and every caller
+ * that opens one wants its own.
+ *
+ * @type {Object<string, object>}
+ */
+export const BONFIRE_EFFECT_JSON = Object.freeze({
+    flame: flame_json,
+    smoke: smoke_json,
+    embers: embers_json,
+    soot: soot_json,
+});
+
+/**
+ * The order the page offers them in, which is also least to most incidental: the flame is the thing,
+ * and the soot is the detail that makes it read.
+ *
+ * @type {string[]}
+ */
+export const BONFIRE_EFFECT_NAMES = Object.freeze(["flame", "smoke", "embers", "soot"]);
+
+/**
+ * A visual registry covering every particle node type, which a document needs in order to size the
+ * nodes it loads.
+ *
+ * One, shared and built on demand: it is a function of the node library rather than of any document,
+ * and building it per document would generate a visual description per node type per effect.
+ *
+ * @type {NodeDescriptionVisualRegistry|null}
+ */
+let node_visuals = null;
+
+/**
+ * @returns {NodeDescriptionVisualRegistry}
+ */
+export function particle_node_visuals() {
+    if (node_visuals === null) {
+        node_visuals = new NodeDescriptionVisualRegistry();
+
+        PARTICLE_NODE_REGISTRY.getNodesAsArray().forEach(description => node_visuals.generate(description));
+    }
+
+    return node_visuals;
+}
+
+/**
+ * Open one of the saved effects as a document.
+ *
+ * @param {string} name see {@link BONFIRE_EFFECT_NAMES}
+ * @param {object} [json] an effect to open instead of the saved one — what the page hands over when
+ *        somebody imports a file they downloaded earlier
+ * @returns {ParticleEffectDocument}
+ */
+export function bonfire_effect_document(name, json = BONFIRE_EFFECT_JSON[name]) {
+    return new ParticleEffectDocument().fromJSON(json, particle_node_visuals());
+}
+
+/**
+ * All four, as documents.
+ *
+ * @returns {Object<string, ParticleEffectDocument>}
+ */
+export function bonfire_effect_documents() {
+    return Object.fromEntries(BONFIRE_EFFECT_NAMES.map(name => [name, bonfire_effect_document(name)]));
+}
+
+/**
+ * The ECS component a document describes, compiled.
+ *
+ * `null` when the effect does not compile. A graph an author has half-rewired is the ordinary case
+ * for that, so it is the caller's business to say so rather than this one's to throw — which is why
+ * the page can leave the previous effect burning while the editor shows the error.
+ *
+ * @param {ParticleEffectDocument} document
+ * @param {string|null} [texture] image URL to draw with, used when the document names none of its
+ *        own. The page's sprites are generated at runtime, so they cannot be in the file
+ * @returns {ParticleEffect|null}
+ */
+export function bonfire_effect_component(document, texture = null) {
+    const compilation = document.compile();
+
+    if (compilation.program === null || compilation.layout === null) {
+        return null;
+    }
+
+    const config = document.emitterConfig(compilation);
+
+    return ParticleEffect.from({ ...config, texture: config.texture ?? texture });
+}
+
+/**
+ * The four effects, ready to go on entities.
+ *
+ * @param {object} [textures] image URLs to draw with, `null` for an untextured (flat quad) effect
+ * @param {string|null} [textures.flame]
+ * @param {string|null} [textures.smoke]
+ * @param {string|null} [textures.ember]
+ * @param {string|null} [textures.soot]
+ * @returns {{flame: ParticleEffect, smoke: ParticleEffect, embers: ParticleEffect, soot: ParticleEffect}}
+ */
+export function bonfire_effects(textures = {}) {
+    const sprites = bonfire_sprite_urls(textures);
+
+    return Object.fromEntries(BONFIRE_EFFECT_NAMES.map(name => {
+        const component = bonfire_effect_component(bonfire_effect_document(name), sprites[name]);
+
+        if (component === null) {
+            throw new Error(`the saved '${name}' effect does not compile — see effects/${name}.json`);
+        }
+
+        return [name, component];
+    }));
+}
+
+/**
+ * The sprite URLs keyed the way the effects are, so the page and the editor agree on which image
+ * belongs to which effect. `bonfire_sprites()` names the ember one in the singular.
+ *
+ * @param {object} [textures]
+ * @returns {Object<string, string|null>}
+ */
+export function bonfire_sprite_urls(textures = {}) {
+    return {
+        flame: textures.flame ?? null,
+        smoke: textures.smoke ?? null,
+        embers: textures.ember ?? null,
+        soot: textures.soot ?? null,
+    };
+}

package/src/shade/playground/particle_ecs/bonfire_sprites.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @typedef {object} BonfireSprites
+ * @property {string} flame
+ * @property {string} smoke
+ * @property {string} ember
+ * @property {string} soot
+ */
+/**
+ * Draw the four sprites.
+ *
+ * Browser only — it draws through a `<canvas>`. The effects take their URLs as arguments precisely
+ * so that everything else about them can be built and tested without one.
+ *
+ * @returns {BonfireSprites}
+ */
+export function bonfire_sprites(): BonfireSprites;
+export type BonfireSprites = {
+    flame: string;
+    smoke: string;
+    ember: string;
+    soot: string;
+};
+//# sourceMappingURL=bonfire_sprites.d.ts.map

package/src/shade/playground/particle_ecs/bonfire_sprites.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bonfire_sprites.d.ts","sourceRoot":"","sources":["../../../../../src/shade/playground/particle_ecs/bonfire_sprites.js"],"names":[],"mappings":"AAmBA;;;;;;GAMG;AAEH;;;;;;;GAOG;AACH,mCAFa,cAAc,CAS1B;;WArBa,MAAM;WACN,MAAM;WACN,MAAM;UACN,MAAM"}

package/src/shade/playground/particle_ecs/bonfire_sprites.js

@@ -0,0 +1,315 @@
+/**
+ * The four sprites the bonfire draws with, generated rather than shipped.
+ *
+ * They are PNG `data:` URLs, which is the point of doing it this way: the effects name a URL like
+ * any other effect would, `AssetManager` fetches and decodes it like any other image, and
+ * `GPUParticleEmitterSystem` packs it into the scene's sprite atlas like any other sprite. Nothing
+ * about the path is special-cased for a generated image, so the page exercises the real one — and
+ * it does it without a binary asset in the repository, which is what a playground under
+ * `test_assets/`-free source control needs.
+ *
+ * Generation is deterministic: one seeded generator, so the same page always draws the same fire.
+ */
+
+/** Size of the flame and smoke sprites, in texels. Big enough to be blurred, small enough to pack. */
+const LARGE = 128;
+
+/** Size of the ember and soot sprites. They are drawn a few pixels across; detail here is wasted. */
+const SMALL = 32;
+
+/**
+ * @typedef {object} BonfireSprites
+ * @property {string} flame
+ * @property {string} smoke
+ * @property {string} ember
+ * @property {string} soot
+ */
+
+/**
+ * Draw the four sprites.
+ *
+ * Browser only — it draws through a `<canvas>`. The effects take their URLs as arguments precisely
+ * so that everything else about them can be built and tested without one.
+ *
+ * @returns {BonfireSprites}
+ */
+export function bonfire_sprites() {
+    return {
+        flame: flame_sprite(),
+        smoke: smoke_sprite(),
+        ember: ember_sprite(),
+        soot: soot_sprite(),
+    };
+}
+
+/**
+ * A soft round puff with a bright core: what a lick of flame is made of, additively.
+ *
+ * The falloff is `(1 - r)^2` rather than linear, so a hundred overlapping puffs sum into a body with
+ * a hot centre instead of a uniform blob — the shape of the falloff is what the fire's silhouette
+ * comes out of, far more than the shape of any one particle.
+ *
+ * @returns {string} PNG data URL
+ */
+function flame_sprite() {
+    return draw(LARGE, (x, y) => {
+        const r = Math.hypot(x, y);
+
+        if (r >= 1) {
+            return 0;
+        }
+
+        const falloff = (1 - r) * (1 - r);
+
+        return falloff * (0.55 + 0.45 * (1 - r));
+    });
+}
+
+/**
+ * A cloudy puff: a radial mask with several octaves of value noise cut into it, so a smoke particle
+ * has structure of its own and a column of them does not read as a stack of discs.
+ *
+ * @returns {string} PNG data URL
+ */
+function smoke_sprite() {
+    const noise = value_noise_field(LARGE, 0x51ce);
+
+    return draw(LARGE, (x, y, ix, iy) => {
+        const r = Math.hypot(x, y);
+
+        if (r >= 1) {
+            return 0;
+        }
+
+        // A long shoulder rather than a plateau, and noise deep enough to break what is left of
+        // the circle: a smoke particle whose own outline is visible is a smoke particle you can
+        // count, and a column of countable puffs is the thing that reads as "particles" rather
+        // than as smoke.
+        const mask = smoothstep(1, 0.05, r);
+        const detail = 0.18 + 0.82 * noise[iy * LARGE + ix];
+
+        return mask * mask * detail;
+    });
+}
+
+/**
+ * A tight bright dot with a faint halo — a cinder, and the glow around it.
+ *
+ * @returns {string} PNG data URL
+ */
+function ember_sprite() {
+    return draw(SMALL, (x, y) => {
+        const r = Math.hypot(x, y);
+
+        if (r >= 1) {
+            return 0;
+        }
+
+        const core = smoothstep(0.45, 0.0, r);
+        const halo = (1 - r) * (1 - r) * 0.35;
+
+        return Math.min(1, core + halo);
+    });
+}
+
+/**
+ * An irregular flake with soft edges: soot is not round, and a flake that tumbles has to look
+ * different from one moment to the next for the tumble to be visible at all.
+ *
+ * @returns {string} PNG data URL
+ */
+function soot_sprite() {
+    const random = seeded_random(0x50075);
+    const lobes = Array.from({ length: 5 }, () => 0.55 + random() * 0.45);
+
+    return draw(SMALL, (x, y) => {
+        const r = Math.hypot(x, y);
+        const angle = Math.atan2(y, x);
+
+        // A radius that varies with the angle, interpolated around the five lobes.
+        const t = (angle / (Math.PI * 2) + 1) % 1 * lobes.length;
+        const i = Math.floor(t);
+        const edge = lerp(lobes[i], lobes[(i + 1) % lobes.length], t - i);
+
+        return smoothstep(edge, edge * 0.55, r);
+    });
+}
+
+/**
+ * Rasterize an alpha function into a white PNG.
+ *
+ * White because the colour is the particle's — every one of these effects drives `color` from a
+ * gradient over the particle's age, and the sprite's job is the shape it comes out in. `x` and `y`
+ * are in `[-1, 1]` at texel centres; `ix` and `iy` are the texel.
+ *
+ * @param {number} size
+ * @param {function(number, number, number, number): number} alpha
+ * @returns {string} PNG data URL
+ */
+function draw(size, alpha) {
+    const canvas = document.createElement("canvas");
+
+    canvas.width = size;
+    canvas.height = size;
+
+    const context = canvas.getContext("2d");
+    const image = context.createImageData(size, size);
+    const data = image.data;
+
+    for (let iy = 0; iy < size; iy++) {
+        for (let ix = 0; ix < size; ix++) {
+            const x = (ix + 0.5) / size * 2 - 1;
+            const y = (iy + 0.5) / size * 2 - 1;
+            const offset = (iy * size + ix) * 4;
+
+            data[offset] = 255;
+            data[offset + 1] = 255;
+            data[offset + 2] = 255;
+            data[offset + 3] = Math.round(clamp(alpha(x, y, ix, iy), 0, 1) * 255);
+        }
+    }
+
+    context.putImageData(image, 0, 0);
+
+    return canvas.toDataURL("image/png");
+}
+
+/**
+ * Three octaves of tiling value noise in `[0, 1]`, one value per texel.
+ *
+ * Tiling, because the field is sampled over the whole sprite and a seam across the middle of a
+ * smoke puff is the one artefact that would be visible from any distance.
+ *
+ * @param {number} size
+ * @param {number} seed
+ * @returns {Float32Array}
+ */
+function value_noise_field(size, seed) {
+    const field = new Float32Array(size * size);
+
+    let amplitude = 1;
+    let total = 0;
+
+    for (const period of [4, 8, 16]) {
+        const lattice = lattice_values(period, seed + period);
+
+        for (let y = 0; y < size; y++) {
+            for (let x = 0; x < size; x++) {
+                field[y * size + x] += amplitude * sample_lattice(
+                    lattice, period, x / size * period, y / size * period
+                );
+            }
+        }
+
+        total += amplitude;
+        amplitude *= 0.55;
+    }
+
+    for (let i = 0; i < field.length; i++) {
+        field[i] /= total;
+    }
+
+    return field;
+}
+
+/**
+ * @param {number} period
+ * @param {number} seed
+ * @returns {Float32Array} `period * period` values in `[0, 1]`
+ */
+function lattice_values(period, seed) {
+    const random = seeded_random(seed);
+    const values = new Float32Array(period * period);
+
+    for (let i = 0; i < values.length; i++) {
+        values[i] = random();
+    }
+
+    return values;
+}
+
+/**
+ * Smooth bilinear lookup, wrapping at the period so the field tiles.
+ *
+ * @param {Float32Array} lattice
+ * @param {number} period
+ * @param {number} x
+ * @param {number} y
+ * @returns {number}
+ */
+function sample_lattice(lattice, period, x, y) {
+    const x0 = Math.floor(x);
+    const y0 = Math.floor(y);
+    const fx = smootherstep(x - x0);
+    const fy = smootherstep(y - y0);
+
+    const at = (ix, iy) => lattice[((iy % period) + period) % period * period + ((ix % period) + period) % period];
+
+    return lerp(
+        lerp(at(x0, y0), at(x0 + 1, y0), fx),
+        lerp(at(x0, y0 + 1), at(x0 + 1, y0 + 1), fx),
+        fy
+    );
+}
+
+/**
+ * mulberry32 — small, fast, and good enough for texture noise. Named so that "deterministic" above
+ * is a claim about a specific generator rather than about `Math.random`.
+ *
+ * @param {number} seed
+ * @returns {function(): number} uniform in `[0, 1)`
+ */
+function seeded_random(seed) {
+    let state = seed >>> 0;
+
+    return () => {
+        state = (state + 0x6d2b79f5) >>> 0;
+
+        let t = state;
+
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+
+/**
+ * @param {number} edge0
+ * @param {number} edge1
+ * @param {number} x
+ * @returns {number}
+ */
+function smoothstep(edge0, edge1, x) {
+    const t = clamp((x - edge0) / (edge1 - edge0), 0, 1);
+
+    return t * t * (3 - 2 * t);
+}
+
+/**
+ * @param {number} t
+ * @returns {number}
+ */
+function smootherstep(t) {
+    return t * t * t * (t * (t * 6 - 15) + 10);
+}
+
+/**
+ * @param {number} a
+ * @param {number} b
+ * @param {number} t
+ * @returns {number}
+ */
+function lerp(a, b, t) {
+    return a + (b - a) * t;
+}
+
+/**
+ * @param {number} value
+ * @param {number} low
+ * @param {number} high
+ * @returns {number}
+ */
+function clamp(value, low, high) {
+    return value < low ? low : (value > high ? high : value);
+}