@codincod/ornament 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,63 @@
-# Temporary Holding Version
+# codin-cod-ornament
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The sea behind [CodinCod](https://codincod.com): what lives in it, the weather
+over it, and how each thing is drawn. Published as `@codincod/ornament`.
+
+Outside `src/canvas/`, nothing here touches a browser. The modules decide where
+a fish goes, what the sky is doing at this hour, and what each drawing looks
+like, and hand that to a renderer. Three read it:
+
+- CodinCod's site, whose `assets/js/ornament/` holds the SVG and WebGPU halves
+  and the LiveView hooks that start them, and draws with `src/canvas/` where
+  there is no graphics card.
+- [codin-cod-maintenance](https://codeberg.org/reeven/codin-cod-maintenance),
+  the page codincod.com shows while it is down, which draws with `src/canvas/`
+  and bakes a still with `src/paint/svg.ts`.
+- [seascape](https://github.com/reeveng/seascape), the desktop background, in a
+  bare V8 and in Qt's JavaScript engine.
+
+`tsconfig.json` leaves the DOM out of `lib`, so `pnpm check` fails on any
+module that reaches for one. `src/canvas/` is checked on its own, by
+`tsconfig.canvas.json`, with the DOM.
+
+## Layout
+
+- `src/*.ts`: one simulation per kind of thing in the water or the sky, each
+  with its test beside it.
+- `src/paint/`: what one drawing looks like, and `sea.ts`, which builds a whole
+  frame out of them. `ink.ts` is the colour arithmetic every renderer shares,
+  `colour.ts` reads a theme's colours back out of a stylesheet, and `svg.ts`
+  writes a frame as SVG markup, for a page that has to look right with no
+  script.
+- `src/sizes.ts` and `src/census.ts`: how big things are and how many of them
+  there are.
+- `src/canvas/flat.ts`: a frame onto a 2D canvas, the one module here that
+  needs the DOM.
+
+The package ships its TypeScript source. Import a module by its path:
+
+```ts
+import { createShoal } from "@codincod/ornament/shoal.ts"
+import { createSea } from "@codincod/ornament/paint/sea.ts"
+```
+
+## Commands
+
+```bash
+pnpm install
+pnpm test        # node --test over src/**/*.test.ts
+pnpm check       # tsc, with no DOM
+pnpm fmt         # biome
+```
+
+## Releasing
+
+1. Bump `version`, then `pnpm publish`.
+2. In CodinCod, raise the pin in `assets/package.json`. A caret range on a
+   `0.x` version stops at the next minor, so `^0.1.0` never picks up 0.2.0.
+3. Run `pnpm install` from CodinCod's root, then `mix assets.build`.
+4. In seascape, rebuild the bundle (`js/build.sh`, then `cargo build --release`).
+
+## Licence
+
+[AGPL-3.0](LICENSE), the same as CodinCod.

package/package.json

@@ -1,6 +1,38 @@
 {
   "name": "@codincod/ornament",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "The sea behind CodinCod: what lives in it, the weather over it, how each thing is drawn, and a canvas to draw it on",
+  "keywords": [
+    "codincod",
+    "generative",
+    "ornament",
+    "simulation"
+  ],
+  "author": "CodinCod <hello@codincod.com>",
+  "license": "AGPL-3.0-only",
+  "type": "module",
+  "exports": {
+    "./*": "./src/*"
+  },
+  "sideEffects": false,
+  "files": [
+    "src",
+    "!src/**/*.test.ts"
+  ],
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.15",
+    "@types/node": "^26.6.5",
+    "typescript": "^7.0.2"
+  },
+  "homepage": "https://codincod.com/",
+  "repository": {
+    "type": "git",
+    "url": "https://codeberg.org/reeven/codin-cod-ornament"
+  },
+  "scripts": {
+    "check": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.canvas.json",
+    "fmt": "biome check --write .",
+    "fmt:check": "biome check .",
+    "test": "node --test \"src/**/*.test.ts\""
+  }
 }

package/src/biome.ts

@@ -0,0 +1,157 @@
+/**
+ * The water everything is in, and the register of what is in it.
+ *
+ * Not a conductor. There is no score, nothing here decides what any animal
+ * does, and no call in this file makes anything happen. What it holds is a fact
+ * every animal in a sea has access to and none of them is told: what else is
+ * about, where, and how alarming it looks from a distance.
+ *
+ * ## Why the water needs a register at all
+ *
+ * Because the alternative is a director, and a director is what a sea does not
+ * have. A shark crossing a reef does not notify the clownfish. It swims, and
+ * the reef empties because every fish on it was watching the water and drew its
+ * own conclusion, at its own moment, at its own distance. That is why nothing
+ * in this ornament exposes a call anybody could fire at it. An animal is handed
+ * `about`, looks, and decides.
+ *
+ * The register is what makes that possible without every animal knowing about
+ * every other one. `nemos.ts`, `flora.ts` and `walkers.ts` each grew their own
+ * copy of one small shape while waiting for this, and all three said the same
+ * thing in their comments: a crab should not be importing a type from a
+ * clownfish. `Presence` is that shape, declared once, and a source of them is
+ * anything at all.
+ *
+ * ## A shark at the glass is not near a fish in the murk
+ *
+ * This water has depth and it is the dimension that gets forgotten,
+ * because a screen has only two. Everything in this ornament carries a `depth`:
+ * 0 is as far off as the water goes and 1 is up against the glass, and that
+ * range is most of the room in the scene. Two things can share a point on the
+ * screen and be a long way from each other.
+ *
+ * So a shark cruising past the camera has no business emptying a reef sitting
+ * back in the murk, however neatly the two line up. `abreast` is the share of
+ * that, and every reading in this ornament is weighed by it.
+ *
+ * ## Size and menace are different questions
+ *
+ * `size` decides how far off something is noticed, because that is what being
+ * seen underwater actually depends on. `menace` decides how much it matters
+ * once it has been. A turtle and a shark of the same length are the same
+ * silhouette at the same distance and they are not the same event, and a sea
+ * where they were is a sea where nothing that happens in it means anything.
+ *
+ * What either number turns into is not settled here. A clownfish quickens at
+ * something big and goes home for something hunting; a crab freezes at both; a
+ * crown of tentacles minds only what is nearly on top of it; a starfish never
+ * reacts to anything, because its answer takes hours and nobody is watching
+ * that long. One reading, many answers, and every one of them the animal's own.
+ *
+ * ## Nothing has to enter
+ *
+ * A water nobody entered is open water, and everything reading it goes about
+ * its day. That is not a degenerate case: it is what most of these scenes are,
+ * and it is why every `about` in this ornament is optional.
+ */
+
+/**
+ * Something in the water, as much of it as another animal can make out.
+ *
+ * Where it is, how big it looks, and whether it looks like it hunts. Not what
+ * it is. Nothing reading this register can tell a shark from a turtle except by
+ * these numbers, which is the right amount for an animal to know: a small fish
+ * on a reef has never been told what species anything is either.
+ */
+export interface Presence {
+  /** 0 is as far off as this water goes, 1 is up against the glass. */
+  readonly depth: number
+  /**
+   * How much this looks like something that hunts, 0 through 1.
+   *
+   * 0 is a shape that has never worried anybody, which is most of what crosses
+   * a sea. 1 empties a reef. Left out it is 0, so anything entering the water
+   * without an opinion about itself is merely large.
+   */
+  readonly menace?: number
+  /** How big it is across, in px, which is how far off it is noticed from. */
+  readonly size: number
+  readonly x: number
+  readonly y: number
+}
+
+/**
+ * Something that says where it is when asked.
+ *
+ * A function rather than a list, because everything in a sea is moving and a
+ * list handed over once is a list of where things were. It returns however many
+ * it speaks for: one animal, a pod of them, or none at all this moment.
+ */
+export type Source = () => readonly Presence[]
+
+export interface Biome {
+  /**
+   * Everything in the water at this moment.
+   *
+   * Gathered afresh on every ask, since nothing here keeps a clock and the
+   * answer is only true for as long as nothing has moved. The list belongs to
+   * the water and is refilled on the next ask, so read it and let it go rather
+   * than keeping it.
+   */
+  about(): readonly Presence[]
+  /**
+   * Put something in the water. What comes back takes it out again.
+   *
+   * Whatever built the animal usually does this, and an animal that does it for
+   * itself is better still, since what a thing looks like to something small is
+   * a fact about that thing. Nothing checks. A sea is not a guest list.
+   */
+  enter(source: Source): () => void
+}
+
+/**
+ * How far apart in the water two distances are before they stop mattering.
+ *
+ * A third of the way through, which is generous and meant to be. The depth of
+ * one of these scenes is not measured in anything, so this cannot be a real
+ * distance; what it has to do is stop the far murk and the near glass being the
+ * same place while leaving anything swimming at roughly your own distance
+ * plainly there. Wider than this and depth does nothing. Narrower and animals
+ * pass through each other unnoticed, which is worse than the fault it fixes.
+ */
+const REACH = 0.36
+
+/**
+ * How nearly abreast two things are, 1 side by side and 0 a water apart.
+ *
+ * The one piece of arithmetic in this file, and it is geometry rather than
+ * judgement: how far apart two things are is the water's own business, and what
+ * either of them does about it is not. It falls off rather than cutting off,
+ * because a threshold makes a shark switch from harmless to terrifying between
+ * two frames of swimming gently forward.
+ */
+export function abreast(depth: number, other: number): number {
+  return Math.max(0, 1 - Math.abs(depth - other) / REACH)
+}
+
+export function createBiome(): Biome {
+  const sources = new Set<Source>()
+  const gathered: Presence[] = []
+
+  return {
+    about() {
+      gathered.length = 0
+      for (const source of sources) {
+        for (const one of source()) gathered.push(one)
+      }
+      return gathered
+    },
+
+    enter(source) {
+      sources.add(source)
+      return () => {
+        sources.delete(source)
+      }
+    },
+  }
+}

package/src/canvas/flat.ts

@@ -0,0 +1,336 @@
+/**
+ * The sea, onto a canvas, with nothing but the browser's own rasteriser.
+ *
+ * The renderer every machine has. `card.ts` is faster wherever there is a card
+ * to talk to, and this is what draws the water when there is not: an old
+ * browser, a machine without WebGPU, a device that answered the adapter request
+ * with nothing. The picture is the same picture.
+ *
+ * ## Two things a card does per pixel that a canvas cannot
+ *
+ * A fragment shader reads the water's own gradient at the height of every pixel
+ * it fills, and works out how far a light has given out at that same height. A
+ * canvas fill takes one colour, or one gradient built before the fill starts.
+ *
+ * So the height a colour is read at is decided per drawing here. Most of what
+ * swims is small enough that one reading is the truth: a fish is a few dozen px
+ * tall and the water does not change over that. What is not small says so, by
+ * fading down the box or by covering a good share of it, and those are drawn
+ * through a gradient with the same arithmetic sampled along it. Both renderers
+ * agree on the numbers; they disagree on how often they ask.
+ *
+ * ## Why the fill rule matters more than it looks
+ *
+ * An animal is several closed shapes meant to overlap: a body, a tail swung off
+ * its joint, a fin rooted inside the back. Filled as one path with the non-zero
+ * rule they are one silhouette, which is the animal. Filled one after another
+ * they are three shapes painted over each other, and at the weight ornament is
+ * drawn at every overlap shows as a bright seam. A canvas fills non-zero by
+ * default, so this gets it for nothing; the card has to be told.
+ */
+import { FORM, held, OWN, Reader, type View } from "../paint/frame.ts"
+import { css, hueOf, leftAt, type Palette } from "../paint/ink.ts"
+
+/**
+ * How tall a drawing has to be, as a share of the box, before it is worth a
+ * gradient rather than one reading of the water.
+ *
+ * Under this the error is smaller than the step between two neighbouring values
+ * of an eight bit channel, so a gradient would cost a fill and change nothing.
+ */
+const TALL = 0.08
+
+/**
+ * How many places a gradient is sampled at.
+ *
+ * Both the water's colour and how far a light has given out are curves, and a
+ * gradient between two stops is a straight line. This is where the two stop
+ * being told apart on a screen.
+ */
+const STOPS = 7
+
+export interface Box {
+  height: number
+  width: number
+}
+
+export interface FlatOptions {
+  /**
+   * How far past the box a drawing may stand before it is skipped, as a share
+   * of the box.
+   *
+   * Nothing in the water knows where the edge of the picture is, so a fish that
+   * has left is still swum and a plant behind a mass of near rock is still cut.
+   * A renderer is the last chance to not pay for them.
+   */
+  bleed?: number
+}
+
+/** What of the water the box is showing. */
+interface Seen {
+  foot: number
+  left: number
+  right: number
+  top: number
+}
+
+export interface Flat {
+  draw(floats: Float32Array, palette: Palette, box: Box, density?: number, view?: View | null): void
+}
+
+/**
+ * A canvas that will draw a frame of this water whenever it is handed one.
+ *
+ * It keeps no clock and owns no simulation. Something else steps the sea and
+ * hands over the block; all this does is put it on the screen.
+ */
+export function createFlat(canvas: HTMLCanvasElement, options: FlatOptions = {}): Flat | null {
+  const context = canvas.getContext("2d")
+  if (!context) return null
+
+  const bleed = options.bleed ?? 0.25
+
+  // Where each drawing is and how far back it stands, so the solid ones can be
+  // put in order. Kept between frames: a busy sea is a few thousand drawings,
+  // and three arrays of them rebuilt sixty times a second is the sort of
+  // housekeeping that costs more than the work it is for.
+  let places = new Int32Array(4096)
+  let lanes = new Float32Array(4096)
+  let order: number[] = []
+
+  const room = (needed: number) => {
+    if (needed > places.length) {
+      const size = 1 << Math.ceil(Math.log2(Math.max(16, needed)))
+      places = new Int32Array(size)
+      lanes = new Float32Array(size)
+    }
+    while (order.length < needed) order.push(order.length)
+    if (order.length > needed) order.length = needed
+  }
+
+  return {
+    /**
+     * One frame, onto the canvas.
+     *
+     * `box` is the water's own size in the units it was laid out in, which is
+     * not the canvas's size in pixels: a screen at twice the density draws the
+     * same sea out of four times as many of them.
+     */
+    draw(
+      floats: Float32Array,
+      palette: Palette,
+      box: Box,
+      density = 1,
+      view: View | null = null,
+    ): void {
+      const camera = held(floats)
+      const reader = new Reader(floats)
+
+      context.setTransform(density, 0, 0, density, 0, 0)
+      context.clearRect(0, 0, box.width, box.height)
+
+      const middle = { x: box.width / 2, y: box.height / 2 }
+
+      if (view) {
+        context.translate(middle.x, middle.y)
+        context.scale(view.scale, view.scale)
+        context.translate(-view.x, -view.y)
+      } else {
+        // The frame, held by somebody rather than bolted to a tripod. It is
+        // drawn a little larger than its box to pay for the wander, which is
+        // what overscan is for: a frame that has wandered must never be a frame
+        // with the page showing along one edge.
+        context.translate(middle.x + camera.swayX, middle.y + camera.swayY)
+        context.rotate(camera.tilt)
+        context.scale(camera.overscan, camera.overscan)
+        context.translate(-middle.x, -middle.y)
+      }
+
+      // What of the water is actually in the box, which a window on a larger
+      // water sees only a piece of. Nothing in the sea knows where the edge of
+      // the picture is, so this is the last chance not to pay for what is past
+      // it.
+      const seen: Seen = view
+        ? {
+            foot: view.y + box.height / (2 * view.scale),
+            left: view.x - box.width / (2 * view.scale),
+            right: view.x + box.width / (2 * view.scale),
+            top: view.y - box.height / (2 * view.scale),
+          }
+        : { foot: box.height, left: 0, right: box.width, top: 0 }
+
+      room(reader.count)
+
+      // Where everything is, and which of the two it is in. Anything you can
+      // see the water through is laid over what is already there in the order
+      // it arrives, since two lights over one another are a painting rather
+      // than a stack of distances; everything else takes its turn by how far
+      // back it stands, which an infinite lane arranges.
+      let kept = 0
+      while (reader.next()) {
+        const through =
+          reader.alpha < 0.999 || reader.form === FORM.light || reader.form === FORM.wash
+        places[kept] = reader.offset
+        lanes[kept] = through ? Number.POSITIVE_INFINITY : reader.lane
+        kept++
+      }
+
+      // Stable, because equal lanes have to keep the order they were drawn in.
+      order.length = kept
+      for (let at = 0; at < kept; at++) order[at] = at
+      order.sort((a, b) => {
+        const one = lanes[a] ?? 0
+        const two = lanes[b] ?? 0
+        return one === two ? a - b : one - two
+      })
+
+      const paint = new Reader(floats)
+      for (const which of order) {
+        paint.stand(places[which] ?? 0)
+        one(context, paint, palette, box, seen, bleed)
+      }
+
+      context.setTransform(1, 0, 0, 1, 0, 0)
+    },
+  }
+}
+
+/** One drawing, whichever of the four kinds it is. */
+function one(
+  context: CanvasRenderingContext2D,
+  mark: Reader,
+  palette: Palette,
+  box: Box,
+  seen: Seen,
+  bleed: number,
+): void {
+  if (mark.alpha <= 0.002) return
+
+  if (mark.form === FORM.wash) {
+    context.fillStyle = down(context, mark, palette, box, 0, box.height)
+    context.fillRect(0, 0, box.width, box.height)
+    return
+  }
+
+  if (mark.form === FORM.light) {
+    light(context, mark, palette, box)
+    return
+  }
+
+  const floats = mark.floats
+  const shape = new Path2D()
+  let top = Number.POSITIVE_INFINITY
+  let foot = Number.NEGATIVE_INFINITY
+  let left = Number.POSITIVE_INFINITY
+  let right = Number.NEGATIVE_INFINITY
+
+  mark.each((from, points) => {
+    if (points < 2) return
+    for (let i = 0; i < points; i++) {
+      const x = floats[from + i * 2] ?? 0
+      const y = floats[from + i * 2 + 1] ?? 0
+      if (i === 0) shape.moveTo(x, y)
+      else shape.lineTo(x, y)
+      if (y < top) top = y
+      if (y > foot) foot = y
+      if (x < left) left = x
+      if (x > right) right = x
+    }
+    if (mark.form !== FORM.stroke) shape.closePath()
+  })
+
+  if (top > foot) return
+
+  // Off the picture entirely, which happens to a fish that has left and to
+  // every plant standing behind a mass of near rock.
+  const margin = Math.max(seen.right - seen.left, seen.foot - seen.top) * bleed
+  if (right < seen.left - margin || left > seen.right + margin) return
+  if (foot < seen.top - margin || top > seen.foot + margin) return
+
+  const tall = foot - top > box.height * TALL
+  const ink = tall
+    ? down(context, mark, palette, box, top, foot)
+    : flat(mark, palette, box, mark.shade === OWN ? (top + foot) / 2 : mark.shade)
+
+  if (mark.form === FORM.stroke) {
+    context.strokeStyle = ink
+    context.lineWidth = Math.max(0.1, mark.width)
+    context.lineCap = "round"
+    context.lineJoin = "round"
+    context.stroke(shape)
+    return
+  }
+
+  context.fillStyle = ink
+  context.fill(shape)
+}
+
+/**
+ * A round light, as an ellipse with the falling off built into a gradient.
+ *
+ * The card does this per pixel out of a distance from the middle. Here it is a
+ * radial gradient with the same curve sampled along it, which is the one place
+ * a canvas gets the better bargain: a gradient is a gradient however many
+ * pixels it covers.
+ */
+function light(context: CanvasRenderingContext2D, mark: Reader, palette: Palette, box: Box): void {
+  const floats = mark.floats
+  const cx = floats[mark.first + 1] ?? 0
+  const cy = floats[mark.first + 2] ?? 0
+  const across = mark.width
+  if (across <= 0) return
+
+  const hue = hueOf(
+    palette,
+    mark.tone,
+    mark.weight,
+    mark.shade === OWN ? cy : mark.shade,
+    box.height,
+  )
+  // Under 1 this is a streak rather than a disc, which is what a lens does with
+  // a light it cannot quite hold. The gradient is built inside the squash as
+  // well as the shape, since a gradient is read in whatever space it is filled.
+  const thin = Math.max(0.001, mark.thin)
+
+  context.save()
+  context.translate(cx, cy)
+  context.scale(1, thin)
+
+  const glow = context.createRadialGradient(0, 0, 0, 0, 0, across)
+  for (let stop = 0; stop < STOPS; stop++) {
+    const t = stop / (STOPS - 1)
+    glow.addColorStop(t, css(hue, mark.alpha * (1 - t) ** mark.fall))
+  }
+
+  context.fillStyle = glow
+  context.beginPath()
+  context.arc(0, 0, across, 0, Math.PI * 2)
+  context.fill()
+  context.restore()
+}
+
+/** One colour, read at one height. */
+function flat(mark: Reader, palette: Palette, box: Box, y: number): string {
+  const hue = hueOf(palette, mark.tone, mark.weight, y, box.height)
+  return css(hue, leftAt(mark.alpha, mark.fadeTop, mark.fadeSpan, mark.fall, mark.spent, y))
+}
+
+/** The same, sampled down the drawing's own height. */
+function down(
+  context: CanvasRenderingContext2D,
+  mark: Reader,
+  palette: Palette,
+  box: Box,
+  top: number,
+  foot: number,
+): CanvasGradient {
+  const run = context.createLinearGradient(0, top, 0, Math.max(top + 1, foot))
+
+  for (let stop = 0; stop < STOPS; stop++) {
+    const t = stop / (STOPS - 1)
+    const y = top + (foot - top) * t
+    run.addColorStop(t, flat(mark, palette, box, mark.shade === OWN ? y : mark.shade))
+  }
+
+  return run
+}

package/src/caustics.ts

@@ -0,0 +1,81 @@
+/**
+ * Light off a moving surface, landing on the ground.
+ *
+ * A wave is a lens. The top of the water is never flat, so the light coming
+ * through it is focused into bright lines and starved between them, and what
+ * lands on the sand is a net of them sliding about. It is the one thing that
+ * says a sea is lit from a surface rather than merely lighter towards the top.
+ *
+ * ## Why this is a field and not a net
+ *
+ * A caustic drawn from above is the net everybody has seen. This water is seen
+ * from the side, and a floor seen edge on has no room for a net on it: what
+ * reaches the eye is the light on whatever faces upwards, which here is the
+ * ridges. So this is asked a place and answers how much light is on it, and the
+ * painter walks the ridges it has rather than laying a pattern over the box.
+ *
+ * ## Why the noise is ridged
+ *
+ * Smooth noise is cloud. What separates a caustic from a cloud is that it has
+ * lines in it: the focusing is sharp and the dark between two bright lines is
+ * darker than the average, so the thing to fold is the middle of the range up
+ * into a crease and then steepen it. Plain noise put through a curve stays a
+ * cloud however hard it is squeezed.
+ */
+import { makeNoise2 } from "./perlin.ts"
+
+export interface Caustics {
+  /**
+   * How much light is on the ground at a place, 0 to 1.
+   *
+   * `across` is a share of the box and `depth` is how far forward the ground
+   * there is, so two ridges at the same x and different distances are lit
+   * differently. They have to be: the same pattern on every ridge would flatten
+   * the whole bed into one surface, which is the opposite of the errand.
+   */
+  at(across: number, depth: number): number
+  step(seconds: number): void
+}
+
+export interface CausticsOptions {
+  seed: number
+}
+
+/** How many bright lines fit across the box, and across the water's distance. */
+const CELLS = 7.5
+
+const DEEP_CELLS = 2.4
+
+/**
+ * How fast the whole pattern slides, in widths a second.
+ *
+ * Slow. The surface it comes off is moving quickly, but what a caustic does on
+ * the ground is mostly breathe: the lines wander and swell where they are
+ * rather than travelling, and a pattern crossing the picture at a rate reads as
+ * something being projected onto the sand.
+ */
+const DRIFT = 0.045
+
+/** How narrow the bright lines are, and how sharply they give out. */
+const CREASE = 2.1
+
+const SHARP = 3.2
+
+export function createCaustics(options: CausticsOptions): Caustics {
+  const noise = makeNoise2(options.seed ^ 0x6c1f)
+  let slid = 0
+
+  return {
+    at(across: number, depth: number): number {
+      const held = noise(across * CELLS + slid, depth * DEEP_CELLS)
+      const crease = 1 - Math.abs(held) * CREASE
+      if (crease <= 0) return 0
+
+      return Math.min(1, crease) ** SHARP
+    },
+
+    step(seconds: number): void {
+      slid += seconds * DRIFT
+    },
+  }
+}