@codincod/ornament 0.0.0-stage → 0.2.0

package/src/paint/trace.ts

@@ -0,0 +1,164 @@
+/**
+ * A drawing, walked.
+ *
+ * The ornament writes its animals and its wreckage as paths, because that is
+ * what a browser and Qt both take: a string of moves and curves. This renderer
+ * takes triangles, so somewhere between the two the curves have to become
+ * points, and here is the cheapest place for it to happen. The alternative is a
+ * path parser on the other side of the wire and a string squeezed through an
+ * array of floats to reach it.
+ *
+ * Absolute commands only, and only the four the ornament writes: a move, a
+ * line, a cubic and a quadratic, with a close. Nothing here guesses at the rest
+ * of SVG. If a drawing ever grows an arc, this will draw it as the chord and
+ * somebody will see it.
+ */
+import type { Point } from "./pen.ts"
+
+/**
+ * How fine a curve is cut, as a share of how big the whole drawing is.
+ *
+ * A share rather than a length, and that is the whole of the change this file
+ * once needed. The drawings in this ornament are not written at one scale: a
+ * fish is about forty units nose to tail and an octopus is written about the
+ * origin at less than one, and both are stood at whatever size they are
+ * actually drawn. Cut to a fixed length, the fish came out smooth and the
+ * octopus came out as a heptagon with legs, and nothing said so until one was
+ * magnified on a plate.
+ *
+ * So a curve is cut against the drawing it belongs to. The steps are still
+ * counted against how far the curve actually runs, because a long sweep down a
+ * whale's back and the notch in a tail fin are the same command and want a
+ * different number of pieces.
+ */
+const STEP = 0.035
+const MOST = 24
+
+/** What one path came to, kept, since a fish is the same drawing as the fish
+ *  beating beside it and there are only so many steps in a beat. */
+const walked = new Map<string, Point[][]>()
+
+export function trace(d: string): Point[][] {
+  const held = walked.get(d)
+  if (held) return held
+
+  const cut = walk(d)
+  walked.set(d, cut)
+  return cut
+}
+
+/**
+ * How big the drawing is, off the numbers in it.
+ *
+ * The furthest any coordinate gets from the origin, which is a bound on the
+ * drawing rather than its size. It is read off the string because it has to be
+ * known before the walk it decides the fineness of, and because every drawing
+ * in this ornament is written about its own middle, where the two are close
+ * enough.
+ */
+function span(d: string): number {
+  let widest = 0
+  const numbers = d.match(/-?\d*\.?\d+(?:e-?\d+)?/g)
+  if (!numbers) return 1
+  for (const one of numbers) widest = Math.max(widest, Math.abs(Number(one)))
+  return Math.max(widest, 0.001)
+}
+
+function walk(d: string): Point[][] {
+  const step = span(d) * STEP
+  const parts: Point[][] = []
+  let here: Point[] = []
+  let at = { x: 0, y: 0 }
+  let start = { x: 0, y: 0 }
+
+  const tokens = d.match(/[MLCQZmlcqz]|-?\d*\.?\d+(?:e-?\d+)?/g) ?? []
+  let read = 0
+  const number = () => Number(tokens[read++])
+
+  while (read < tokens.length) {
+    const command = tokens[read++]
+
+    if (command === "M" || command === "m") {
+      if (here.length > 1) parts.push(here)
+      here = []
+      at = { x: number(), y: number() }
+      start = at
+      here.push(at)
+      continue
+    }
+
+    if (command === "L" || command === "l") {
+      at = { x: number(), y: number() }
+      here.push(at)
+      continue
+    }
+
+    if (command === "C" || command === "c") {
+      const one = { x: number(), y: number() }
+      const two = { x: number(), y: number() }
+      const end = { x: number(), y: number() }
+      cubic(here, at, one, two, end, step)
+      at = end
+      continue
+    }
+
+    if (command === "Q" || command === "q") {
+      const hold = { x: number(), y: number() }
+      const end = { x: number(), y: number() }
+      quadratic(here, at, hold, end, step)
+      at = end
+      continue
+    }
+
+    if (command === "Z" || command === "z") {
+      if (here.length > 1) parts.push(here)
+      here = []
+      at = start
+      continue
+    }
+
+    // A number where a command was expected is a repeat of the last one, which
+    // the ornament does not write. Skipping it is better than reading the rest
+    // of the drawing off by one.
+  }
+
+  if (here.length > 1) parts.push(here)
+  return parts
+}
+
+/** How many pieces a curve of this reach is worth cutting into. */
+function pieces(reach: number, step: number): number {
+  return Math.max(2, Math.min(MOST, Math.ceil(reach / step)))
+}
+
+function cubic(into: Point[], from: Point, one: Point, two: Point, end: Point, step: number): void {
+  const reach =
+    Math.hypot(one.x - from.x, one.y - from.y) +
+    Math.hypot(two.x - one.x, two.y - one.y) +
+    Math.hypot(end.x - two.x, end.y - two.y)
+  const steps = pieces(reach, step)
+
+  for (let i = 1; i <= steps; i++) {
+    const t = i / steps
+    const u = 1 - t
+    into.push({
+      x: u * u * u * from.x + 3 * u * u * t * one.x + 3 * u * t * t * two.x + t * t * t * end.x,
+      y: u * u * u * from.y + 3 * u * u * t * one.y + 3 * u * t * t * two.y + t * t * t * end.y,
+    })
+  }
+}
+
+function quadratic(into: Point[], from: Point, hold: Point, end: Point, step: number): void {
+  const reach =
+    Math.hypot(hold.x - from.x, hold.y - from.y) + Math.hypot(end.x - hold.x, end.y - hold.y)
+  const steps = pieces(reach, step)
+
+  for (let i = 1; i <= steps; i++) {
+    const t = i / steps
+    const u = 1 - t
+    into.push({
+      x: u * u * from.x + 2 * u * t * hold.x + t * t * end.x,
+      y: u * u * from.y + 2 * u * t * hold.y + t * t * end.y,
+    })
+  }
+}