@codincod/ornament 0.0.0-stage → 0.2.0

package/src/relics.ts

@@ -0,0 +1,451 @@
+/**
+ * What is lying on the bottom, and what is coming out of it.
+ *
+ * Set pieces: a wreck, a volcanic smoker, and the two things down there that
+ * are jokes rather than scenery. Kept free of the DOM the way the rest of the
+ * ornament is.
+ *
+ * ## Rarity is the feature
+ *
+ * Everything here is placed by a roll of the seeded dice, and most rolls come
+ * up empty. That is deliberate and it is the only thing making any of it worth
+ * drawing: a wreck in every sea is set dressing, and a wreck in one sea out of
+ * three is something you found. The same water always has the same relics,
+ * because the seed decides, so it is a place rather than a slot machine.
+ *
+ * A consequence worth stating: most people will never see the chest. That is
+ * the correct outcome. Ornament that everybody sees every time has to justify
+ * itself to everybody every time, and this does not have to justify itself at
+ * all.
+ *
+ * ## The smoker
+ *
+ * A chimney, and a plume coming off it. The plume is the only part of the
+ * seabed that moves under its own steam rather than the water's, which is what
+ * makes a vent read as hot: everything else down there leans when the current
+ * leans, and this goes straight up regardless and then gets bent.
+ *
+ * ## The joke
+ *
+ * `chest` is the site's own, from `Marks.chest/1`: a chest with a laptop open
+ * on its lid, screen still lit. The site's rule for it is kept here, because
+ * the rule is most of why it works. It is never placed beside anything that
+ * explains it, and it is drawn small and half behind whatever is in front of
+ * it, for somebody who looks.
+ *
+ * The screen is the one thing in the entire seascape drawn at full weight. Down
+ * in the dark, under a hundred faint animals, there is a lit rectangle the size
+ * of a fingernail. Nothing else is allowed to be that bright, which is what
+ * makes it findable at all.
+ */
+
+import { makeNoise2, makeRandom } from "./perlin.ts"
+import type { Point } from "./seabed.ts"
+
+export type RelicKind = "block" | "chest" | "smoker" | "wreck"
+
+export interface Relic {
+  /** 0 is as far off as this water goes, 1 is up against the glass. */
+  readonly depth: number
+  readonly kind: RelicKind
+  /** How far it has settled over, in radians. Nothing down there is level. */
+  readonly lean: number
+  /** px per unit of the drawing. */
+  readonly scale: number
+  readonly x: number
+  readonly y: number
+}
+
+export interface Puff {
+  /** How far through its life it is, 0 new and 1 gone. */
+  age: number
+  r: number
+  /**
+   * This one's own share of the climb.
+   *
+   * Every puff used to rise at exactly the rate every other puff rose at, and
+   * a column of identical circles let go at an even beat is a string of beads,
+   * not a plume. One number each, drawn once, and the stack breaks up.
+   */
+  readonly rise: number
+  x: number
+  y: number
+}
+
+export interface Relics {
+  readonly plume: readonly Puff[]
+  readonly relics: readonly Relic[]
+  resize(width: number, height: number, floor: (x: number, depth?: number) => number): void
+  step(seconds: number): void
+}
+
+export interface RelicsOptions {
+  /** The ground at x, at a given distance; `seabed.floorAt`. */
+  floor: (x: number, depth?: number) => number
+  height: number
+  seed: number
+  width: number
+}
+
+/**
+ * The chance each relic is in this water at all.
+ *
+ * The wreck is the likeliest because it is the one that pays off as scenery
+ * even when you are not looking for it. The chest is the rarest by a distance,
+ * for the reason in the module note.
+ */
+const ODDS: Readonly<Record<RelicKind, number>> = {
+  block: 0.34,
+  chest: 0.1,
+  smoker: 0.5,
+  wreck: 0.4,
+}
+
+/**
+ * How big each is, in px per unit of its own drawing, before depth takes its
+ * share.
+ *
+ * Per unit and not px across, so a renderer never has to know how wide any of
+ * these shapes happens to be. The wreck and the chest are both two units wide
+ * and the smoker is one, and that is between each drawing and its own comment.
+ */
+const SIZES: Readonly<Record<RelicKind, readonly [number, number]>> = {
+  block: [17, 26],
+  chest: [20, 29],
+  smoker: [38, 66],
+  wreck: [95, 170],
+}
+
+/** How far one may have settled over, in radians. */
+const LEAN: Readonly<Record<RelicKind, number>> = {
+  block: 0.6,
+  chest: 0.12,
+  smoker: 0.05,
+  wreck: 0.16,
+}
+
+/**
+ * How far back a relic stands. Never up against the glass, never in the murk.
+ *
+ * The far end used to reach 0.35, which was harmless while every relic was
+ * planted on the near sand whatever it claimed its distance was. Standing them
+ * on the ground they are actually drawn at put them among the bands of hills,
+ * which run to about 0.75, and a wreck behind a rise is a wreck with its masts
+ * showing on a good day and nothing at all on most.
+ *
+ * Half buried is worth having and worth keeping rare: it is what a wreck seen
+ * across a slope really looks like. So the range starts in front of most of the
+ * ground rather than behind it, and the odd one that lands behind a crest is
+ * the odd one, not the usual case.
+ */
+const DEPTH_FAR = 0.6
+
+const DEPTH_NEAR = 0.9
+
+/** How often a smoker lets go of a puff, in seconds. */
+const PUFF_GAP = 0.13
+
+/** How much faster or slower than the rest one puff may climb. */
+const PUFF_SLOWEST = 0.72
+
+const PUFF_FASTEST = 1.28
+
+/** How long one lasts, and how fast it climbs at first, in px a second. */
+const PUFF_LIFE = 8
+
+const PUFF_RISE = 52
+
+/**
+ * How much it slows as it spreads, and how fast it swells.
+ *
+ * The swell is held down harder than looks right on paper. A puff's area goes
+ * up with the square of its radius while its weight only comes down with its
+ * age, so one that doubles in size has spread the same ink over four times the
+ * water and vanished; the plume then reads as a few dots at the vent and
+ * nothing above them, which is what it did at nine.
+ */
+const PUFF_DRAG = 0.62
+
+const PUFF_SWELL = 4.5
+
+/** How far the water carries a plume sideways, in px a second. */
+const PUFF_SWAY = 16
+
+/**
+ * How many features of the current fit across the box, and up it.
+ *
+ * Far more up than across, because that is the difference between a current
+ * and a wind. Water moves in layers: what is going one way at the floor is
+ * going another two metres above it, and a plume crossing those layers is
+ * pulled apart by them. Read at one feature per column height the whole plume
+ * gets one push and leans like smoke.
+ */
+const FIELD_CELLS = 2.4
+
+const FIELD_ROWS = 5.5
+
+const MIN_SPAN = 1
+
+/**
+ * How many draws to throw away before the first decision is taken on one.
+ *
+ * The generator is an xorshift, and an xorshift's first outputs still carry the
+ * shape of the seed it was given: neighbouring seeds start with neighbouring
+ * numbers. Nothing else in the ornament notices, because everything else asks
+ * for hundreds of draws and only the first few are poor. This asks for four,
+ * and they decide the whole contents of the sea, so a run of seeds came out
+ * with a wreck and a smoker in almost every one of them and never much else.
+ *
+ * Discarding a handful first is the standard answer and it is enough here.
+ */
+const WARMUP = 12
+
+export function createRelics(options: RelicsOptions): Relics {
+  const random = makeRandom(options.seed ^ 0x3c2f)
+  const shear = makeNoise2(options.seed ^ 0xa71c)
+
+  let width = Math.max(MIN_SPAN, options.width)
+  let height = Math.max(MIN_SPAN, options.height)
+  let floor = options.floor
+  let since = 0
+  let drift = 0
+
+  const relics: Relic[] = []
+  const plume: Puff[] = []
+
+  /**
+   * What is in this sea, from its own generator started afresh.
+   *
+   * Its own, and restarted every time, because what a sea contains has to be a
+   * pure function of its seed. Drawing from the shared stream meant a resize
+   * dealt a second hand: a window dragged wider, or a monitor coming back from
+   * sleep, and the wreck was gone and there was a chest instead. That is a
+   * wallpaper whose contents nobody can rely on having seen, and it is also why
+   * the same sea could not be looked at twice while any of this was being tuned.
+   *
+   * The warm-up is separate from that and needed for its own reason; see
+   * `WARMUP`.
+   */
+  function place(): void {
+    const roll = makeRandom(options.seed ^ 0x8e11)
+    for (let spun = 0; spun < WARMUP; spun++) roll()
+
+    relics.length = 0
+
+    for (const kind of ["wreck", "smoker", "block", "chest"] as const) {
+      if (roll() >= ODDS[kind]) continue
+
+      const [least, most] = SIZES[kind]
+      const depth = DEPTH_FAR + roll() * (DEPTH_NEAR - DEPTH_FAR)
+      // Kept out of the corners: a wreck half off the edge of the picture is a
+      // wreck somebody cropped.
+      const x = width * (0.12 + roll() * 0.76)
+
+      relics.push({
+        depth,
+        kind,
+        lean: (roll() - 0.5) * LEAN[kind] * 2,
+        scale: (least + roll() * (most - least)) * depth,
+        x,
+        // Its own distance, which is the whole of the point. The ground is a
+        // different line at every distance and this asked for the one at the
+        // front, so a wreck standing a long way back was planted on the sand
+        // that belongs against the glass: a shape drawn at its own distance and
+        // sitting somewhere else entirely.
+        y: floor(x, depth),
+      })
+    }
+  }
+
+  const smoker = (): Relic | undefined => relics.find((one) => one.kind === "smoker")
+
+  place()
+
+  return {
+    plume,
+    relics,
+
+    resize(nextWidth, nextHeight, nextFloor) {
+      width = Math.max(MIN_SPAN, nextWidth)
+      height = Math.max(MIN_SPAN, nextHeight)
+      floor = nextFloor
+      plume.length = 0
+      place()
+    },
+
+    step(seconds) {
+      const dt = Math.min(Math.max(seconds, 0), 0.1)
+      drift += dt * 0.05
+
+      const vent = smoker()
+      if (vent) {
+        since += dt
+        if (since >= PUFF_GAP) {
+          since = 0
+          plume.push({
+            age: 0,
+            r: vent.scale * (0.07 + random() * 0.06),
+            rise: PUFF_SLOWEST + random() * (PUFF_FASTEST - PUFF_SLOWEST),
+            x: vent.x + (random() - 0.5) * vent.scale * 0.3,
+            y: vent.y - vent.scale * SMOKER_LIP,
+          })
+        }
+      }
+
+      for (let at = plume.length - 1; at >= 0; at--) {
+        const puff = plume[at]
+        if (!puff) continue
+
+        puff.age += dt / PUFF_LIFE
+        if (puff.age >= 1 || puff.y + puff.r < 0) {
+          plume.splice(at, 1)
+          continue
+        }
+
+        // Quick off the chimney, and nearly stalled by the top of its life.
+        // Hot water in cold water rises until it is no warmer than what it has
+        // climbed into, and then it stops and lies there; a plume that kept its
+        // speed to the end would be a jet, and a jet is a thing under pressure.
+        const climb = PUFF_RISE * puff.rise * (1 - PUFF_DRAG * puff.age)
+        puff.y -= climb * dt
+
+        // Spreading fastest where it is slowest, which is what turns the top of
+        // a plume into a layer rather than a point.
+        puff.r += PUFF_SWELL * (0.55 + puff.age) * dt
+
+        // A current, not a wind.
+        //
+        // This used to multiply the push by the puff's own age, so every puff
+        // was shoved harder than the one below it and the column leaned off in
+        // one direction and kept leaning: smoke off a chimney on a breezy day.
+        // Water does not do that. A current is the same push on everything in
+        // it, it varies far more with depth than with time, and it changes its
+        // mind, so what a plume does in it is lean one way, straighten, and
+        // lean the other. Reading the field finely up the column is what puts
+        // the snake in it; taking the age out is what stops it being weather.
+        puff.x +=
+          shear((puff.x / width) * FIELD_CELLS + drift, (puff.y / height) * FIELD_ROWS + drift) *
+          PUFF_SWAY *
+          dt
+      }
+    },
+  }
+}
+
+/**
+ * A wreck, in a hull two units long and lying on the origin.
+ *
+ * A silhouette and nothing else. At the weight anything down here is drawn,
+ * detail is wasted: what carries a wreck is the one line nothing in nature
+ * makes, which is a long straight sheer with a broken end on it. So the deck is
+ * straight, the bow is intact, and the stern is gone.
+ *
+ * The masts are what stop it reading as a rock. They are the only part that
+ * leaves the ground, and leaning verticals over a long horizontal suggest
+ * a ship at any size and any distance.
+ */
+export const WRECK =
+  "M-1 0 L-0.62 -0.2 L0.52 -0.24 Q0.86 -0.23 1 -0.06 L0.94 0.04 Q0.4 0.11 -0.3 0.09 Z " +
+  "M-0.62 -0.2 L-0.58 -0.34 L0.44 -0.37 L0.52 -0.24 Z " +
+  "M0.1 -0.36 L0.16 -0.92 L0.23 -0.36 Z " +
+  "M-0.3 -0.35 L-0.2 -0.76 L-0.16 -0.35 Z"
+
+/** The spar across the standing mast, so the ship has rigging without any. */
+export const WRECK_SPAR: readonly Point[] = [
+  { x: 0.02, y: -0.74 },
+  { x: 0.3, y: -0.66 },
+]
+
+/**
+ * A smoker, in a chimney one unit wide sitting on the origin.
+ *
+ * Tall and thin, and that proportion is the whole drawing. A chimney as wide as
+ * it is high is a mountain, which is what this was first: the thing a vent is
+ * has to read at a glance and there are only two facts available at this size,
+ * that it is narrow and that it is far taller than anything else on the floor.
+ *
+ * Not symmetrical, and stepped rather than smooth, because it built itself out
+ * of what it was pouring out. The lip is offset from the base for the same
+ * reason: nothing that grew from a leak grew straight.
+ */
+export const SMOKER =
+  "M-0.5 0 L-0.3 -0.7 L-0.22 -1.5 L-0.16 -2.1 L-0.2 -2.42 L-0.02 -2.5 " +
+  "L0.06 -2.16 L0.14 -2.34 L0.16 -1.9 L0.24 -1.2 L0.42 0 Z"
+
+/**
+ * How far up the drawing the throat is, in the same units.
+ *
+ * Exported because the plume has to leave from it, and read off the drawing
+ * rather than guessed at. A plume that starts anywhere else comes out of the
+ * side of the chimney, and a chimney venting sideways is a hole in a rock.
+ */
+export const SMOKER_LIP = 2.45
+
+/**
+ * A sunken code block, in a card two units wide, centred on the origin.
+ *
+ * The site's `Marks.code_block/1`: a card and three lines of unequal length
+ * with the middle one longest, which is the shape of a snippet at any size.
+ *
+ * The lines are paths and not rectangles, which is not a style choice. A
+ * renderer draws these inside a scale of a hundred or more, and a rectangle a
+ * fifth of a unit tall is rounded to a whole pixel before that scale is applied
+ * and comes out twenty units tall. Everything here is under a unit, so
+ * everything here is a path.
+ */
+export const BLOCK_CARD = "M-1 -0.73 L1 -0.73 L1 0.73 L-1 0.73 Z"
+
+export const BLOCK_LINES: readonly string[] = [
+  "M-0.62 -0.45 L0.2 -0.45 L0.2 -0.29 L-0.62 -0.29 Z",
+  "M-0.62 -0.08 L0.74 -0.08 L0.74 0.08 L-0.62 0.08 Z",
+  "M-0.62 0.29 L-0.03 0.29 L-0.03 0.45 L-0.62 0.45 Z",
+]
+
+/**
+ * The chest, in a body two units wide sitting on the origin.
+ *
+ * `body` is the whole silhouette, trunk and domed lid in one closed path; the
+ * seam, the hasp and the laptop are separate because each is drawn in a
+ * different weight, and the screen is drawn in a weight nothing else in the sea
+ * is allowed.
+ *
+ * The trunk and the lid are one subpath and not two, which took a render to
+ * find: they meet along a shared edge, and two subpaths meeting along an edge
+ * are two subpaths a renderer is entitled to cancel against each other. What
+ * came out was a box with nothing on top of it.
+ *
+ * Wider than it is tall, with a shallow dome, which is the shape everybody's
+ * idea of a chest has.
+ */
+export const CHEST_BODY = "M-1 0 L-1 -0.62 Q-1 -1.12 0 -1.12 Q1 -1.12 1 -0.62 L1 0 Z"
+
+/**
+ * The one line across it, at the seam between lid and trunk, and the hasp.
+ *
+ * One, and it took cutting three to see why. Every strap is subtracted from the
+ * silhouette in the colour of the water, so each one is a hole; the chest is
+ * fifty pixels wide in the scene, and three holes in fifty pixels is not a
+ * chest with straps on it, it is six small blocks in a row. What survives at
+ * that size is the seam, because the seam is the only line that says the thing
+ * opens.
+ */
+export const CHEST_BANDS: readonly string[] = ["M-1 -0.66 L1 -0.66 L1 -0.58 L-1 -0.58 Z"]
+
+export const CHEST_LOCK = "M-0.13 -0.72 L0.13 -0.72 L0.13 -0.44 L-0.13 -0.44 Z"
+
+/**
+ * The laptop open on the lid: the screen, the base under it, and the three
+ * lines still on the screen.
+ *
+ * Leaning back the way an open one does, and small against the chest, because
+ * what makes this land is finding it rather than being shown it.
+ */
+export const LAPTOP_SCREEN = "M-0.44 -1.94 L0.3 -2.04 L0.38 -1.2 L-0.36 -1.1 Z"
+
+export const LAPTOP_BASE = "M-0.42 -1.14 L0.46 -1.24 L0.56 -1.1 L-0.34 -1 Z"
+
+export const LAPTOP_LINES: readonly string[] = [
+  "M-0.3 -1.82 L0.02 -1.86 L0.02 -1.78 L-0.3 -1.74 Z",
+  "M-0.3 -1.66 L0.16 -1.72 L0.16 -1.64 L-0.3 -1.58 Z",
+  "M-0.3 -1.5 L-0.08 -1.53 L-0.08 -1.45 L-0.3 -1.42 Z",
+]