@motionscript/grids 0.1.0-alpha.7 → 0.1.0-alpha.9

package/src/kit/order.ts

@@ -1,41 +1,41 @@
-/**
- * A grid's `order` lists items in slot order: slot `k` holds item `order[k]`.
- * These keep it a permutation whatever it was written as — a stale entry past
- * the count, a repeat, or nothing at all — so a child added or removed never
- * leaves a slot empty or two items in one.
- */
-
-/** `order` repaired into a permutation of `0..count-1`: its valid entries first, then the rest in item order. */
-export function normalizeOrder(order: readonly number[] | undefined, count: number): number[] {
-  const out: number[] = []
-  const taken = new Array<boolean>(count).fill(false)
-  for (const entry of order ?? []) {
-    const item = Math.round(entry)
-    if (item >= 0 && item < count && !taken[item]) {
-      taken[item] = true
-      out.push(item)
-    }
-  }
-  for (let item = 0; item < count; item++) if (!taken[item]) out.push(item)
-  return out
-}
-
-/** For each item, the slot it sits in. */
-export function slotOfItem(order: readonly number[]): number[] {
-  const slots = new Array<number>(order.length)
-  order.forEach((item, slot) => {
-    slots[item] = slot
-  })
-  return slots
-}
-
-/** An order written as `"2, 0, 1"` or as numbers. */
-export function parseOrder(value: unknown): number[] {
-  if (Array.isArray(value)) return value.map(Number).filter(Number.isFinite)
-  if (typeof value !== "string") return []
-  return value
-    .split(/[\s,]+/)
-    .filter((part) => part !== "")
-    .map(Number)
-    .filter(Number.isFinite)
-}
+/**
+ * A grid's `order` lists items in slot order: slot `k` holds item `order[k]`.
+ * These keep it a permutation whatever it was written as — a stale entry past
+ * the count, a repeat, or nothing at all — so a child added or removed never
+ * leaves a slot empty or two items in one.
+ */
+
+/** `order` repaired into a permutation of `0..count-1`: its valid entries first, then the rest in item order. */
+export function normalizeOrder(order: readonly number[] | undefined, count: number): number[] {
+  const out: number[] = []
+  const taken = new Array<boolean>(count).fill(false)
+  for (const entry of order ?? []) {
+    const item = Math.round(entry)
+    if (item >= 0 && item < count && !taken[item]) {
+      taken[item] = true
+      out.push(item)
+    }
+  }
+  for (let item = 0; item < count; item++) if (!taken[item]) out.push(item)
+  return out
+}
+
+/** For each item, the slot it sits in. */
+export function slotOfItem(order: readonly number[]): number[] {
+  const slots = new Array<number>(order.length)
+  order.forEach((item, slot) => {
+    slots[item] = slot
+  })
+  return slots
+}
+
+/** An order written as `"2, 0, 1"` or as numbers. */
+export function parseOrder(value: unknown): number[] {
+  if (Array.isArray(value)) return value.map(Number).filter(Number.isFinite)
+  if (typeof value !== "string") return []
+  return value
+    .split(/[\s,]+/)
+    .filter((part) => part !== "")
+    .map(Number)
+    .filter(Number.isFinite)
+}

package/src/kit/random.ts

@@ -1,29 +1,29 @@
-/** A seeded generator in `[0, 1)` — mulberry32, so a shuffle is the same on every frame and every machine. */
-export function seededRandom(seed: number): () => number {
-  let a = Math.floor(seed) >>> 0
-  return () => {
-    a = (a + 0x6d2b79f5) >>> 0
-    let t = a
-    t = Math.imul(t ^ (t >>> 15), t | 1)
-    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
-  }
-}
-
-/** `values` in a seeded random order. */
-export function shuffled<T>(values: readonly T[], seed: number): T[] {
-  const out = [...values]
-  const random = seededRandom(seed)
-  for (let i = out.length - 1; i > 0; i--) {
-    const j = Math.floor(random() * (i + 1))
-    ;[out[i], out[j]] = [out[j], out[i]]
-  }
-  return out
-}
-
-/** A stable number for a string — a node's id, so its "random" stagger never changes between builds. */
-export function hashSeed(text: string): number {
-  let h = 2166136261
-  for (let i = 0; i < text.length; i++) h = Math.imul(h ^ text.charCodeAt(i), 16777619)
-  return h >>> 0
-}
+/** A seeded generator in `[0, 1)` — mulberry32, so a shuffle is the same on every frame and every machine. */
+export function seededRandom(seed: number): () => number {
+  let a = Math.floor(seed) >>> 0
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0
+    let t = a
+    t = Math.imul(t ^ (t >>> 15), t | 1)
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
+}
+
+/** `values` in a seeded random order. */
+export function shuffled<T>(values: readonly T[], seed: number): T[] {
+  const out = [...values]
+  const random = seededRandom(seed)
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(random() * (i + 1))
+    ;[out[i], out[j]] = [out[j], out[i]]
+  }
+  return out
+}
+
+/** A stable number for a string — a node's id, so its "random" stagger never changes between builds. */
+export function hashSeed(text: string): number {
+  let h = 2166136261
+  for (let i = 0; i < text.length; i++) h = Math.imul(h ^ text.charCodeAt(i), 16777619)
+  return h >>> 0
+}

