@codincod/ornament 0.0.0-stage → 0.2.0

package/src/paint/shade.ts

@@ -0,0 +1,109 @@
+/**
+ * What stands between the light and the sand, put on the sand.
+ *
+ * The one thing this water had no answer for. Every other cue in the scene says
+ * how far back a thing is: it is smaller, it is hazier, it is behind something.
+ * None of them says how far *up* it is, so a fish a hand off the sand and a fish
+ * halfway to the surface are the same drawing at two heights of the picture, and
+ * the eye has nothing to read the gap with.
+ *
+ * A shadow is the whole of the answer, and it is cheap: the light in this sea
+ * comes from the surface, so what a thing puts on the ground is directly under
+ * it. What the reader is actually reading is the two of them together. Close to
+ * the sand the patch is small, dark and right under the animal; further up it is
+ * wide, faint and further from it, and somewhere above that it is gone.
+ *
+ * Nothing here is a shape. A round light squashed flat is what a soft-edged
+ * patch on the ground is, and a shadow with an outline is a cutout laid on the
+ * sand rather than an absence of light on it.
+ */
+import { OWN, type Pen, TONE } from "./pen.ts"
+
+/** Anything that can come between the light and the ground. */
+export interface Caster {
+  readonly depth: number
+  readonly size: number
+  readonly x: number
+  readonly y: number
+}
+
+/**
+ * How dark the patch is where a thing is sitting on the sand, and the least
+ * that is left of it at the far end of the water.
+ *
+ * The haze takes it the same way it takes everything else. A shadow at the back
+ * of the picture that stayed as dark as one at the front would be doing the
+ * opposite of its job: it would say near.
+ */
+const SHADE_INK = 0.85
+
+const HAZE = 0.06
+
+/**
+ * How far above the sand a thing still puts anything on it, as a share of the
+ * box, and how much wider the patch has got by then.
+ *
+ * Very short, and it was three times this to begin with. The ground here is
+ * seen almost edge on, so a hundred fish shadows spread over it do not read as
+ * a hundred shadows: they overlap into one dark band along the sand and the
+ * picture has gained a smear rather than a dimension. What does read is contact,
+ * a thing close enough to the sand that the patch is still tight and still under
+ * it, so this is set to the height at which that is true and nothing further up
+ * puts anything down at all.
+ */
+const DROP = 0.09
+
+const SPREAD = 1.3
+
+/**
+ * How flat the patch is, and how it gives out from the middle.
+ *
+ * Flat because the ground is being seen almost edge on: a circle of shade on
+ * sand that is nearly side on to the reader is an ellipse, and one this shallow
+ * before it is anything else. The falloff is soft, since the light making it
+ * comes from a whole surface rather than from a point.
+ */
+const FLAT = 0.17
+
+const FALL = 1.2
+
+/**
+ * What each of them puts on the ground, in one pass.
+ *
+ * Handed the whole crowd rather than called per animal, because these belong
+ * under everything that swims and there is exactly one moment in the scene
+ * where that is true.
+ */
+export function paintShade(
+  pen: Pen,
+  things: readonly Caster[],
+  floor: (x: number, depth?: number) => number,
+  height: number,
+): void {
+  const reach = Math.max(1, height * DROP)
+
+  for (const one of things) {
+    const sand = floor(one.x, one.depth)
+    const up = (sand - one.y) / reach
+    if (up < 0 || up >= 1) continue
+
+    // Steeper than straight, so a thing loses its shadow over the first part of
+    // the climb rather than at the end of it. Light off a surface spreads as it
+    // goes, and what spreads is gone long before it has run out of distance.
+    const held = (1 - up) ** 1.4
+
+    pen.light(one.x, sand, {
+      alpha: (HAZE + (SHADE_INK - HAZE) * Math.min(1, Math.max(0, one.depth))) * held,
+      fall: FALL,
+      lane: one.depth,
+      // Read where the patch is rather than where the animal is: a shadow is
+      // the ground with the light taken out of it, and the ground is what it
+      // has to be dark against.
+      shade: OWN,
+      thin: FLAT,
+      tone: TONE.shadow,
+      weight: 1,
+      width: one.size * (1 + SPREAD * up),
+    })
+  }
+}

package/src/paint/sky.ts

