@codincod/ornament 0.0.0-stage → 0.2.0

package/src/paint/light.ts

@@ -0,0 +1,132 @@
+/**
+ * The light in the water, and what is falling through it.
+ *
+ * Shafts from the surface, marine snow, and the bubbles off a vent. The
+ * numbers are `Seascape.qml`'s, because the two renderers are meant to be the
+ * same sea.
+ */
+import type { Drift } from "../drift.ts"
+import { type Rays, SPREAD } from "../rays.ts"
+import { OWN, type Pen, type Point, TONE } from "./pen.ts"
+
+/** How dark each of these may be, as a share of full ink. */
+const RAY_INK = 0.07
+const SNOW_INK = 0.15
+const BUBBLE_INK = 0.3
+
+/**
+ * How much light there is to make shafts out of, at the hour it is.
+ *
+ * Not none at night. A moon over calm water throws the same shafts a sun does,
+ * and a scene whose light went out altogether at dusk would be a scene that
+ * turned into a black rectangle for half of every day.
+ */
+const MOON_RAYS = 0.28
+
+/**
+ * How many copies each shaft is drawn as, and how much shorter each one inside
+ * it is.
+ *
+ * The plies are drawn one over another, so at any height they are the same fade
+ * repeated, and copies hung to the same depth step down at exactly the same
+ * heights: the eye is offered one edge as strong as all of them. Staggering
+ * them gives each step its own height, and the core of the shaft runs out above
+ * the glow around it, which is what a shaft does.
+ */
+const PLIES = 4
+const TAPER = 0.13
+
+/** How many bubbles are ever drawn at once. */
+const BUBBLES = 96
+
+/** Where these sit against everything else. */
+const LANE = { ray: -1 }
+
+export function paintRays(pen: Pen, light: Rays, daylight: number): void {
+  const overcast = MOON_RAYS + (1 - MOON_RAYS) * daylight
+
+  for (const ray of light.rays) {
+    const slope = Math.tan(ray.tilt)
+    const mouth = ray.span / 2
+    const hem = (ray.span * SPREAD) / 2
+    const lit = (RAY_INK / PLIES) * overcast * ray.glow
+    if (lit <= 0) continue
+
+    for (let ply = 0; ply < PLIES; ply++) {
+      const inset = 1 - ply / PLIES
+      const drop = ray.reach * (1 - ply * TAPER)
+      const lean = drop * slope
+      const lip = mouth * inset
+      const flare = (mouth + (hem - mouth) * (ray.reach > 0 ? drop / ray.reach : 0)) * inset
+
+      pen.fill(
+        [
+          [
+            { x: ray.x - lip, y: 0 },
+            { x: ray.x + lip, y: 0 },
+            { x: ray.x + flare + lean, y: drop },
+            { x: ray.x - flare + lean, y: drop },
+          ],
+        ],
+        {
+          alpha: lit,
+          fade: [0, drop],
+          lane: LANE.ray,
+          spent: true,
+          tone: TONE.ink,
+        },
+      )
+    }
+  }
+}
+
+/**
+ * Marine snow, sorted into the fish by depth rather than laid over them, so a
+ * near mote passes in front of a far animal and the water gets a thickness the
+ * fish alone cannot give it.
+ */
+export function paintSnow(pen: Pen, drift: Drift): void {
+  for (const mote of drift.motes) {
+    pen.fill([disc(mote.x, mote.y, mote.r)], {
+      lane: mote.depth,
+      shade: mote.y,
+      weight: SNOW_INK * mote.depth,
+    })
+  }
+
+  // Rings rather than discs. A filled circle at this size is a dot, and a dot
+  // going up is a dot going up; an outline with the water showing through it is
+  // a bubble.
+  let drawn = 0
+  for (const bubble of drift.bubbles) {
+    if (drawn++ >= BUBBLES) break
+
+    pen.line([ring(bubble.x, bubble.y, bubble.r)], {
+      alpha: BUBBLE_INK * bubble.depth,
+      lane: bubble.depth,
+      shade: OWN,
+      tone: TONE.ink,
+      width: 1,
+    })
+  }
+}
+
+/** How many sides a small round thing is worth cutting into. */
+const SIDES = 16
+
+export function disc(cx: number, cy: number, r: number): Point[] {
+  const points: Point[] = []
+  for (let i = 0; i < SIDES; i++) {
+    const turn = (i / SIDES) * Math.PI * 2
+    points.push({ x: cx + r * Math.cos(turn), y: cy + r * Math.sin(turn) })
+  }
+  return points
+}
+
+/** The same, as a line that comes back to where it started. */
+export function ring(cx: number, cy: number, r: number): Point[] {
+  const points = disc(cx, cy, r)
+  const first = points[0]
+  if (first) points.push(first)
+  return points
+}

