@codincod/ornament 0.0.0-stage → 0.1.0

package/src/crags.ts

@@ -0,0 +1,974 @@
+/**
+ * What you are looking out from, and what is standing in the distance.
+ *
+ * Rock near the edges of the picture, and now and then an island. Kept free of
+ * the DOM the way the rest of the ornament is, and static the way `seabed.ts`
+ * is: nothing here moves, so there is no `step`. Rock that swayed would be a
+ * landslide.
+ *
+ * ## Why a seascape needs somewhere to be
+ *
+ * The bed gave the water a bottom and the distance gave it a depth, and what is
+ * still missing is a place. Open water with animals in it is a picture of
+ * animals; the same water with a wall at the edge of the frame is a picture of
+ * being somewhere, and the difference costs one silhouette.
+ *
+ * It works because of what near rock does to everything else. A shape a metre
+ * from your mask is black, hard-edged and out of focus, and it is the only
+ * thing in the scene that can be. Put one at the edge and every other distance
+ * in the picture is measured against it, so the murk becomes far rather than
+ * merely dim. It is the same trick a landscape painter uses with a tree in the
+ * foreground, and it is the difference between looking at water and being in
+ * it.
+ *
+ * ## Most days there is none
+ *
+ * The framing is drawn from the seed, which on a desktop is the day's, so a
+ * machine gets one framing today and a different one tomorrow and every screen
+ * on it agrees. Open water is much the commonest, and it has to be: a cave you
+ * are in every day is a room, and the whole worth of this is that some mornings
+ * the water has a shape to it that it did not have yesterday.
+ *
+ * The four are one thing at different strengths. A shoulder is one rock at one
+ * edge, which reads as swimming past something. Hills are low ground close by
+ * at both edges, which reads as a channel. A cave is both walls and a roof, and
+ * it is the only one that says you are inside anything.
+ *
+ * ## The island is the other end of the same thought
+ *
+ * The ground in `seabed.ts` climbs as it goes back and stops at the horizon
+ * because that is as far as a seabed goes. An island is what happens when it
+ * does not stop: it carries on up until it is out of the water, and what the
+ * water gets is a shore. It also gives the sun something to go behind, which is
+ * the one thing in this scene that has never been occluded by anything.
+ *
+ * All of one is its outline, so all of the work is there, and the outline it
+ * used to have was an arc. One curve of one width, taller than the box every
+ * time, which put its sides in the water at the angle a sea cliff stands at and
+ * its summit somewhere above the ceiling: a wall across the back of the picture
+ * with a smooth edge, the same wall every day it turned up. Ground reads as
+ * ground for reasons that are all about that edge, and there are three of them.
+ *
+ *   * **It has a size, and the size is rolled.** The pitch of a flank is rolled
+ *     as an angle rather than falling out of a width, so nothing leaves the
+ *     water at seventy degrees by accident, and the two sides are stretched
+ *     apart because an island with matching flanks is a cone. See
+ *     `ISLE_PITCH_LEAST`.
+ *   * **It has shoulders.** A summit with lesser masses standing on its flanks,
+ *     taken together by whichever is higher, so the run from the water to the
+ *     top has a saddle in it and sometimes an outlier standing off the shore.
+ *     See `SPURS_LEAST`.
+ *   * **It has weather on it.** Octaves of the field folded at nought, which is
+ *     the shape water leaves in a hill: edges along the ridges and curves along
+ *     the valleys. Added in the island's own units rather than scaled by the
+ *     height it stands at, because scaled it dies at the waterline and leaves
+ *     the shore the one clean tangent in the picture. See `ISLE_RELIEF`.
+ *
+ * ## Rock is not a black rectangle
+ *
+ * Four things stop it being one, and the first two are about the edge.
+ *
+ *   * **It is bedded.** Two octaves of noise give a lumpy edge, and a lumpy
+ *     edge is a cloud. What rock has that a cloud has not is flats and steps,
+ *     because it breaks along its beds, so another field is quantised into
+ *     shelves and mixed in. See `LEDGE`.
+ *   * **It has masses of its own.** Noise is rough everywhere by the same
+ *     amount, which is a coastline. A wall has a few buttresses and long quiet
+ *     stretches between them, and that is `OUTCROPS_LEAST`.
+ *
+ * The other two are about what the rock is and what is on it.
+ *
+ *   * **There is rock behind the rock.** Every side is two masses at two
+ *     distances, because a single silhouette has nothing to be in front of and
+ *     the eye reads it as a border drawn on the picture rather than as a place.
+ *   * **It is alive.** `perches` are where something grows, and they come in
+ *     colonies rather than scattered, because nothing on a reef is evenly
+ *     spaced: growth goes where growth already is. A face is bare for a stretch
+ *     and then crowded, and it is the crowded parts that the eye reads the
+ *     rock's own shape off. Bare rock at this distance is a shape somebody
+ *     forgot to finish.
+ */
+
+import { gathered, type Twig } from "./flora.ts"
+import { makeNoise2, makeRandom, stir } from "./perlin.ts"
+import type { Point } from "./seabed.ts"
+
+export type Framing = "cave" | "hills" | "open" | "shoulder"
+
+/**
+ * What a thing growing on rock is.
+ *
+ * Not a species, a silhouette. At the size these are drawn the only question
+ * the eye can answer is what shape it is against the rock, and four shapes is
+ * as many as a wall can carry before they stop reading as different things.
+ * A fan stands square across the current, a frond hangs and moves, a sponge is
+ * a lump with a body, and a tuft is a scruff of short lines.
+ *
+ * The lump is the important one, for the reason `flora.ts` gives about its
+ * boulder coral: everything else here is a line, and a wall of lines is a wall
+ * of hairs however many are on it.
+ */
+export type Growth = "fan" | "frond" | "sponge" | "tuft"
+
+/** Somewhere on a face of rock where something is growing. */
+export interface Perch {
+  readonly kind: Growth
+  /** Which way it grows, in radians. Out of the rock, whatever the rock does. */
+  readonly lean: number
+  /** How big, as a multiplier a renderer scales its own drawing by. */
+  readonly size: number
+  readonly x: number
+  readonly y: number
+}
+
+export interface Crag {
+  /** How far forward it stands. Near, which is why it is nearly black. */
+  readonly depth: number
+  /** Which side of the box it is anchored to, so a renderer can close it off. */
+  readonly edge: "left" | "right" | "top"
+  /** Its face, from one end to the other. The edge behind it is the renderer's. */
+  readonly outline: readonly Point[]
+  readonly perches: readonly Perch[]
+}
+
+/** Ground that did not stop at the horizon. */
+export interface Isle {
+  readonly depth: number
+  /** Its outline, left to right, running off the top of the box in the middle. */
+  readonly outline: readonly Point[]
+}
+
+export interface Crags {
+  readonly framing: Framing
+  readonly isle: Isle | null
+  resize(width: number, height: number, floor: (x: number, depth?: number) => number): void
+  readonly rocks: readonly Crag[]
+}
+
+export interface CragsOptions {
+  /** The ground at x at a distance; `seabed.floorAt`. An island stands on it. */
+  floor: (x: number, depth?: number) => number
+  /** Force a framing rather than drawing one. For previews and for tests. */
+  framing?: Framing
+  height: number
+  /** Force the island on or off, the same way. */
+  isle?: boolean
+  seed: number
+  width: number
+}
+
+/**
+ * How likely each framing is, against the others.
+ *
+ * Weighted hard towards nothing at all. Everything in this file is a large dark
+ * shape across part of the picture, which is a strong thing to do to a
+ * background and not a thing to do most days; the shoulder is the mild one and
+ * gets most of what is left. A cave on one morning in ten is a morning somebody
+ * notices.
+ */
+const FRAMINGS: Readonly<Record<Framing, number>> = {
+  cave: 1,
+  hills: 2,
+  open: 6,
+  shoulder: 3,
+}
+
+/** How likely an island is on a day that has room for one; see `isleAllowed`. */
+const ISLE_ODDS = 0.22
+
+/**
+ * How far into the picture each framing's rock comes, as shares of the width.
+ *
+ * All of them leave most of the frame open, which is the discipline the whole
+ * file needs. Rock taking half the picture is a picture of rock, and what is
+ * wanted is a picture of water with rock at the edge of it. The cave is not the
+ * widest of the three for that reason: it already has a roof, and a mouth with
+ * both is closed enough.
+ */
+const REACHES: Readonly<Record<Framing, number>> = {
+  cave: 0.12,
+  hills: 0.15,
+  open: 0,
+  shoulder: 0.12,
+}
+
+/**
+ * How far off straight out of the box a face may point the things on it.
+ *
+ * A perch reads the slope under it, which is the whole point of them: growth
+ * that ignored the rock would say the rock is a backdrop. A face steep enough
+ * turns square-to-the-face into square-to-the-box, though, and a little past it
+ * is a fan growing back into the wall it is standing on. Held short of a right
+ * angle, a steep face still lays its growth hard along itself and none of it
+ * disappears.
+ */
+const LEAN_MOST = Math.PI * 0.44
+
+/** How wide a hill is at the foot of the box, whatever height it starts at. */
+const HILL_PEAK = 1.22
+
+/** How far down a cave's roof hangs, as a share of the height. */
+const ROOF_DROP = 0.1
+
+/** How far past the ends of the box an outline runs, so no edge shows a seam. */
+const OVERHANG = 40
+
+/** How finely a face is cut. Fine enough that the noise in it is rock. */
+const FACE_STEPS = 64
+
+/**
+ * How much of a face is its own noise, and how many features fit along it.
+ *
+ * Most of it. A wall whose edge is a smooth curve is a shape rather than a
+ * rock, and the whole job of the near silhouette is to be the one hard, broken,
+ * unarguable thing in a picture where everything else is soft.
+ */
+const ROUGH = 0.55
+
+const ROUGH_CELLS = 3.4
+
+/** A second, finer roughness, for the bites a smooth wall never has. */
+const BITE = 0.18
+
+const BITE_CELLS = 11
+
+/**
+ * How much of a face is terraced, into how many shelves, and how broadly.
+ *
+ * The third octave, and it is not noise. Noise of any two frequencies gives a
+ * lumpy edge, and a lumpy edge is a cloud: what rock has that a cloud does not
+ * is flats and steps, because it is bedded and it breaks along its beds. So one
+ * slow field is quantised into shelves and mixed in, and what comes out has
+ * ledges an eye can rest on and drops between them.
+ */
+const LEDGE = 0.26
+
+const LEDGE_CELLS = 1.5
+
+const LEDGE_STEPS = 4
+
+/**
+ * How many lumps stand out of a face, and how big.
+ *
+ * Buttresses and boulders. The octaves make an edge that is rough everywhere by
+ * the same amount, which is a coastline; what a wall actually has is a few
+ * masses of its own and long quiet stretches between them. These are those
+ * masses, and they are what stops the two sides of a cave being one edge drawn
+ * twice.
+ */
+const OUTCROPS_LEAST = 2
+
+const OUTCROPS_SPAN = 4
+
+const OUTCROP_SPAN_LEAST = 0.08
+
+const OUTCROP_SPAN_SPAN = 0.2
+
+const OUTCROP_RISE_LEAST = 0.15
+
+const OUTCROP_RISE_SPAN = 0.34
+
+/**
+ * How many masses stand on one side of the picture, and how far back the
+ * furthest of them is.
+ *
+ * A side is not one wall. A single silhouette, however broken, is a cut-out:
+ * there is nothing for it to be in front of, so the eye reads it as a border
+ * drawn on the picture rather than as a place. Put a paler mass behind it and
+ * the near one becomes rock with more rock behind it, which is what anybody who
+ * has swum along a wall has actually seen.
+ *
+ * How many is a roll, like everything else here, and the two sides roll
+ * separately. One layer is a bank you are passing; four is a canyon with its
+ * own distance in it, and the day that turns up four is a different day. A
+ * fixed number would be the same wall every time with the same amount of
+ * depth in it, which is the thing this file exists not to be.
+ */
+const LAYERS_LEAST = 1
+
+const LAYERS_MOST = 4
+
+const FURTHEST = 0.28
+
+/** How much broader the furthest mass of a side is than the nearest. */
+const BACKING_WIDER = 1.3
+
+/** How far forward the near rock stands, and how far apart two pieces of it are. */
+const NEAR = 1
+
+const BEHIND = 0.86
+
+/**
+ * How the four kinds of growth are shared out.
+ *
+ * Tufts are the commonest because they are the cheapest thing to look at and
+ * what most rock is actually furred with. Fans are next, because a fan is the
+ * one that reads as a reef from any distance at all.
+ */
+const GROWTHS: Readonly<Record<Growth, number>> = {
+  fan: 3,
+  frond: 3,
+  sponge: 2,
+  tuft: 4,
+}
+
+/**
+ * What each of the four is, as strokes in a drawing that grows up from nothing.
+ *
+ * Up, in a space about thirty across, which is the coral's arrangement in
+ * `flora.ts` and is that way so a renderer can hand these to whatever already
+ * draws that. A perch says which way it is pointing and how big it is; the
+ * drawing says nothing about either, so the same fan is a fan on a roof and on
+ * a wall and on the underside of an overhang.
+ *
+ * The widths are what tells them apart as much as the paths do. A sponge is two
+ * strokes so fat they close into a lump, and the fan is thin enough that what
+ * reads is the lattice and not the branches.
+ */
+export const SPRIGS: Readonly<Record<Growth, readonly Twig[]>> = {
+  fan: gathered([
+    { d: "M0 0 C1 -6 0 -10 -1 -15", width: 2.6 },
+    { d: "M-1 -15 C-5 -19 -9 -21 -13 -27", width: 1.8 },
+    { d: "M-1 -15 C-1 -21 -1 -25 -2 -31", width: 1.8 },
+    { d: "M-1 -15 C3 -19 7 -21 10 -26", width: 1.8 },
+    { d: "M-6 -19 C-9 -23 -12 -24 -16 -24", width: 1.2 },
+    { d: "M4 -18 C7 -22 11 -23 14 -22", width: 1.2 },
+    { d: "M-2 -22 C-4 -26 -5 -29 -6 -33", width: 1.2 },
+    { d: "M0 -22 C2 -26 4 -29 6 -32", width: 1.2 },
+  ]),
+  frond: gathered([
+    { d: "M0 0 C4 -8 3 -16 6 -25 C7 -29 6 -31 4 -33", width: 2.2 },
+    { d: "M0 0 C-3 -7 -4 -14 -3 -21 C-3 -25 -4 -27 -6 -29", width: 1.8 },
+    { d: "M1 -6 C-4 -10 -7 -15 -8 -21", width: 1.4 },
+  ]),
+  sponge: gathered([
+    { d: "M-3 -4 C-4 -9 -3 -12 -2 -14", width: 9 },
+    { d: "M4 -3 C5 -7 5 -10 4 -12", width: 7 },
+  ]),
+  tuft: gathered([
+    { d: "M0 0 L-8 -11", width: 1.6 },
+    { d: "M0 0 L-4 -15", width: 1.6 },
+    { d: "M0 0 L1 -17", width: 1.6 },
+    { d: "M0 0 L6 -14", width: 1.6 },
+    { d: "M0 0 L10 -9", width: 1.6 },
+  ]),
+}
+
+/**
+ * How many colonies stand on a face, per thousand px of it, and how many things
+ * are in one.
+ *
+ * Colonies rather than a scatter, and this is the whole of what makes a wall
+ * look inhabited rather than stippled. Nothing on a reef is evenly spaced:
+ * growth goes where growth already is, so a face is bare for a stretch and then
+ * crowded, and the crowded parts are what the eye reads the rock's own shape
+ * off. Evenly sown, the same count reads as a texture map.
+ */
+const COLONIES_PER_K = 11
+
+const COLONY_LEAST = 3
+
+const COLONY_MOST = 9
+
+/** How far a colony spreads along the face, as a share of the whole face. */
+const COLONY_SPREAD = 0.055
+
+/**
+ * The ends of a growth's size, and how far it may lean off the rock's normal.
+ *
+ * A wide range on purpose. Everything the same size is a pattern, and the small
+ * ones are what fill in between the large ones so the face is busy rather than
+ * dotted.
+ */
+const PERCH_SMALLEST = 0.35
+
+const PERCH_LARGEST = 1.9
+
+const PERCH_WANDER = 0.6
+
+/** How far back an island stands, which is the furthest thing there is. */
+const ISLE_DEEP = 0.04
+
+/**
+ * How high an island stands above the ground it grew out of, as a share of the
+ * box, and how the roll is weighted.
+ *
+ * It used to be taller than the box every time, so the summit was always out of
+ * the frame and what the picture held was a flank crossing it corner to corner.
+ * That is one island, drawn at one size, and the eye reads it as a curtain
+ * somebody hung at the back rather than as land. Most of them are small enough
+ * to see the top of now, which is the thing that makes an island an island, and
+ * the roll is weighted towards the low end so the one that walks out of the top
+ * of the box is the exception it was meant to be.
+ */
+const ISLE_RISE_LEAST = 0.1
+
+const ISLE_RISE_SPAN = 0.78
+
+const ISLE_RISE_BIAS = 2.4
+
+/**
+ * The steepest pitch a flank takes, in radians, how unevenly the two sides
+ * share it, and how far an island may reach whatever it says.
+ *
+ * Rolled as an angle and turned into a width, rather than rolled as a width.
+ * The complaint the old island answered to is exactly an angle: its sides left
+ * the water at seventy degrees and nothing but a sea cliff does that, and the
+ * only way to be sure of the angle is to name it. What is named is the steepest
+ * part of the flank, which is the middle of it; the shore and the summit are
+ * gentler than this by the shape of the curve.
+ *
+ * The two sides are stretched apart on purpose. An island with matching flanks
+ * is a cone, and a cone standing in water is a hat. What weather leaves is one
+ * long side and one short one.
+ */
+const ISLE_PITCH_LEAST = 0.42
+
+const ISLE_PITCH_SPAN = 0.4
+
+const ISLE_LOPSIDED = 2
+
+const ISLE_WIDEST = 0.6
+
+/**
+ * How a flank bends between the summit and the shore.
+ *
+ * A raised cosine is one curve and every island cut from it is the same island.
+ * The exponent is what makes them different ground: below one the flank leaves
+ * the water steeply and lies over towards the top, which is a headland; above
+ * one it comes out of the water as a long apron and steepens behind it, which
+ * is a cone. Rolled per side, so a single island can be both, which is what an
+ * island with the weather on one side of it is.
+ */
+const ISLE_TOE_LEAST = 0.7
+
+const ISLE_TOE_SPAN = 1.1
+
+/**
+ * How many lesser masses stand on an island, and where along the flank.
+ *
+ * The point of them is that a mountain has shoulders. One curve, however bent,
+ * runs from the water to the top without anything happening on the way, and the
+ * eye reads an unbroken run as a drawn line however long it is. Each of these is
+ * the same shape at a fraction of the size, laid on the slope or out past the
+ * foot of it, and taken together with the summit by whichever stands higher. On
+ * the slope one is a shoulder with a saddle above it; past the foot it clears
+ * the water on its own and the island has an outlier.
+ */
+const SPURS_LEAST = 2
+
+const SPURS_SPAN = 3
+
+const SPUR_OUT_LEAST = 0.4
+
+const SPUR_OUT_SPAN = 0.8
+
+const SPUR_REACH_LEAST = 0.12
+
+const SPUR_REACH_SPAN = 0.28
+
+const SPUR_RISE_LEAST = 0.1
+
+const SPUR_RISE_SPAN = 0.36
+
+/**
+ * How much ground an island's own relief takes off and puts on, over how many
+ * features of its width, and how the octaves of it fall away.
+ *
+ * Ridged rather than plain, which is the whole difference between hills and
+ * weather. Plain noise is as round at the top as it is at the bottom and what
+ * it lays over a slope is dents; ground is the other way up, because water
+ * takes the valleys out and leaves the ridges standing, so it comes to edges
+ * along the tops and lies in curves along the bottoms. Folded to the same
+ * shape at each octave, an island gets spurs, the spurs get gullies, and the
+ * gullies get notches, which is the only way an outline says how big the thing
+ * it belongs to is.
+ *
+ * Added to the land in the island's own units rather than scaled by how high
+ * the land already is, so it is still there at the waterline. Scaled, it would
+ * die exactly where the land meets the water and leave the shore the one clean
+ * tangent in the picture. It fades over the last of the rise all the same, so
+ * the ends of an island lie down on the ground it stands on instead of stepping
+ * off it.
+ *
+ * How much of it there is never falls below a share of the box, because weather
+ * works at its own size rather than at the island's. A notch is the notch that
+ * water and frost cut, and it is the same notch on a mountain and on a stack;
+ * taken as a share of the summit it would vanish off the small ones, and a
+ * small island is the one whose whole outline anybody can see at once.
+ */
+const ISLE_RELIEF = 0.34
+
+const ISLE_RELIEF_LEAST = 0.065
+
+const ISLE_RELIEF_CELLS = 2.6
+
+const ISLE_RELIEF_OCTAVES = 5
+
+const ISLE_RELIEF_FALL = 0.54
+
+const ISLE_RELIEF_STEP = 2.3
+
+const ISLE_RELIEF_FOOT = 0.16
+
+/**
+ * How finely an island's skyline is cut.
+ *
+ * Finer than it was, and for the same reason the far ranges are: an island runs
+ * a long way across a wide screen, and a skyline cut that broadly is a coast
+ * made of chords. It carries the relief as well, and the finest octave of that
+ * is worth nothing if the outline steps past it.
+ */
+const ISLE_STEPS = 320
+
+const MIN_SPAN = 1
+
+export function createCrags(options: CragsOptions): Crags {
+  // Stirred rather than taken as it comes, which nothing else in the ornament
+  // bothers with and this file cannot do without. `makeRandom` is an xorshift
+  // and a small state takes a few draws to come apart, so counting seeds hand
+  // back near-identical opening numbers. Everywhere else that costs nothing,
+  // because the first draw is a position among many. Here the first draw is the
+  // framing, and the whole of a day's water hangs off it: seeds 1 to 400 came
+  // back a shoulder four hundred times.
+  const random = makeRandom(stir(options.seed ^ 0x3ca9) | 0)
+  const rough = makeNoise2(options.seed ^ 0x9a11)
+  const bite = makeNoise2(options.seed ^ 0x0b17)
+  const bedding = makeNoise2(options.seed ^ 0x7e33)
+  const carve = makeNoise2(options.seed ^ 0xa17e)
+
+  let width = Math.max(MIN_SPAN, options.width)
+  let height = Math.max(MIN_SPAN, options.height)
+  let floor = options.floor
+
+  /** Which framing today is, drawn once and kept through a resize. */
+  const framing = options.framing ?? draw()
+
+  /** Whether today has an island, on its own roll; see `isleAllowed`. */
+  const hasIsle = options.isle ?? (isleAllowed(framing) && random() < ISLE_ODDS)
+
+  function draw(): Framing {
+    const kinds = Object.keys(FRAMINGS) as Framing[]
+    let total = 0
+    for (const kind of kinds) total += FRAMINGS[kind]
+
+    let at = random() * total
+    for (const kind of kinds) {
+      at -= FRAMINGS[kind]
+      if (at <= 0) return kind
+    }
+
+    return "open"
+  }
+
+  /** A lump standing out of a face: where along it, how far, and how wide. */
+  interface Outcrop {
+    readonly at: number
+    readonly rise: number
+    readonly span: number
+  }
+
+  /** A face's own lumps, drawn once so a wall keeps them. */
+  function lumps(): Outcrop[] {
+    const count = OUTCROPS_LEAST + Math.floor(random() * (OUTCROPS_SPAN + 1))
+
+    return Array.from({ length: count }, () => ({
+      at: random(),
+      rise: OUTCROP_RISE_LEAST + random() * OUTCROP_RISE_SPAN,
+      span: OUTCROP_SPAN_LEAST + random() * OUTCROP_SPAN_SPAN,
+    }))
+  }
+
+  /**
+   * How far out the rock stands at one point along its own face, 0 to 1.
+   *
+   * A shape, three octaves and whatever lumps this face happens to have. The
+   * shape is what makes a wall a wall rather than a ridge; the octaves are what
+   * stop the shape being drawn; the shelves are what make it rock rather than
+   * cloud; and the lumps are what stop the two sides of a cave being one edge
+   * drawn twice.
+   */
+  function face(
+    along: number,
+    lane: number,
+    shape: (at: number) => number,
+    outcrops: readonly Outcrop[],
+  ): number {
+    const swell = rough(along * ROUGH_CELLS, lane)
+    const nibble = bite(along * BITE_CELLS, lane + 3.3)
+    const shelf = Math.round(bedding(along * LEDGE_CELLS, lane + 8.1) * LEDGE_STEPS) / LEDGE_STEPS
+    const grain = 1 + swell * ROUGH + nibble * BITE + shelf * LEDGE
+
+    let stood = 0
+    for (const lump of outcrops) {
+      const t = (along - (lump.at - lump.span / 2)) / lump.span
+      if (t <= 0 || t >= 1) continue
+      stood = Math.max(stood, lump.rise * ((1 - Math.cos(t * Math.PI * 2)) / 2))
+    }
+
+    return Math.max(0, shape(along) * grain + stood)
+  }
+
+  /**
+   * How wide a wall is along its own height, which is the whole of the framing.
+   *
+   * A cave's walls swell at the top and pinch a little below the middle, which
+   * is what a swim-through does: you are looking out of a gap rather than
+   * between two posts. Hills do the opposite and are ground, so they are
+   * nothing at the top and everything at the bottom. A shoulder is one rock
+   * going past and is broadest where it happens to be.
+   *
+   * `sway`, between -1 and 1, is the one thing a wall gets to argue with. It
+   * moves where the shape swells to without changing how far it swells, so two
+   * masses in a stack pinch at different heights and their edges cross. Walls
+   * that all pinched in the same place would be the same wall drawn at three
+   * weights, which reads as a shadow under a cut-out rather than as distance.
+   */
+  function profile(at: number, sway: number): number {
+    if (framing === "hills") {
+      const foot = 0.44 + sway * 0.1
+      return Math.max(0, (at - foot) / (1 - foot)) ** (1.5 + sway * 0.4) * HILL_PEAK
+    }
+
+    if (framing === "cave") return 0.62 + 0.38 * Math.cos(at * Math.PI * 2 - 0.6 + sway * 1.2)
+
+    return 0.55 + 0.45 * Math.sin(at * Math.PI * 0.9 + 0.5 + sway * 1.4)
+  }
+
+  /**
+   * Where something is growing on a face, and which way.
+   *
+   * The lean is read off the face's own slope rather than set square to the
+   * box, so a fan on an overhang hangs off the overhang. That is the whole
+   * point of them: growth that ignored the rock it is on would say the rock is
+   * a backdrop.
+   */
+  /** Which kind of thing this one is, drawn on `GROWTHS`. */
+  function sort(): Growth {
+    const kinds = Object.keys(GROWTHS) as Growth[]
+    let total = 0
+    for (const kind of kinds) total += GROWTHS[kind]
+
+    let at = random() * total
+    for (const kind of kinds) {
+      at -= GROWTHS[kind]
+      if (at <= 0) return kind
+    }
+
+    return "tuft"
+  }
+
+  /** One thing growing at a station of a face, square to the face there. */
+  function root(outline: readonly Point[], at: number, out: number, away: number): Perch | null {
+    const steps = outline.length
+    const on = Math.max(1, Math.min(steps - 2, at))
+    const here = outline[on]
+    const back = outline[on - 1]
+    const next = outline[on + 1]
+    if (!here || !back || !next) return null
+
+    const runX = next.x - back.x
+    const runY = next.y - back.y
+    const square = Math.atan2(-runX * out, runY * out) + (random() - 0.5) * PERCH_WANDER * 2
+    const off = Math.atan2(Math.sin(square - away), Math.cos(square - away))
+
+    return {
+      kind: sort(),
+      lean: away + Math.max(-LEAN_MOST, Math.min(LEAN_MOST, off)),
+      size: PERCH_SMALLEST + random() ** 1.6 * (PERCH_LARGEST - PERCH_SMALLEST),
+      x: here.x,
+      y: here.y,
+    }
+  }
+
+  function settle(outline: readonly Point[], out: number, away: number, share: number): Perch[] {
+    const steps = outline.length
+    if (steps < 3 || share <= 0) return []
+
+    let along = 0
+    for (let at = 1; at < steps; at++) {
+      const here = outline[at]
+      const back = outline[at - 1]
+      if (here && back) along += Math.hypot(here.x - back.x, here.y - back.y)
+    }
+
+    const colonies = Math.round((along * COLONIES_PER_K * share) / 1000)
+    const spread = Math.max(1, Math.round(steps * COLONY_SPREAD))
+    const perches: Perch[] = []
+
+    for (let made = 0; made < colonies; made++) {
+      const middle = Math.floor(random() * steps)
+      const many = COLONY_LEAST + Math.floor(random() * (COLONY_MOST - COLONY_LEAST + 1))
+
+      for (let one = 0; one < many; one++) {
+        const grown = root(outline, middle + Math.round((random() * 2 - 1) * spread), out, away)
+        if (grown) perches.push(grown)
+      }
+    }
+
+    return perches
+  }
+
+  /**
+   * One wall, top to bottom, standing off `side` of the box.
+   *
+   * `near` is where in its own stack it stands, 0 at the back and 1 at the
+   * front, and it decides how much lives on it. Only the front of a stack is
+   * properly furred: a fan on the mass behind would be a mark of one pixel, and
+   * a far shape with texture on it stops being the thing the near one is read
+   * against.
+   */
+  function wall(side: -1 | 1, reach: number, lane: number, depth: number, near: number): Crag {
+    const outcrops = lumps()
+    const outline: Point[] = []
+    const sway = random() * 2 - 1
+    const shape = (at: number): number => profile(at, sway)
+
+    for (let at = 0; at <= FACE_STEPS; at++) {
+      const along = at / FACE_STEPS
+      const y = -OVERHANG + along * (height + OVERHANG * 2)
+      const out = face(along, lane, shape, outcrops) * reach * width
+
+      outline.push({ x: side < 0 ? out : width - out, y })
+    }
+
+    return {
+      depth,
+      edge: side < 0 ? "left" : "right",
+      outline,
+      perches: settle(outline, side < 0 ? 1 : -1, side < 0 ? 0 : Math.PI, near ** 3),
+    }
+  }
+
+  /** The roof of a cave, left to right, hanging off the top of the box. */
+  function roof(lane: number): Crag {
+    const outcrops = lumps()
+    const outline: Point[] = []
+    const shape = (at: number): number => 0.4 + 0.6 * Math.cos((at - 0.5) * Math.PI * 2) ** 2
+
+    for (let at = 0; at <= FACE_STEPS; at++) {
+      const along = at / FACE_STEPS
+      const x = -OVERHANG + along * (width + OVERHANG * 2)
+
+      outline.push({ x, y: face(along, lane, shape, outcrops) * ROOF_DROP * height })
+    }
+
+    return { depth: NEAR, edge: "top", outline, perches: settle(outline, -1, Math.PI / 2, 1) }
+  }
+
+  /** One side of a mass of land: how far it reaches, and how it bends. */
+  interface Slope {
+    readonly reach: number
+    readonly toe: number
+  }
+
+  /** Land standing above the water: where its top is, how high, and its sides. */
+  interface Mass {
+    readonly left: Slope
+    readonly middle: number
+    readonly right: Slope
+    readonly rise: number
+  }
+
+  const slope = (reach: number): Slope => ({
+    reach: Math.min(width * ISLE_WIDEST, reach),
+    toe: ISLE_TOE_LEAST + random() * ISLE_TOE_SPAN,
+  })
+
+  /**
+   * The summit, and the lesser ground standing on its flanks.
+   *
+   * The summit is rolled first because everything else is a share of it: a spur
+   * is a fraction of its height laid a fraction of the way down one of its
+   * sides, so a low wide island gets low wide shoulders and a steep one gets
+   * crags. Rolled on their own they would be the same furniture on every
+   * island, which is half of why every island used to look like the last one.
+   */
+  function land(): Mass[] {
+    const middle = width * (0.15 + random() * 0.7)
+    const rise = height * (ISLE_RISE_LEAST + random() ** ISLE_RISE_BIAS * ISLE_RISE_SPAN)
+    const pitch = ISLE_PITCH_LEAST + random() * ISLE_PITCH_SPAN
+    const spread = ((Math.PI / 2) * rise) / Math.tan(pitch)
+    const stretch = 1 + random() * (ISLE_LOPSIDED - 1)
+    const longer = random() < 0.5 ? -1 : 1
+
+    const peak: Mass = {
+      left: slope(spread * (longer < 0 ? stretch : 1)),
+      middle,
+      right: slope(spread * (longer < 0 ? 1 : stretch)),
+      rise,
+    }
+
+    const many = SPURS_LEAST + Math.floor(random() * (SPURS_SPAN + 1))
+
+    const spurs = Array.from({ length: many }, () => {
+      const out = random() < 0.5 ? -1 : 1
+      const side = out < 0 ? peak.left : peak.right
+      const span = side.reach * (SPUR_REACH_LEAST + random() * SPUR_REACH_SPAN)
+
+      return {
+        left: slope(span),
+        middle: middle + out * side.reach * (SPUR_OUT_LEAST + random() * SPUR_OUT_SPAN),
+        right: slope(span * (0.6 + random() * 0.8)),
+        rise: rise * (SPUR_RISE_LEAST + random() * SPUR_RISE_SPAN),
+      }
+    })
+
+    return [peak, ...spurs]
+  }
+
+  /** How high one mass of land stands at x, and nothing past its own feet. */
+  function stands(x: number, hill: Mass): number {
+    const side = x < hill.middle ? hill.left : hill.right
+    const along = Math.abs(x - hill.middle) / side.reach
+    if (along >= 1) return 0
+
+    return hill.rise * ((1 + Math.cos(along * Math.PI)) / 2) ** side.toe
+  }
+
+  /**
+   * An island's own ground at a point along it, between roughly -0.5 and 0.5.
+   *
+   * Octaves of the field folded at nought, which turns each of them upside
+   * down: a plain octave is as round at the top as at the bottom, and folded it
+   * comes to an edge along the tops and lies in curves along the bottoms, which
+   * is what water leaves when it takes the valleys out of a hill. Read in the
+   * island's own width rather than the box's, so a small island is rough at its
+   * own size instead of wearing a large one's weather.
+   */
+  function relief(along: number): number {
+    let sum = 0
+    let weight = 0
+    let strength = 1
+    let cells = ISLE_RELIEF_CELLS
+
+    for (let octave = 0; octave < ISLE_RELIEF_OCTAVES; octave++) {
+      sum += strength * (1 - Math.abs(carve(along * cells, octave * 3.7)))
+      weight += strength
+      strength *= ISLE_RELIEF_FALL
+      cells *= ISLE_RELIEF_STEP
+    }
+
+    return sum / weight - 0.5
+  }
+
+  /**
+   * An island, standing on the furthest ground there is.
+   *
+   * Ground the way `seabed.ts` raises a summit, and what it does that the far
+   * ranges do not is stand near enough to be read as a place rather than as a
+   * line at the back. It gives the sun something to go behind, which is the one
+   * thing in this scene that has never been occluded by anything.
+   *
+   * The whole of it is the outline, so the outline is where the work is. A
+   * summit and its shoulders say how big it is; the pitch of the flanks says
+   * what kind of coast it has; and the relief laid along them says it is ground
+   * rather than a curve, which is the thing a single arc out of the water can
+   * never say however well it is drawn. Whichever of them stands highest at an
+   * x is what the water has in front of it there.
+   */
+  function raise(): Isle {
+    const masses = land()
+    const peak = masses[0]
+    const outline: Point[] = []
+    if (!peak) return { depth: ISLE_DEEP, outline }
+
+    const own = (peak.left.reach + peak.right.reach) / 2
+    const weather = Math.max(peak.rise * ISLE_RELIEF, height * ISLE_RELIEF_LEAST)
+
+    for (let at = 0; at <= ISLE_STEPS; at++) {
+      const x = -OVERHANG + (at / ISLE_STEPS) * (width + OVERHANG * 2)
+
+      let lift = 0
+      for (const hill of masses) lift = Math.max(lift, stands(x, hill))
+
+      const ashore = Math.min(1, lift / (peak.rise * ISLE_RELIEF_FOOT))
+      const rough = weather * relief((x - peak.middle) / own) * ashore
+
+      outline.push({ x, y: floor(x, ISLE_DEEP) - Math.max(0, lift + rough) })
+    }
+
+    return { depth: ISLE_DEEP, outline }
+  }
+
+  /**
+   * One side of the picture, as however many masses today gave it.
+   *
+   * Furthest first, because a renderer draws them in the order it is given and
+   * the near one has to be the one that occludes. Each is broader than the one
+   * in front of it and each reads its own lane of the field, so a stack is a
+   * set of different rocks at different distances rather than one rock drawn
+   * three times at three weights.
+   */
+  function side(which: -1 | 1, reach: number): Crag[] {
+    const layers = LAYERS_LEAST + Math.floor(random() * (LAYERS_MOST - LAYERS_LEAST + 1))
+    const front = which < 0 ? NEAR : BEHIND
+    const stack: Crag[] = []
+
+    for (let at = 0; at < layers; at++) {
+      const near = layers < 2 ? 1 : at / (layers - 1)
+
+      stack.push(
+        wall(
+          which,
+          reach * (1 + (1 - near) * (BACKING_WIDER - 1)),
+          random() * 7,
+          FURTHEST + (front - FURTHEST) * near,
+          near,
+        ),
+      )
+    }
+
+    return stack
+  }
+
+  function build(): Crag[] {
+    const reach = REACHES[framing]
+    if (reach <= 0) return []
+
+    if (framing === "shoulder") return side(random() < 0.5 ? -1 : 1, reach)
+
+    const rocks = [...side(-1, reach), ...side(1, reach * (0.7 + random() * 0.5))]
+    if (framing === "cave") rocks.push(roof(random() * 7))
+
+    return rocks
+  }
+
+  let rocks = build()
+  let isle = hasIsle ? raise() : null
+
+  return {
+    framing,
+    get isle() {
+      return isle
+    },
+
+    /**
+     * A resized box is rebuilt rather than scaled, for the reason `seabed.ts`
+     * gives: everything here is a pure function of the seed and the box, and
+     * rock that stretched with a window would be the one thing on screen
+     * admitting it is a drawing. The framing itself is kept, because it is the
+     * day's rather than the box's.
+     */
+    resize(nextWidth, nextHeight, nextFloor) {
+      width = Math.max(MIN_SPAN, nextWidth)
+      height = Math.max(MIN_SPAN, nextHeight)
+      floor = nextFloor
+      rocks = build()
+      isle = hasIsle ? raise() : null
+    },
+
+    get rocks() {
+      return rocks
+    },
+  }
+}
+
+/**
+ * Whether a day's framing leaves room for an island.
+ *
+ * Not from inside a cave. An island is a thing in the far distance and a cave
+ * is a thing a hand's width from your mask, and a picture holding both is a
+ * picture that cannot decide where it is standing.
+ */
+const isleAllowed = (framing: Framing): boolean => framing === "hills" || framing === "open"