@@ -0,0 +1,377 @@
+/**
+ * What is above the water: the two bodies, the light off them, and the wash the
+ * hour puts over everything.
+ *
+ * The hour comes from `sun.ts`, so the sun sets on a desktop at the minute it
+ * sets in the porthole on the website, and the moon is the shape tonight's moon
+ * actually is.
+ */
+import type { Clouds } from "../cloud.ts"
+import { type Passage, type Phase, sunlit, sunNow } from "../sun.ts"
+import { OWN, type Pen, type Point, TONE } from "./pen.ts"
+
+/** The ends of a crossing, the top and bottom of the arc between them, and how
+ *  big a body is drawn. */
+const EAST = 0.12
+const WEST = 0.88
+const HIGH = 0.055
+const LOW = 0.17
+const DISC = 0.028
+
+/** How far the shaft's foot swings either side of the body, and how far it has
+ *  opened by the bottom of the box. */
+const SWING = 0.34
+const SPREAD = 0.085
+
+/** How far down the box the shaft goes, how heavy it is at its mouth, and how
+ *  fast it gives up. */
+const FALL = 0.34
+const DISC_INK = 0.012
+const DISC_GIVE = 2.6
+
+/** The three lights off a body: the veil out past everything, the halo that is
+ *  most of the light there is, and the streak a lens gives a bright thing. */
+const BLOOM = { fall: 2.4, ink: 0.016, reach: 13, thin: 1 }
+const HALO = { fall: 1.6, ink: 0.07, reach: 4.2, thin: 1 }
+const STREAK = { fall: 2.1, ink: 0.06, reach: 12, thin: 0.1 }
+
+/** How much of the box a dusk reaches down, and how heavy the two washes are. */
+const DUSK_REACH = 0.62
+const DUSK_INK = 0.09
+const NIGHT_INK = 0.3
+
+/**
+ * Where the bodies sit against everything else, and where the washes do.
+ *
+ * Behind the whole sea, cliffs included. A reader of this picture is under the
+ * water looking up, so everything in it is between them and the sky: a moon
+ * drawn in front of the far wall is a moon in the room. What that costs is a
+ * low moon going behind the rock at the edge of the picture, which is what a
+ * low moon does.
+ *
+ * The clouds are the one thing between the bodies and the water, since a cloud
+ * is the only thing here that is above the sea and below the sky.
+ */
+const LANE = { body: -4.2, cloud: -4, dusk: 3, night: 3.1 }
+
+/**
+ * The weather, as the light it holds back.
+ *
+ * `ink` is how much of the water's own colour one lobe lays over what is behind
+ * it, `give` is how quickly that runs out towards the lobe's edge, and `squat`
+ * is how much shorter than it is wide a lobe is drawn.
+ *
+ * Painted in the water rather than in a colour of its own, because from under
+ * here a cloud is not a white shape on a night sky. It is the light not
+ * arriving, and the water is what is left where it does not.
+ */
+const CLOUD = { give: 1.4, ink: 0.62, lit: 0.5, rim: 0.82, shade: 0.34, squat: 0.5 }
+
+/**
+ * How much of a body's own light the thickest cloud takes.
+ *
+ * The shape covers what it covers, and this is the rest of it: a moon behind
+ * cloud throws a fainter shaft into the water than a clear one, and the shaft
+ * leaves the moon a long way from any cloud. Not all of it, since a covered
+ * moon still lights the cloud it is behind.
+ */
+const MUTE = 0.8
+
+/**
+ * The craters, off centre and unevenly sized on purpose.
+ *
+ * Three round spots spaced evenly on a disc is a face, and the moment anybody
+ * sees a face there they stop seeing a moon. In units of the moon's own radius,
+ * with the size third.
+ */
+const CRATERS = [
+  [-0.34, -0.22, 0.22],
+  [0.19, -0.45, 0.1],
+  [0.31, 0.3, 0.15],
+] as const
+
+/** How dark a crater is against the moon it is on. */
+const CRATER_INK = 0.34
+
+/** How many sides a disc is cut into. Enough that the edge of a moon a
+ *  fingernail across is a curve rather than a decision. */
+const ROUND = 72
+
+export interface Box {
+  height: number
+  width: number
+}
+
+/**
+ * A body, as everything else in the sky needs it: where it is, how much light
+ * it is throwing, how far that light carries and what colour it is.
+ */
+interface Lamp {
+  cx: number
+  cy: number
+  glow: number
+  reach: number
+  tone: number
+}
+
+/**
+ * An hour asked for rather than read off the clock, for a harness holding one
+ * renderer against another.
+ *
+ * Two renderers can only be compared on the same sky, and the sky is a function
+ * of the minute the still was taken in. Every harness over this ornament takes
+ * the same four numbers for the same reason.
+ */
+export interface Asked {
+  daylight: number
+  dusk: number
+  lit: number
+  march: number
+  waxing: boolean
+}
+
+/**
+ * The sky, drawn.
+ *
+ * Both bodies every time, not the one that happens to be up: a single disc that
+ * swapped identity at dusk would set in the west and reappear a moment later in
+ * the east. Fading a setting sun out where it set while a moon comes up on the
+ * other side is what actually happens, and it costs one more circle.
+ */
+export function paintSky(
+  pen: Pen,
+  box: Box,
+  clouds: Clouds | null = null,
+  asked: Asked | null = null,
+): { daylight: number; dusk: number } {
+  const sky = asked
+    ? {
+        daylight: asked.daylight,
+        dusk: asked.dusk,
+        moon: {
+          arc: Math.sin(asked.march * Math.PI),
+          lit: asked.lit,
+          march: asked.march,
+          up: 1,
+          waxing: asked.waxing,
+        },
+        sun: { arc: Math.sin(asked.march * Math.PI), march: asked.march, up: 1 },
+      }
+    : sunNow()
+  const bodies = [
+    {
+      moon: false,
+      passage: sky.sun,
+      phase: null as Phase | null,
+      show: sky.daylight,
+      tone: TONE.sun,
+    },
+    {
+      moon: true,
+      passage: sky.moon,
+      phase: sky.moon as Phase,
+      show: (1 - sky.daylight) * sky.moon.up,
+      tone: TONE.moon,
+    },
+  ]
+
+  const lamps: Lamp[] = []
+  for (const body of bodies) {
+    if (body.show <= 0.004) continue
+    lamps.push(paintBody(pen, box, body.passage, body.phase, body.show, body.tone, clouds))
+  }
+
+  // After both of them, because what a cloud does is cover a light that has
+  // already been drawn, and what light it has of its own is theirs.
+  if (clouds) paintClouds(pen, clouds, lamps)
+
+  // Dusk falls off with depth and night does not, which is the difference
+  // between the two. A sunset is a colour arriving through the surface and it
+  // gets no further down than the light it came in on; laid flat over the whole
+  // box it lifts the floor off black and the water goes to one olive haze.
+  if (sky.dusk > 0) {
+    pen.wash({
+      alpha: DUSK_INK * sky.dusk,
+      fade: [0, box.height * DUSK_REACH],
+      lane: LANE.dusk,
+      tone: TONE.dusk,
+    })
+  }
+
+  if (sky.daylight < 1) {
+    pen.wash({ alpha: NIGHT_INK * (1 - sky.daylight), lane: LANE.night, tone: TONE.surface })
+  }
+
+  return { daylight: sky.daylight, dusk: sky.dusk }
+}
+
+/**
+ * One body: the light around it, the shaft under it, and the disc itself.
+ *
+ * The disc is drawn at full strength whatever shape it is in, because a
+ * crescent is as bright per inch as a full moon and there is simply less of it.
+ * What there is less of is everything around it, so the halo, the bloom, the
+ * streak and the shaft all take `lit`. A new moon throws nothing, which is what
+ * a new moon does.
+ */
+function paintBody(
+  pen: Pen,
+  box: Box,
+  passage: Passage,
+  phase: Phase | null,
+  show: number,
+  tone: number,
+  clouds: Clouds | null,
+): Lamp {
+  const r = box.height * DISC
+  const cx = box.width * (EAST + passage.march * (WEST - EAST))
+  const cy = box.height * (LOW + passage.arc * (HIGH - LOW))
+  const veiled = clouds ? 1 - MUTE * clouds.cover(cx, cy) : 1
+  const glow = show * (phase ? phase.lit : 1) * veiled
+
+  // A body over on the left throws its shaft down and to the right, and one
+  // directly overhead throws it straight down.
+  const lean = (0.5 - passage.march) * SWING
+
+  for (const light of [BLOOM, HALO, STREAK]) {
+    pen.light(cx, cy, {
+      alpha: light.ink * glow,
+      fall: light.fall,
+      lane: LANE.body,
+      shade: OWN,
+      thin: light.thin,
+      tone,
+      width: r * light.reach,
+    })
+  }
+
+  // The shaft, its mouth the disc's own diameter at the disc's own centre, so
+  // the two edges are tangent to it and the lower half of the disc sits inside
+  // its own light. Started anywhere below that line the mouth is wider than the
+  // disc is at that height, and the light appears to come out of its sides.
+  pen.fill(
+    [
+      [
+        { x: cx - r, y: cy },
+        { x: cx + r, y: cy },
+        { x: cx + box.width * (lean + SPREAD), y: box.height },
+        { x: cx + box.width * (lean - SPREAD), y: box.height },
+      ],
+    ],
+    {
+      alpha: DISC_INK * glow,
+      fade: [cy, Math.max(1, box.height * FALL - cy)],
+      fall: DISC_GIVE,
+      lane: LANE.body,
+      tone,
+    },
+  )
+
+  pen.fill([phase ? crescent(cx, cy, r, phase) : disc(cx, cy, r)], {
+    alpha: show,
+    lane: LANE.body,
+    tone,
+  })
+
+  if (!phase) return { cx, cy, glow, reach: r * HALO.reach, tone }
+
+  // A crater sitting where there is no moon under it is a grey spot on the sky,
+  // so one is drawn only once it is clear of the terminator by its own width,
+  // and fades in over the next. Through the month they go out one after another
+  // as the shadow crosses them, which is what a terminator is for looking at.
+  for (const [x, y, size] of CRATERS) {
+    const clear = sunlit(x, y, phase) / size - 1
+    if (clear <= 0) continue
+
+    pen.fill([disc(cx + r * x, cy + r * y, r * size)], {
+      alpha: CRATER_INK * show * Math.min(1, clear),
+      lane: LANE.body,
+      tone: TONE.surface,
+    })
+  }
+
+  return { cx, cy, glow, reach: r * HALO.reach, tone }
+}
+
+/**
+ * The weather, as lobes of water laid over whatever light is behind them.
+ *
+ * A round light rather than an outline, which is the one shape in this pen
+ * that has a soft edge: a cloud cut as a polygon has a rim, and a rim is the
+ * one thing a cloud does not have. The mass is the lobes overlapping, so it is
+ * densest where it is thickest and gives out at the edges without being told
+ * to.
+ */
+function paintClouds(pen: Pen, clouds: Clouds, lamps: readonly Lamp[]): void {
+  for (const one of clouds.clouds) {
+    for (const lobe of one.lobes) {
+      const x = one.x + lobe.dx
+      const y = one.y + lobe.dy
+
+      pen.light(x, y, {
+        alpha: CLOUD.ink * one.thick,
+        fall: CLOUD.give,
+        lane: LANE.cloud,
+        thin: CLOUD.squat,
+        tone: TONE.shadow,
+        weight: CLOUD.shade * one.thick,
+        width: lobe.r,
+      })
+
+      // What the mass gives back, which is the light it just took. A lobe near
+      // the body is standing in that body's halo and is lit by it; one at the
+      // other end of the sky is a shadow and nothing else. Smaller than the
+      // mass that took the light, so what shows is the light around the edge
+      // of a cloud rather than a cloud turned into a lamp.
+      for (const lamp of lamps) {
+        const near = 1 - Math.hypot(x - lamp.cx, y - lamp.cy) / lamp.reach
+        if (near <= 0) continue
+
+        pen.light(x, y, {
+          alpha: CLOUD.lit * lamp.glow * near * one.thick,
+          fall: CLOUD.give,
+          lane: LANE.cloud,
+          thin: CLOUD.squat,
+          tone: lamp.tone,
+          width: lobe.r * CLOUD.rim,
+        })
+      }
+    }
+  }
+}
+
+/** A disc, as a polygon. */
+function disc(cx: number, cy: number, r: number): Point[] {
+  const points: Point[] = []
+  for (let i = 0; i < ROUND; i++) {
+    const turn = (i / ROUND) * Math.PI * 2
+    points.push({ x: cx + r * Math.cos(turn), y: cy + r * Math.sin(turn) })
+  }
+  return points
+}
+
+/**
+ * The lit part of the moon, as a polygon.
+ *
+ * The same two arcs `crescent` in the ornament writes as a path, walked instead
+ * of written: the limb, which is the disc's own edge on the side the sun is,
+ * and the terminator, which is a circle around the moon seen edge on and so is
+ * an ellipse squeezed by how much of the disc is in the light.
+ */
+function crescent(cx: number, cy: number, r: number, { lit, waxing }: Phase): Point[] {
+  const side = waxing ? 1 : -1
+  const waist = r * (2 * lit - 1)
+  const points: Point[] = []
+  const half = ROUND / 2
+
+  for (let i = 0; i <= half; i++) {
+    const turn = (i / half) * Math.PI
+    points.push({ x: cx + side * r * Math.sin(turn), y: cy - r * Math.cos(turn) })
+  }
+  for (let i = half; i >= 0; i--) {
+    const turn = (i / half) * Math.PI
+    points.push({ x: cx - side * waist * Math.sin(turn), y: cy - r * Math.cos(turn) })
+  }
+
+  return points
+}