package/src/paint/pen.ts

@@ -0,0 +1,225 @@
+/**
+ * The one thing a renderer is told, and the whole of it.
+ *
+ * `scene.ts` says where the ground is and how the plants are bending, which is
+ * a bed that stands still and is cut once. Everything else in this water moves:
+ * a fish is somewhere new, a mote has fallen, a shaft has breathed, and the
+ * moon is a different shape tonight than it was last night. All of that is
+ * written here, as drawings.
+ *
+ * A drawing is small on purpose. A shape, a colour to mix it from, how heavy it
+ * is, how it gives out, and how far back it stands. There is no fish in this
+ * file and no moon either: what a thing is stays in the ornament, and this says
+ * only what it looks like.
+ */
+
+/** How a drawing is drawn. */
+export const FORM = { fill: 0, light: 2, stroke: 1, wash: 3 } as const
+
+/**
+ * Which colour it is mixed from.
+ *
+ * `water` is a weight towards the ink at the height it is drawn at, which is
+ * anything in the water lit from where the reader is standing; `shadow` is the
+ * same weight towards the surface colour, which is near rock with the light
+ * behind it. `wall` is the one thing here you can see through, and what you see
+ * through it is whatever the surface under the water is showing. The rest are
+ * the lights, and they are the only colours in this scene that are not the
+ * theme's.
+ */
+export const TONE = {
+  dusk: 4,
+  ink: 6,
+  moon: 3,
+  shadow: 1,
+  sun: 2,
+  surface: 5,
+  wall: 7,
+  water: 0,
+} as const
+
+/**
+ * A light that gives out the way a shaft of sunlight in water does.
+ *
+ * `Ornament.fade`, which no single exponent draws: it holds most of its
+ * strength for the first half of its length and then goes quickly. Added to a
+ * tone rather than named as one, since it says how a thing fades rather than
+ * what colour it is.
+ */
+export const SPENT = 0x200
+
+/** Read the water at the height the fragment itself is at. */
+export const OWN = -1
+
+export interface Mark {
+  /** How much of it there is where it starts, before it fades. */
+  alpha?: number
+  /** Where a fade down the box starts and how far it runs. No span, no fade. */
+  fade?: readonly [number, number]
+  /** How fast it gives out, whether down the box or out from a middle. */
+  fall?: number
+  lane: number
+  /** The height the water under it is read at, or `OWN`. */
+  shade?: number
+  /**
+   * How far out of focus it is, in pixels of blur.
+   *
+   * Rock only, and it is the lens rather than the water: what is a hand from
+   * the glass is further outside the field than what is a long way behind the
+   * subject. Anything with this set is drawn on its own and softened before it
+   * is laid in, so drawings meant to be softened together, a mass of rock and
+   * what is growing on it, have to be written one after another.
+   */
+  soft?: number
+  /** Whether it ends on the light's own curve rather than on an exponent. */
+  spent?: boolean
+  /** How much of its height a round light keeps. Under 1 is a streak. */
+  thin?: number
+  tone?: number
+  weight?: number
+  /** How wide a line is, or how far a round light reaches. */
+  width?: number
+}
+
+export type Point = { x: number; y: number }
+
+/**
+ * Where a unit drawing is stood, since most of what swims is written about the
+ * origin and put in the water afterwards.
+ *
+ * `facing` is a mirror rather than a turn, and it is applied before the turn:
+ * the ornament works out the whole angle for an animal that is swimming left,
+ * so turning a mirrored drawing again is how every renderer here has got a
+ * leftward fish upside down at least once.
+ */
+export interface Spot {
+  facing?: number
+  scale?: number
+  tilt?: number
+  x: number
+  y: number
+}
+
+/**
+ * Drawings into the block of numbers the renderer reads.
+ *
+ * The count goes in first and is written again at the end, because how many
+ * there are is not known until the last one is drawn and the renderer has to
+ * read it before any of them.
+ */
+/**
+ * How much room one drawing is assumed to want.
+ *
+ * A ridge is a few hundred points and a disc is seventy-two, so this is over
+ * the top of almost everything and the block is sized to hold far more than a
+ * frame anyway. It is a floor under the check rather than a budget: what it
+ * buys is that a block which does run out ends on a whole drawing rather than
+ * halfway through one, so a reader walking it never falls off the end.
+ */
+const ELBOW = 4096
+
+export class Pen {
+  private drawn = 0
+  private held = 0
+  private full = false
+
+  private readonly floats: Float32Array
+  private at: number
+
+  constructor(floats: Float32Array, at: number) {
+    this.floats = floats
+    this.at = at
+    this.held = at
+    this.put(0)
+  }
+
+  /** How many numbers were written, once every drawing is in. */
+  close(): number {
+    this.floats[this.held] = this.drawn
+    return this.at
+  }
+
+  fill(parts: readonly (readonly Point[])[], mark: Mark, spot?: Spot): void {
+    if (this.head(FORM.fill, mark)) this.parts(parts, spot)
+  }
+
+  line(parts: readonly (readonly Point[])[], mark: Mark, spot?: Spot): void {
+    if (this.head(FORM.stroke, mark)) this.parts(parts, spot)
+  }
+
+  /** A round light, which is a middle and a reach rather than a shape. */
+  light(x: number, y: number, mark: Mark): void {
+    if (!this.head(FORM.light, mark)) return
+    this.put(1)
+    this.put(1)
+    this.put(x)
+    this.put(y)
+  }
+
+  /** A wash over the whole box, which is what a night is. */
+  wash(mark: Mark): void {
+    if (this.head(FORM.wash, mark)) this.put(0)
+  }
+
+  /** Whether there was room for the drawing that was about to be made. */
+  private head(form: number, mark: Mark): boolean {
+    if (this.full) return false
+    if (this.at + ELBOW > this.floats.length) {
+      this.full = true
+      return false
+    }
+    this.drawn++
+    this.put(form)
+    this.put((mark.tone ?? TONE.water) | (mark.spent ? SPENT : 0))
+    this.put(mark.weight ?? 0)
+    this.put(mark.shade ?? OWN)
+    this.put(mark.alpha ?? 1)
+    this.put(mark.lane)
+    this.put(mark.width ?? 0)
+    this.put(mark.fall ?? 1)
+    this.put(mark.fade ? mark.fade[0] : 0)
+    this.put(mark.fade ? mark.fade[1] : 0)
+    this.put(mark.thin ?? 1)
+    this.put(mark.soft ?? 0)
+    return true
+  }
+
+  /**
+   * Every piece of one drawing, stood where it is seen.
+   *
+   * Several pieces rather than one, because an animal is not one outline: a
+   * fish is a body, a tail swung off its joint and a fin rooted inside the
+   * back, and they are meant to overlap. Handed over as one drawing they are
+   * filled as one silhouette; handed over as three they would each be painted
+   * over the last, and every overlap would show as a seam.
+   */
+  private parts(parts: readonly (readonly Point[])[], spot?: Spot): void {
+    this.put(parts.length)
+
+    const scale = spot?.scale ?? 1
+    const mirror = spot?.facing ?? 1
+    const turn = spot?.tilt ?? 0
+    const cos = Math.cos(turn)
+    const sin = Math.sin(turn)
+
+    for (const points of parts) {
+      this.put(points.length)
+      for (const point of points) {
+        if (!spot) {
+          this.put(point.x)
+          this.put(point.y)
+          continue
+        }
+        const x = point.x * scale * mirror
+        const y = point.y * scale
+        this.put(spot.x + x * cos - y * sin)
+        this.put(spot.y + x * sin + y * cos)
+      }
+    }
+  }
+
+  private put(value: number): void {
+    if (this.at < this.floats.length) this.floats[this.at] = value
+    this.at++
+  }
+}