package/src/kit/slots/index.ts

@@ -1,39 +1,39 @@
-import { pathSlots, type PathArrangement } from "./path"
-import { radialSlots, type RadialArrangement } from "./radial"
-import { rectangularSlots, type RectangularArrangement } from "./rectangular"
-import type { Slot, SlotInput } from "./slot"
-import { sphereSlots, type SphereArrangement } from "./sphere"
-
-export * from "./slot"
-export * from "./rectangular"
-export * from "./radial"
-export * from "./path"
-export * from "./path-templates"
-export * from "./sphere"
-
-/**
- * Everything an arrangement needs to place items, as plain data — so a
- * transition can keep the one it is leaving, and a grid can borrow another's.
- */
-export type Arrangement = RectangularArrangement | RadialArrangement | PathArrangement | SphereArrangement
-
-export type ArrangementKind = Arrangement["kind"]
-
-/** Where each of `input.count` items sits under `arrangement`, in slot order. */
-export function slotsOf(arrangement: Arrangement, input: SlotInput): Slot[] {
-  switch (arrangement.kind) {
-    case "rectangular":
-      return rectangularSlots(arrangement, input)
-    case "radial":
-      return radialSlots(arrangement, input)
-    case "path":
-      return pathSlots(arrangement, input)
-    case "sphere":
-      return sphereSlots(arrangement, input)
-  }
-}
-
-/** The camera distance an arrangement is seen through, or `0` when it is flat. */
-export function focalLengthOf(arrangement: Arrangement): number {
-  return arrangement.kind === "sphere" ? Math.max(1, arrangement.focalLength) : 0
-}
+import { pathSlots, type PathArrangement } from "./path"
+import { radialSlots, type RadialArrangement } from "./radial"
+import { rectangularSlots, type RectangularArrangement } from "./rectangular"
+import type { Slot, SlotInput } from "./slot"
+import { sphereSlots, type SphereArrangement } from "./sphere"
+
+export * from "./slot"
+export * from "./rectangular"
+export * from "./radial"
+export * from "./path"
+export * from "./path-templates"
+export * from "./sphere"
+
+/**
+ * Everything an arrangement needs to place items, as plain data — so a
+ * transition can keep the one it is leaving, and a grid can borrow another's.
+ */
+export type Arrangement = RectangularArrangement | RadialArrangement | PathArrangement | SphereArrangement
+
+export type ArrangementKind = Arrangement["kind"]
+
+/** Where each of `input.count` items sits under `arrangement`, in slot order. */
+export function slotsOf(arrangement: Arrangement, input: SlotInput): Slot[] {
+  switch (arrangement.kind) {
+    case "rectangular":
+      return rectangularSlots(arrangement, input)
+    case "radial":
+      return radialSlots(arrangement, input)
+    case "path":
+      return pathSlots(arrangement, input)
+    case "sphere":
+      return sphereSlots(arrangement, input)
+  }
+}
+
+/** The camera distance an arrangement is seen through, or `0` when it is flat. */
+export function focalLengthOf(arrangement: Arrangement): number {
+  return arrangement.kind === "sphere" ? Math.max(1, arrangement.focalLength) : 0
+}

package/src/kit/slots/path-templates.ts