package/src/paint/rock.ts

@@ -0,0 +1,325 @@
+/**
+ * What the water sits on and what stands out of it: stones, near rock, the
+ * reef's heads, an island, and whatever is lying on the bottom.
+ *
+ * Everything here recedes the way the ground recedes rather than the way an
+ * animal does. The rock in front of the picture is the exception and is painted
+ * away from the ink instead: it is between the light and the reader, so what
+ * there is to see of it is that none of the light came back.
+ */
+import { type Crags, SPRIGS } from "../crags.ts"
+import type { Reef } from "../reef.ts"
+import {
+  BLOCK_CARD,
+  BLOCK_LINES,
+  CHEST_BANDS,
+  CHEST_BODY,
+  CHEST_LOCK,
+  LAPTOP_BASE,
+  LAPTOP_LINES,
+  LAPTOP_SCREEN,
+  type Relics,
+  SMOKER,
+  WRECK,
+  WRECK_SPAR,
+} from "../relics.ts"
+import type { Seabed } from "../seabed.ts"
+import { disc } from "./light.ts"
+import { OWN, type Pen, type Point, TONE } from "./pen.ts"
+import type { Box } from "./sky.ts"
+import { trace } from "./trace.ts"
+
+/** How dark each of these may be at the front of the picture. */
+const CRAG_INK = 0.94
+const FLORA_INK = 0.33
+const HAZE_INK = 0.04
+const ISLE_INK = 0.88
+const PLUME_INK = 0.2
+const RELIC_INK = 0.24
+const STONE_INK = 0.25
+
+/** How much of a weight is punched back out for a strap, a lock or a line. */
+const CUT_SHADE = 0.34
+
+/** What is left of a puff's own body over the last of its life. */
+const PLUME_LET_GO = 0.25
+
+/** How far forward a mass has to stand before it is rock you are among rather
+ *  than rock you are looking at, and what grows on it. */
+const CRAG_NEAR = 0.8
+
+/**
+ * How far the lens gives up on the near rock, in pixels, at the front of the
+ * water, and each mass takes its own share of it by how far forward it stands.
+ *
+ * `Seascape.qml` says the same in a blur of 0.24 out of a `blurMax` of 48.
+ */
+const CRAG_BLUR = 0.24 * 48
+const PERCH_SCALE = 1.15
+const PERCH_SHADE = 0.72
+
+/** How thick a blade is against the strand it grows off. */
+const BLADE_GIRTH = 0.8
+
+/** How many relics and how much smoke are ever drawn at once. */
+const MOST = { plume: 76, relics: 4 }
+
+/** Where these sit against everything else. */
+const LANE = { isle: -1.15, plume: -1.6 }
+
+export function far(full: number, depth: number): number {
+  return HAZE_INK + (full - HAZE_INK) * Math.min(1, Math.max(0, depth))
+}
+
+/**
+ * A face of near rock, closed off past the edge it hangs from.
+ *
+ * The ground closes downwards because the ground is what the box is standing
+ * on. A wall is not: it comes in from the side and the mass of it is off the
+ * picture, so closing it under the box would fill the water in front of it as
+ * well. The roof is the same statement turned on its end.
+ */
+function faced(points: readonly Point[], edge: string, box: Box): Point[] {
+  const out = points.map((p) => ({ x: p.x, y: p.y }))
+  if (!out.length) return out
+
+  const first = out[0]
+  const last = out.at(-1)
+  if (!first || !last) return out
+
+  const past = 60
+
+  if (edge === "top") {
+    out.push({ x: last.x, y: -past })
+    out.push({ x: first.x, y: -past })
+    return out
+  }
+
+  const side = edge === "left" ? -past : box.width + past
+  out.push({ x: side, y: last.y })
+  out.push({ x: side, y: first.y })
+  return out
+}
+
+/**
+ * A ridge with the ground under it closed off, below everything it is made of.
+ *
+ * Below the ridge rather than below the box, and the difference is one that
+ * only shows up in a renderer that cares whether an outline crosses itself. The
+ * near sand sits a hundredth of the box off the bottom and rolls a good deal
+ * further than that, so parts of it are under the box already: a line drawn
+ * across at the box's own floor would pass through the ridge rather than under
+ * it, and the shape would be a bowtie in as many places as the sand dips.
+ *
+ * Nobody sees the difference. Everything below the bottom edge is off the
+ * picture either way, and what it buys is an outline that is what it looks
+ * like.
+ */
+export function floored(points: readonly Point[], box: Box): Point[] {
+  const out = points.map((p) => ({ x: p.x, y: p.y }))
+  const first = out[0]
+  const last = out.at(-1)
+  if (!first || !last) return out
+
+  let under = box.height
+  for (const point of out) under = Math.max(under, point.y)
+  under += 2
+
+  out.push({ x: last.x, y: under })
+  out.push({ x: first.x, y: under })
+  return out
+}
+
+/**
+ * Stones, lying where they fell.
+ *
+ * Rounded rather than drawn: at this weight a stone is a mass with a lean on
+ * it, and an outline would make it a pebble somebody had illustrated. A
+ * round-capped line is the same shape as a rectangle with a radius of half its
+ * height, which is what the other renderer draws one as.
+ */
+export function paintStones(pen: Pen, seabed: Seabed): void {
+  for (const stone of seabed.stones) {
+    const run = Math.max(0, stone.span - stone.rise) / 2
+
+    pen.line(
+      [
+        [
+          { x: -run, y: 0 },
+          { x: run, y: 0 },
+        ],
+      ],
+      {
+        lane: -2 + stone.depth * 0.3,
+        shade: stone.y,
+        weight: far(STONE_INK, stone.depth),
+        width: stone.rise,
+      },
+      { tilt: stone.lean, x: stone.x, y: stone.y - stone.rise * 0.12 },
+    )
+  }
+}
+
+/**
+ * The reef's heads: what took a place on the mound.
+ *
+ * A head is drawn the way a plant is, and which of the two kinds of drawing it
+ * carries is its own business: a stencil hands over twigs, and an animal hands
+ * over a stalk with whatever it has grown on the end of it.
+ */
+export function paintHeads(pen: Pen, reef: Reef): void {
+  for (const head of reef.heads) {
+    const weight = far(FLORA_INK, head.depth)
+    const mark = { lane: -3 + head.depth, shade: head.y, weight }
+
+    if (head.blades.length > 0) {
+      pen.line([head.points], { ...mark, width: head.girth })
+      pen.line(head.blades, { ...mark, width: head.girth * BLADE_GIRTH })
+    }
+
+    if (head.twigs.length === 0) continue
+
+    // A stencil: the same drawing every frame, leaned where it grew and bent by
+    // the swell it is standing in. Coral does not move under its own steam, and
+    // with everything else on this rock moving it is what the movement is
+    // measured against.
+    const spot = { scale: head.scale, tilt: head.lean + head.bend, x: head.x, y: head.y }
+    for (const twig of head.twigs) {
+      pen.line(trace(twig.d), { ...mark, width: twig.width * head.scale }, spot)
+    }
+  }
+}
+
+/**
+ * The rock you are among, and what is living on it.
+ *
+ * Last of the ground and over everything including the boats: on the days this
+ * water has a roof, the roof is between the picture and the surface, and a hull
+ * drawn through it would be a hull inside the rock.
+ */
+export function paintCrags(pen: Pen, crags: Crags, box: Box): void {
+  for (const crag of crags.rocks) {
+    const weight = CRAG_INK * crag.depth
+    const near = crag.depth >= CRAG_NEAR
+    const adrift = near ? (crag.depth - CRAG_NEAR) / Math.max(0.01, 1 - CRAG_NEAR) : 0
+    const lane = near ? crag.depth + 0.5 : crag.depth
+    const soft = CRAG_BLUR * adrift
+
+    pen.fill([faced(crag.outline, crag.edge, box)], {
+      lane,
+      shade: OWN,
+      soft,
+      tone: TONE.shadow,
+      weight,
+    })
+
+    // What is growing on it, one colony at a time. Drawn a shade off the rock
+    // rather than in the rock's own weight: a silhouette on a silhouette is a
+    // silhouette, and the whole reason these are here is that a bare wall is a
+    // shape somebody cut out of paper.
+    for (const perch of crag.perches) {
+      const unit = perch.size * PERCH_SCALE * crag.depth
+      // The drawing grows up out of nothing; the perch says which way is out of
+      // the rock, and a quarter turn is the difference between them.
+      const spot = { scale: unit, tilt: perch.lean + Math.PI / 2, x: perch.x, y: perch.y }
+
+      for (const twig of SPRIGS[perch.kind]) {
+        pen.line(
+          trace(twig.d),
+          {
+            lane,
+            shade: perch.y,
+            soft,
+            tone: TONE.shadow,
+            weight: weight * PERCH_SHADE,
+            width: twig.width * unit,
+          },
+          spot,
+        )
+      }
+    }
+  }
+
+  // An island, where the ground climbed the whole way and came out. It goes
+  // dark rather than bright for the reason near rock does: a shore lit from
+  // behind is a silhouette, and everybody has seen that one.
+  if (crags.isle) {
+    pen.fill([floored(crags.isle.outline, box)], {
+      lane: LANE.isle,
+      shade: OWN,
+      tone: TONE.shadow,
+      weight: ISLE_INK,
+    })
+  }
+}
+
+/**
+ * What is lying on the bottom, and what is coming out of it.
+ *
+ * Behind the sand rather than in front of it: a wreck lies half buried, and the
+ * sand is what buries it.
+ */
+export function paintRelics(pen: Pen, wreckage: Relics): void {
+  let drawn = 0
+  for (const one of wreckage.relics) {
+    if (drawn++ >= MOST.relics) break
+
+    const weight = RELIC_INK * one.depth
+    const spot = { scale: one.scale, tilt: one.lean, x: one.x, y: one.y }
+    const mark = { lane: -3 + one.depth, shade: one.y, weight }
+    const cut = { ...mark, weight: weight * CUT_SHADE }
+
+    const body =
+      one.kind === "wreck"
+        ? WRECK
+        : one.kind === "smoker"
+          ? SMOKER
+          : one.kind === "chest"
+            ? CHEST_BODY
+            : BLOCK_CARD
+    pen.fill(trace(body), mark, spot)
+
+    // The wreck's spar, which is what stops leaning verticals reading
+    // as two dead trees.
+    if (one.kind === "wreck") {
+      pen.line([WRECK_SPAR], { ...mark, width: 0.03 * one.scale }, spot)
+    }
+
+    // The code block's three lines, cut out of the card in the surface rather
+    // than drawn in ink, the way a fish's eye is. A snippet is a card with
+    // light coming through it, not a card with marks on it.
+    if (one.kind === "block") {
+      for (const line of BLOCK_LINES) pen.fill(trace(line), cut, spot)
+    }
+
+    // The chest, and the laptop still open on its lid. The straps and the lock
+    // are cut out in the surface; the screen is the one thing in the whole sea
+    // drawn at full ink.
+    if (one.kind === "chest") {
+      for (const band of CHEST_BANDS) pen.fill(trace(band), cut, spot)
+      pen.fill(trace(CHEST_LOCK), cut, spot)
+      pen.fill(trace(LAPTOP_BASE), mark, spot)
+      pen.fill(trace(LAPTOP_SCREEN), { ...mark, tone: TONE.ink, weight: 1 }, spot)
+      for (const row of LAPTOP_LINES) {
+        pen.fill(trace(row), { ...mark, tone: TONE.surface, weight: 1 }, spot)
+      }
+    }
+  }
+
+  // What the smoker is pouring: the only thing on the bottom that moves under
+  // its own steam rather than the water's, which is what makes a vent read as
+  // hot. Opaque for most of its life, like everything else that is a thing
+  // rather than light, and letting go of the last of the alpha as well, because
+  // by then the puff is the colour of what is behind it.
+  let puffed = 0
+  for (const puff of wreckage.plume) {
+    if (puffed++ >= MOST.plume) break
+
+    pen.fill([disc(puff.x, puff.y, puff.r)], {
+      alpha: Math.min(1, (1 - puff.age) / PLUME_LET_GO),
+      lane: LANE.plume,
+      shade: puff.y,
+      weight: PLUME_INK * Math.sqrt(Math.max(0, 1 - puff.age)),
+    })
+  }
+}