@@ -1,120 +1,120 @@
-import type { PathCommand, Size2D } from "@motionscript/sdk"
-
-/**
- * The shapes a path grid can follow without a path of its own, each drawn to
- * fill the grid's box. Centred and y-up, like every path in the library; the
- * closed ones run clockwise, so an item flowing along any of them travels the
- * same way round.
- */
-export const PATH_TEMPLATES = [
-  "circle",
-  "square",
-  "star",
-  "heart",
-  "infinity",
-  "wave",
-  "spiral",
-  "arc",
-  "line",
-] as const
-export type PathTemplate = (typeof PATH_TEMPLATES)[number]
-
-/** What a template is drawn at when the grid has no box to fill. */
-const FALLBACK = 400
-
-const DRAWN = new Map<string, PathCommand[]>()
-const DRAWN_CACHE = 64
-
-/**
- * `template` drawn to fill `box`. The same template at the same size is the
- * same array, which is what lets the path's measurement be kept between frames.
- */
-export function templatePath(template: PathTemplate, box: Size2D): PathCommand[] {
-  const key = `${template}:${Math.round(box.width * 100)}:${Math.round(box.height * 100)}`
-  const hit = DRAWN.get(key)
-  if (hit) return hit
-  const path = drawTemplate(template, box)
-  if (DRAWN.size >= DRAWN_CACHE) DRAWN.delete(DRAWN.keys().next().value!)
-  DRAWN.set(key, path)
-  return path
-}
-
-function drawTemplate(template: PathTemplate, box: Size2D): PathCommand[] {
-  const w = box.width > 0 ? box.width : FALLBACK
-  const h = box.height > 0 ? box.height : FALLBACK
-  const rx = w / 2
-  const ry = h / 2
-  switch (template) {
-    case "square":
-      return closed([
-        [-rx, ry], [rx, ry], [rx, -ry], [-rx, -ry],
-      ])
-    case "star": {
-      const points: [number, number][] = []
-      for (let i = 0; i < 10; i++) {
-        const angle = (i * Math.PI) / 5
-        const r = i % 2 === 0 ? 1 : 0.45
-        points.push([Math.sin(angle) * rx * r, Math.cos(angle) * ry * r])
-      }
-      return closed(points)
-    }
-    case "heart":
-      return closed(sample(96, (t) => {
-        // The classic heart curve, from its top notch, clockwise.
-        const a = t * 2 * Math.PI
-        const x = 16 * Math.sin(a) ** 3
-        const y = 13 * Math.cos(a) - 5 * Math.cos(2 * a) - 2 * Math.cos(3 * a) - Math.cos(4 * a)
-        return [(x / 17) * rx, ((y + 2.5) / 15.5) * ry]
-      }).slice(0, -1))
-    case "infinity":
-      return closed(sample(96, (t) => {
-        const a = t * 2 * Math.PI
-        const d = 1 + Math.sin(a) ** 2
-        return [(Math.cos(a) / d) * rx, ((Math.sin(a) * Math.cos(a)) / d) * ry * 2]
-      }).slice(0, -1))
-    case "wave":
-      return open(sample(96, (t) => [(-1 + 2 * t) * rx, Math.sin(t * 4 * Math.PI) * ry * 0.6]))
-    case "spiral":
-      return open(sample(160, (t) => {
-        const a = t * 3 * 2 * Math.PI
-        const r = 0.08 + 0.92 * t
-        return [Math.sin(a) * rx * r, Math.cos(a) * ry * r]
-      }))
-    case "arc":
-      return open(sample(64, (t) => {
-        const a = -Math.PI / 2 + t * Math.PI
-        return [Math.sin(a) * rx, -ry + Math.cos(a) * h]
-      }))
-    case "line":
-      return [{ type: "M", x: -rx, y: 0 }, { type: "L", x: rx, y: 0 }]
-    default:
-      return ellipse(rx, ry)
-  }
-}
-
-/** Four quarter-arcs from the top, clockwise. */
-function ellipse(rx: number, ry: number): PathCommand[] {
-  const k = 0.5522847498
-  return [
-    { type: "M", x: 0, y: ry },
-    { type: "C", x1: k * rx, y1: ry, x2: rx, y2: k * ry, x: rx, y: 0 },
-    { type: "C", x1: rx, y1: -k * ry, x2: k * rx, y2: -ry, x: 0, y: -ry },
-    { type: "C", x1: -k * rx, y1: -ry, x2: -rx, y2: -k * ry, x: -rx, y: 0 },
-    { type: "C", x1: -rx, y1: k * ry, x2: -k * rx, y2: ry, x: 0, y: ry },
-    { type: "Z" },
-  ]
-}
-
-function sample(steps: number, at: (t: number) => [number, number]): [number, number][] {
-  const points: [number, number][] = []
-  for (let i = 0; i <= steps; i++) points.push(at(i / steps))
-  return points
-}
-
-function open(points: [number, number][]): PathCommand[] {
-  return points.map(([x, y], i) => (i === 0 ? { type: "M", x, y } : { type: "L", x, y }))
-}
-
-function closed(points: [number, number][]): PathCommand[] {
-  return [...open(points), { type: "Z" }]
-}
+import type { PathCommand, Size2D } from "@motionscript/sdk"
+
+/**
+ * The shapes a path grid can follow without a path of its own, each drawn to
+ * fill the grid's box. Centred and y-up, like every path in the library; the
+ * closed ones run clockwise, so an item flowing along any of them travels the
+ * same way round.
+ */
+export const PATH_TEMPLATES = [
+  "circle",
+  "square",
+  "star",
+  "heart",
+  "infinity",
+  "wave",
+  "spiral",
+  "arc",
+  "line",
+] as const
+export type PathTemplate = (typeof PATH_TEMPLATES)[number]
+
+/** What a template is drawn at when the grid has no box to fill. */
+const FALLBACK = 400
+
+const DRAWN = new Map<string, PathCommand[]>()
+const DRAWN_CACHE = 64
+
+/**
+ * `template` drawn to fill `box`. The same template at the same size is the
+ * same array, which is what lets the path's measurement be kept between frames.
+ */
+export function templatePath(template: PathTemplate, box: Size2D): PathCommand[] {
+  const key = `${template}:${Math.round(box.width * 100)}:${Math.round(box.height * 100)}`
+  const hit = DRAWN.get(key)
+  if (hit) return hit
+  const path = drawTemplate(template, box)
+  if (DRAWN.size >= DRAWN_CACHE) DRAWN.delete(DRAWN.keys().next().value!)
+  DRAWN.set(key, path)
+  return path
+}
+
+function drawTemplate(template: PathTemplate, box: Size2D): PathCommand[] {
+  const w = box.width > 0 ? box.width : FALLBACK
+  const h = box.height > 0 ? box.height : FALLBACK
+  const rx = w / 2
+  const ry = h / 2
+  switch (template) {
+    case "square":
+      return closed([
+        [-rx, ry], [rx, ry], [rx, -ry], [-rx, -ry],
+      ])
+    case "star": {
+      const points: [number, number][] = []
+      for (let i = 0; i < 10; i++) {
+        const angle = (i * Math.PI) / 5
+        const r = i % 2 === 0 ? 1 : 0.45
+        points.push([Math.sin(angle) * rx * r, Math.cos(angle) * ry * r])
+      }
+      return closed(points)
+    }
+    case "heart":
+      return closed(sample(96, (t) => {
+        // The classic heart curve, from its top notch, clockwise.
+        const a = t * 2 * Math.PI
+        const x = 16 * Math.sin(a) ** 3
+        const y = 13 * Math.cos(a) - 5 * Math.cos(2 * a) - 2 * Math.cos(3 * a) - Math.cos(4 * a)
+        return [(x / 17) * rx, ((y + 2.5) / 15.5) * ry]
+      }).slice(0, -1))
+    case "infinity":
+      return closed(sample(96, (t) => {
+        const a = t * 2 * Math.PI
+        const d = 1 + Math.sin(a) ** 2
+        return [(Math.cos(a) / d) * rx, ((Math.sin(a) * Math.cos(a)) / d) * ry * 2]
+      }).slice(0, -1))
+    case "wave":
+      return open(sample(96, (t) => [(-1 + 2 * t) * rx, Math.sin(t * 4 * Math.PI) * ry * 0.6]))
+    case "spiral":
+      return open(sample(160, (t) => {
+        const a = t * 3 * 2 * Math.PI
+        const r = 0.08 + 0.92 * t
+        return [Math.sin(a) * rx * r, Math.cos(a) * ry * r]
+      }))
+    case "arc":
+      return open(sample(64, (t) => {
+        const a = -Math.PI / 2 + t * Math.PI
+        return [Math.sin(a) * rx, -ry + Math.cos(a) * h]
+      }))
+    case "line":
+      return [{ type: "M", x: -rx, y: 0 }, { type: "L", x: rx, y: 0 }]
+    default:
+      return ellipse(rx, ry)
+  }
+}
+
+/** Four quarter-arcs from the top, clockwise. */
+function ellipse(rx: number, ry: number): PathCommand[] {
+  const k = 0.5522847498
+  return [
+    { type: "M", x: 0, y: ry },
+    { type: "C", x1: k * rx, y1: ry, x2: rx, y2: k * ry, x: rx, y: 0 },
+    { type: "C", x1: rx, y1: -k * ry, x2: k * rx, y2: -ry, x: 0, y: -ry },
+    { type: "C", x1: -k * rx, y1: -ry, x2: -rx, y2: -k * ry, x: -rx, y: 0 },
+    { type: "C", x1: -rx, y1: k * ry, x2: -k * rx, y2: ry, x: 0, y: ry },
+    { type: "Z" },
+  ]
+}
+
+function sample(steps: number, at: (t: number) => [number, number]): [number, number][] {
+  const points: [number, number][] = []
+  for (let i = 0; i <= steps; i++) points.push(at(i / steps))
+  return points
+}
+
+function open(points: [number, number][]): PathCommand[] {
+  return points.map(([x, y], i) => (i === 0 ? { type: "M", x, y } : { type: "L", x, y }))
+}
+
+function closed(points: [number, number][]): PathCommand[] {
+  return [...open(points), { type: "Z" }]
+}