@px-petals/roku.motion-web 0.0.0-stage → 1.0.0

package/lottie/lottie.shapes.js

@@ -0,0 +1,258 @@
+/**
+ * A shape layer's items, compiled once and run per frame into draw
+ * operations.
+ *
+ * Lottie's rules, in a group's item list:
+ * - earlier items are on top, so operations draw in reverse;
+ * - a paint covers every path above it in its group, and in groups above it;
+ * - a modifier (trim, merge) changes those same paths, so a subgroup's own
+ * paint draws them trimmed too.
+ *
+ * Geometry therefore lives in a shared holder: a trim rewrites the holder's
+ * paths, and every paint that captured it draws the result.
+ */
+
+import { evaluator } from './lottie.props.js'
+import { ellipse, fromLottie, IDENTITY, multiply, rectangle, star, transformMatrix, trimEach } from './lottie.paths.js'
+
+/** @import { Path, Matrix } from './lottie.paths.js' */
+/** @import { Slots } from './lottie.props.js' */
+
+/**
+ * Geometry gathered from items above a paint or modifier.
+ * @typedef {{ paths: Path[], merge?: { mode: number, parts: Entry[] } }} Holder
+ * @typedef {{ holder: Holder, matrix: Matrix }} Entry  `matrix` maps the holder's space into the gathering group's
+ * @typedef {{ paint: any, entries: Entry[], matrix: Matrix, opacity: number }} Operation  `matrix` maps the paint's group into the layer
+ */
+
+/**
+ * @param   {any[]} items a shape layer's `shapes`, or a group's `it`
+ * @param   {Slots} slots
+ * @returns {any[]}       compiled items
+ */
+export function compileItems(items, slots) {
+  const compiled = []
+  for (let n = 0; n < (items || []).length; n++) {
+    const item = items[n]
+    if (item.hd) continue
+    const one = compileItem(item, slots)
+    if (one) compiled.push(one)
+  }
+  return compiled
+}
+
+/**
+ * @param {any}   item
+ * @param {Slots} slots
+ */
+function compileItem(item, slots) {
+  const at = (/** @type {any} */ property, /** @type {any} */ fallback) => evaluator(property, slots, fallback)
+  const reversed = item.d === 3
+
+  switch (item.ty) {
+    case 'gr':
+      return { kind: 'group', rid: typeof item.rid === 'string' ? item.rid : '', items: compileItems(item.it, slots), transform: compileTransform((item.it || []).filter((/** @type {any} */ i) => i.ty === 'tr')[0], slots) }
+    case 'sh': {
+      const shape = at(item.ks, { v: [], i: [], o: [], c: false })
+      return { kind: 'geometry', path: (/** @type {number} */ f) => fromLottie(unwrap(shape(f))) }
+    }
+    case 'rc': {
+      const p = at(item.p, [ 0, 0 ])
+      const s = at(item.s, [ 0, 0 ])
+      const r = at(item.r, 0)
+      return { kind: 'geometry', path: (/** @type {number} */ f) => rectangle(p(f), s(f), scalar(r(f)), reversed) }
+    }
+    case 'el': {
+      const p = at(item.p, [ 0, 0 ])
+      const s = at(item.s, [ 0, 0 ])
+      return { kind: 'geometry', path: (/** @type {number} */ f) => ellipse(p(f), s(f), reversed) }
+    }
+    case 'sr': {
+      const p = at(item.p, [ 0, 0 ])
+      const pt = at(item.pt, 5)
+      const r = at(item.r, 0)
+      const or = at(item.or, 0)
+      const ir = at(item.ir, 0)
+      const os = at(item.os, 0)
+      const is = at(item.is, 0)
+      return {
+        kind: 'geometry',
+        path: (/** @type {number} */ f) => star({ type: item.sy, points: scalar(pt(f)), position: p(f), rotation: scalar(r(f)), outer: scalar(or(f)), inner: scalar(ir(f)), outerRound: scalar(os(f)), innerRound: scalar(is(f)), reversed }),
+      }
+    }
+    case 'tm':
+      return { kind: 'trim', start: at(item.s, 0), end: at(item.e, 100), offset: at(item.o, 0), together: item.m === 2 }
+    case 'mm':
+      return { kind: 'merge', mode: item.mm || 1 }
+    case 'fl':
+    case 'st':
+    case 'gf':
+    case 'gs':
+      return { kind: 'paint', paint: compilePaint(item, slots) }
+    default:
+      // `tr` is read by its group; repeaters, round corners and the rest are not drawn
+      return null
+  }
+}
+
+/**
+ * A shape keyframe value arrives wrapped in a one-element array.
+ *
+ * @param {any} value
+ */
+function unwrap(value) {
+  return Array.isArray(value) ? value[0] || { v: [] } : value
+}
+
+/** @param {any} value */
+export function scalar(value) {
+  return Array.isArray(value) ? value[0] : value
+}
+
+/**
+ * @param   {any}                                                    tr
+ * @param   {Slots}                                                  slots
+ * @returns {(frame: number) => { matrix: Matrix, opacity: number }}
+ */
+export function compileTransform(tr, slots) {
+  if (!tr) return () => ({ matrix: IDENTITY, opacity: 1 })
+
+  const at = (/** @type {any} */ property, /** @type {any} */ fallback) => evaluator(property, slots, fallback)
+  const a = at(tr.a, [ 0, 0 ])
+  const p = splitPosition(tr.p, slots)
+  const s = at(tr.s, [ 100, 100 ])
+  const r = at(tr.r || tr.rz, 0)
+  const o = at(tr.o, 100)
+  const sk = at(tr.sk, 0)
+  const sa = at(tr.sa, 0)
+  return (frame) => ({
+    matrix: transformMatrix(a(frame), p(frame), s(frame), scalar(r(frame)), scalar(sk(frame)), scalar(sa(frame))),
+    opacity: scalar(o(frame)) / 100,
+  })
+}
+
+/**
+ * A position, given whole or as separate `x` and `y` (`s: true`).
+ *
+ * @param {any}   position
+ * @param {Slots} slots
+ */
+function splitPosition(position, slots) {
+  if (position && position.s) {
+    const x = evaluator(position.x, slots, 0)
+    const y = evaluator(position.y, slots, 0)
+    return (/** @type {number} */ frame) => [ scalar(x(frame)), scalar(y(frame)) ]
+  }
+  return evaluator(position, slots, [ 0, 0 ])
+}
+
+/**
+ * @param {any}   item
+ * @param {Slots} slots
+ */
+function compilePaint(item, slots) {
+  const at = (/** @type {any} */ property, /** @type {any} */ fallback) => evaluator(property, slots, fallback)
+  const isStroke = item.ty === 'st' || item.ty === 'gs'
+  const isGradient = item.ty === 'gf' || item.ty === 'gs'
+  return {
+    isStroke,
+    isGradient,
+    rule: item.r === 2 ? 'evenodd' : 'nonzero',
+    opacity: at(item.o, 100),
+    color: at(item.c, [ 0, 0, 0, 1 ]),
+    width: at(item.w, 1),
+    cap: [ 'butt', 'butt', 'round', 'square' ][item.lc || 1],
+    join: [ 'miter', 'miter', 'round', 'bevel' ][item.lj || 1],
+    miter: item.ml || 4,
+    dashes: (item.d || []).map((/** @type {any} */ d) => ({ kind: d.n, value: at(d.v, 0) })),
+    gradient: isGradient
+      ? { type: item.t || 1, start: at(item.s, [ 0, 0 ]), end: at(item.e, [ 0, 0 ]), stops: at(item.g && item.g.k, []), count: (item.g && item.g.p) || 0, highlight: at(item.h, 0), angle: at(item.a, 0) }
+      : null,
+  }
+}
+
+// Running
+// ■■■■■■■
+
+/**
+ * Where a frame's hit-test geometry goes: groups tagged with a watched `rid` hand over their paths.
+ * @typedef {object} HitSink
+ * @property {import('../hit/hit.js').Hits} hits
+ * @property {Matrix}                       matrix the layer's space onto the canvas
+ * @property {string}                       prefix what a group's `rid` is named under: a nested machine's artboard has its own, so it is `<the layer's nid>/`; "" in the animation's own
+ */
+
+/**
+ * Runs a group's items at a frame.
+ *
+ * @param   {any[]}                                         items   compiled items
+ * @param   {number}                                        frame
+ * @param   {Matrix}                                        matrix  the group's space into the layer's
+ * @param   {number}                                        opacity the group's opacity, compounded
+ * @param   {HitSink | null}                                [sink]  records the paths of groups a pointer listener targets
+ * @returns {{ entries: Entry[], operations: Operation[] }}         the paths above, for the parent's paints, and what to draw, top first
+ */
+export function runGroup(items, frame, matrix, opacity, sink) {
+  /** @type {Entry[]} */
+  let entries = []
+  /** @type {Operation[]} */
+  const operations = []
+
+  for (let n = 0; n < items.length; n++) {
+    const item = items[n]
+    if (item.kind === 'geometry') {
+      entries.push({ holder: { paths: [ item.path(frame) ] }, matrix: IDENTITY })
+    } else if (item.kind === 'group') {
+      const local = item.transform(frame)
+      const inner = runGroup(item.items, frame, multiply(matrix, local.matrix), opacity * local.opacity, sink)
+      if (sink && item.rid) {
+        const rid = sink.prefix + item.rid
+        if (sink.hits.wants(rid)) sink.hits.add(rid, inner.entries, multiply(sink.matrix, multiply(matrix, local.matrix)))
+      }
+      for (let k = 0; k < inner.operations.length; k++) operations.push(inner.operations[k])
+      for (let k = 0; k < inner.entries.length; k++) entries.push({ holder: inner.entries[k].holder, matrix: multiply(local.matrix, inner.entries[k].matrix) })
+    } else if (item.kind === 'trim') {
+      trimEntries(entries, scalar(item.start(frame)), scalar(item.end(frame)), scalar(item.offset(frame)), item.together)
+    } else if (item.kind === 'merge') {
+      entries = entries.length > 1 ? [ { holder: { paths: [], merge: { mode: item.mode, parts: entries } }, matrix: IDENTITY } ] : entries
+    } else if (item.kind === 'paint') {
+      operations.push({ paint: item.paint, entries: entries.slice(), matrix, opacity })
+    }
+  }
+  return { entries, operations }
+}
+
+/**
+ * Trims every holder above, in its own space. Together, the holders' paths
+ * are trimmed as one list and each holder keeps its own share.
+ *
+ * @param {Entry[]} entries
+ * @param {number}  start
+ * @param {number}  end
+ * @param {number}  offset
+ * @param {boolean} together
+ */
+function trimEntries(entries, start, end, offset, together) {
+  /** @type {Holder[]} */
+  const holders = []
+  for (let n = 0; n < entries.length; n++) {
+    const holder = entries[n].holder
+    if (!holder.merge) holders.push(holder)
+    else for (let k = 0; k < holder.merge.parts.length; k++) holders.push(holder.merge.parts[k].holder)
+  }
+
+  const all = []
+  const owners = []
+  for (let n = 0; n < holders.length; n++) {
+    for (let k = 0; k < holders[n].paths.length; k++) {
+      all.push(holders[n].paths[k])
+      owners.push(n)
+    }
+  }
+
+  const kept = trimEach(all, start, end, offset, together)
+  for (let n = 0; n < holders.length; n++) holders[n].paths = []
+  for (let k = 0; k < kept.length; k++) {
+    for (let j = 0; j < kept[k].length; j++) holders[owners[k]].paths.push(kept[k][j])
+  }
+}

package/mixer/mixer.js

@@ -0,0 +1,284 @@
+/**
+ * The pose mixer: draws several animations of one artboard at once, each at
+ * its own time and weight, as one picture.
+ *
+ * rive2lottie writes every animation of an artboard as a Lottie with the
+ * same layers and shapes, and tags each property with `rid`, the Rive object
+ * and property it came from, and `ky` when that animation keys it. The mixer
+ * takes one of them (the longest) as the picture's structure, and gives each
+ * keyed property a mixing evaluator in place of its keyframes. For a set of
+ * poses, `{ animation, time, weight }`, that evaluator reads the property in
+ * each pose's animation at the pose's time and blends the values in order,
+ * as Rive applies animations: each lerps the value so far toward its own by
+ * its weight. A pose whose animation doesn't key the property leaves it
+ * alone. The value so far starts from what the property held after the
+ * previous frame, as Rive's artboard keeps what it last applied: a property
+ * no active animation keys stays where it was, and a blend whose weights
+ * don't add up to one settles over a few frames. A pair of axes (position)
+ * keyed on one axis only is mixed on that axis only. What isn't tagged (a nested artboard's own animation) follows the
+ * first pose's time; text overlays are mixed by the player (`mixOverlays`).
+ */
+
+import { createAnimation } from '../lottie/lottie.js'
+import { evaluator } from '../lottie/lottie.props.js'
+import { mixValues } from './mixer.mix.js'
+
+/** @import { Animation } from '../lottie/lottie.js' */
+/** @import { Evaluator } from '../lottie/lottie.props.js' */
+/** @import { Matrix } from '../lottie/lottie.paths.js' */
+
+/**
+ * One animation shown at a time, with a weight.
+ * @typedef {object} Pose
+ * @property {string} animation an animation id
+ * @property {number} time      seconds into it
+ * @property {number} weight    0 to 1
+ */
+
+/** What an animation does to one property: its value at a frame, whether it keys the property, and, for a pair of axes with one keyed, which */
+/** @typedef {{ at: Evaluator, keyed: boolean, axes: number[] | null }} Source */
+
+/** A pose, prepared for the evaluators: where its animation's sources are, and how far its frame is from the drawn one */
+/** @typedef {{ sources: Record<string, Source>, offset: number, weight: number }} Prepared */
+
+/**
+ * What the mixing evaluators share: the poses of the draw, and each property's value after the previous frame.
+ * @typedef {object} Current
+ * @property {Prepared[]}          poses
+ * @property {Record<string, any>} last   by `rid`, what each held after the previous frame
+ * @property {Record<string, any>} next   by `rid`, what each holds in this one
+ * @property {number}              frame  the frame `next` belongs to
+ * @property {number}              passes how many times a draw applies the poses
+ */
+
+/** No slots: a source reads its keyframes, and the drawn animation's own slots go over the result */
+const NO_SLOTS = {}
+
+/**
+ * @typedef {object} Mixer
+ * @property {Animation}                                                                                               animation the mixed picture; its `slots` are live
+ * @property {string}                                                                                                  carrier   the animation whose structure it has
+ * @property {(ctx: CanvasRenderingContext2D, poses: Pose[], matrix: Matrix, frame?: number, passes?: number) => void} draw      `frame` counts the stage's steps: drawing the same frame again leaves each property where it was; `passes` applies the poses that many times, for a stage that has stopped but must settle
+ */
+
+/**
+ * @param   {Record<string, any>}          lotties            parsed Lottie JSON by animation id; the longest is changed in place
+ * @param   {object}                       [options]
+ * @param   {string}                       [options.base]     where images resolve from
+ * @param   {() => Record<string, string>} [options.families] the bundle's fonts by name, as registered
+ * @returns {Mixer}
+ */
+export function createMixer(lotties, options) {
+  const carrier = longest(lotties)
+  /** @type {Record<string, Record<string, Source>>} */
+  const sources = {}
+  for (const id in lotties) sources[id] = collect(lotties[id])
+
+  /** @type {Current} */
+  const current = { poses: [], last: {}, next: {}, frame: -1, passes: 1 }
+  install(lotties[carrier], sources, carrier, current)
+  const animation = createAnimation(lotties[carrier], options)
+
+  return {
+    animation,
+    carrier,
+    draw(ctx, poses, matrix, frame, passes) {
+      current.passes = passes || 1
+      // a new frame: what the last one left is where this one starts
+      if (frame === undefined || frame !== current.frame) {
+        for (const rid in current.next) current.last[rid] = current.next[rid]
+        current.next = {}
+        current.frame = frame === undefined ? -1 : frame
+      }
+      animation.draw(ctx, prepare(lotties, sources, poses, current, carrier), matrix)
+    },
+  }
+}
+
+/**
+ * The animation with the longest timeline, in seconds: any pose's time fits it.
+ *
+ * @param   {Record<string, any>} lotties
+ * @returns {string}
+ */
+function longest(lotties) {
+  let best = ''
+  let bestSeconds = -1
+  for (const id in lotties) {
+    const lottie = lotties[id]
+    const seconds = ((lottie.op || 0) - (lottie.ip || 0)) / (lottie.fr || 30)
+    if (seconds > bestSeconds) {
+      best = id
+      bestSeconds = seconds
+    }
+  }
+  return best
+}
+
+/**
+ * Every tagged property of a Lottie, by its `rid`; the first of a repeated one wins.
+ *
+ * @param   {any}                    lottie
+ * @returns {Record<string, Source>}
+ */
+function collect(lottie) {
+  /** @type {Record<string, Source>} */
+  const found = {}
+  visit(lottie, (property) => {
+    if (found[property.rid]) return
+    found[property.rid] = { at: evaluator(property, NO_SLOTS), keyed: property.ky === 1, axes: Array.isArray(property.kc) ? property.kc : null }
+  })
+  return found
+}
+
+/**
+ * Calls back for every tagged property under a node, in assets as in layers.
+ *
+ * @param {any}                     node
+ * @param {(property: any) => void} found
+ */
+function visit(node, found) {
+  if (node === null || typeof node !== 'object') return
+  if (Array.isArray(node)) {
+    for (let n = 0; n < node.length; n++) visit(node[n], found)
+    return
+  }
+  if (typeof node.rid === 'string' && 'k' in node) found(node)
+  for (const key in node) {
+    if (key === 'k' || key === 'rid') continue
+    visit(node[key], found)
+  }
+}
+
+/**
+ * Gives the carrier's keyed properties their mixing evaluators.
+ *
+ * @param {any}                                    lottie
+ * @param {Record<string, Record<string, Source>>} sources
+ * @param {string}                                 carrier
+ * @param {Current}                                current
+ */
+function install(lottie, sources, carrier, current) {
+  /** @type {Record<string, any>} */
+  const bases = {}
+  /** @type {Record<string, boolean>} */
+  const isKeyed = {}
+  for (const id in sources) {
+    for (const rid in sources[id]) {
+      if (sources[id][rid].keyed) isKeyed[rid] = true
+    }
+  }
+  for (const rid in isKeyed) bases[rid] = baseOf(rid, sources, carrier, lottie)
+
+  visit(lottie, (property) => {
+    if (isKeyed[property.rid]) property.mx = mixing(property.rid, bases[property.rid], current)
+  })
+}
+
+/**
+ * A property's value with no animation on it: where one animation holds it
+ * still, that value; where all key it, the carrier's first. A pair of axes
+ * takes each axis from an animation that holds that axis still.
+ *
+ * @param   {string}                                 rid
+ * @param   {Record<string, Record<string, Source>>} sources
+ * @param   {string}                                 carrier
+ * @param   {any}                                    lottie
+ * @returns {any}
+ */
+function baseOf(rid, sources, carrier, lottie) {
+  for (const id in sources) {
+    const source = sources[id][rid]
+    if (source && !source.keyed) return source.at(0)
+  }
+  const first = sources[carrier][rid].at(lottie.ip || 0)
+  if (!Array.isArray(first)) return first
+
+  const result = first.slice()
+  for (let axis = 0; axis < result.length; axis++) {
+    for (const id in sources) {
+      const source = sources[id][rid]
+      if (!source || !source.axes || source.axes[axis]) continue
+      const still = source.at(0)
+      if (Array.isArray(still) && typeof still[axis] === 'number') result[axis] = still[axis]
+      break
+    }
+  }
+  return result
+}
+
+/**
+ * Mixes only the keyed axes of a vector.
+ *
+ * @param   {any}      a    the value so far
+ * @param   {any}      b    the value being mixed in
+ * @param   {number}   t    b's weight
+ * @param   {number[]} axes 1 for each axis b moves
+ * @returns {any}
+ */
+function mixAxes(a, b, t, axes) {
+  if (t <= 0 || !Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return mixValues(a, b, t)
+  const result = a.slice()
+  for (let n = 0; n < result.length; n++) {
+    if (axes[n] && typeof a[n] === 'number' && typeof b[n] === 'number') result[n] = a[n] + (b[n] - a[n]) * Math.min(1, t)
+  }
+  return result
+}
+
+/**
+ * @param   {string}    rid
+ * @param   {any}       base
+ * @param   {Current}   current
+ * @returns {Evaluator}
+ */
+function mixing(rid, base, current) {
+  return (frame) => {
+    const poses = current.poses
+    let value = rid in current.last ? current.last[rid] : base
+    for (let pass = 0; pass < current.passes; pass++) {
+      for (let n = 0; n < poses.length; n++) {
+        const pose = poses[n]
+        const source = pose.sources[rid]
+        if (!source || !source.keyed) continue
+
+        const sample = source.at(frame + pose.offset)
+        value = source.axes ? mixAxes(value, sample, pose.weight, source.axes) : mixValues(value, sample, pose.weight)
+      }
+    }
+    current.next[rid] = value
+    return value
+  }
+}
+
+/**
+ * Readies the poses for a draw.
+ *
+ * @param   {Record<string, any>}                    lotties
+ * @param   {Record<string, Record<string, Source>>} sources
+ * @param   {Pose[]}                                 poses
+ * @param   {Current}                                current
+ * @param   {string}                                 carrier
+ * @returns {number}                                         the carrier's frame to draw
+ */
+function prepare(lotties, sources, poses, current, carrier) {
+  const structure = lotties[carrier]
+  const first = structure.ip || 0
+  const last = (structure.op || 0) - 0.001
+  current.poses = []
+  let drawn = first
+  let isFirst = true
+  for (let n = 0; n < poses.length; n++) {
+    const pose = poses[n]
+    const lottie = lotties[pose.animation]
+    if (!lottie) continue
+
+    if (isFirst) {
+      // the first pose sets the frame that what isn't tagged follows
+      drawn = Math.min(Math.max(first + pose.time * (structure.fr || 30), first), last)
+      isFirst = false
+    }
+    const frame = (lottie.ip || 0) + pose.time * (lottie.fr || 30)
+    current.poses.push({ sources: sources[pose.animation], offset: frame - drawn, weight: pose.weight })
+  }
+  return drawn
+}

package/mixer/mixer.mix.js

@@ -0,0 +1,90 @@
+/**
+ * Mixing two values of one Lottie property: numbers and vectors (positions,
+ * scales, colours) blend component by component, and paths blend vertex by
+ * vertex when they have the same vertices. Anything else can't be blended,
+ * so the heavier of the two wins.
+ */
+
+/**
+ * @param   {any}    a the value so far
+ * @param   {any}    b the value being mixed in
+ * @param   {number} t b's weight, 0 to 1: 0 is all `a`, 1 is all `b`
+ * @returns {any}
+ */
+export function mixValues(a, b, t) {
+  if (t <= 0 || b === undefined) return a
+  if (t >= 1 || a === undefined) return b
+
+  if (typeof a === 'number' && typeof b === 'number') return a + (b - a) * t
+
+  // keyed values arrive as [v], static ones as v: a number and a one-element vector mix as a vector
+  const left = typeof a === 'number' ? [ a ] : a
+  const right = typeof b === 'number' ? [ b ] : b
+  if (isVector(left) && isVector(right) && left.length === right.length) return mixVectors(left, right, t)
+
+  const leftPath = pathOf(a)
+  const rightPath = pathOf(b)
+  if (leftPath && rightPath && sameVertices(leftPath, rightPath)) {
+    const mixed = mixPaths(leftPath, rightPath, t)
+    return Array.isArray(a) || Array.isArray(b) ? [ mixed ] : mixed
+  }
+
+  return t >= 0.5 ? b : a
+}
+
+/** @param {any} value */
+function isVector(value) {
+  if (!Array.isArray(value)) return false
+  for (let n = 0; n < value.length; n++) if (typeof value[n] !== 'number') return false
+  return true
+}
+
+/**
+ * @param {number[]} a
+ * @param {number[]} b
+ * @param {number}   t
+ */
+function mixVectors(a, b, t) {
+  const result = []
+  for (let n = 0; n < a.length; n++) result.push(a[n] + (b[n] - a[n]) * t)
+  return result
+}
+
+/**
+ * A path value is `{ c, v, i, o }`, or that in a one-element array.
+ *
+ * @param   {any} value
+ * @returns {any}       the path, or null
+ */
+function pathOf(value) {
+  const path = Array.isArray(value) ? value[0] : value
+  return path && typeof path === 'object' && Array.isArray(path.v) ? path : null
+}
+
+/**
+ * @param {any} a
+ * @param {any} b
+ */
+function sameVertices(a, b) {
+  return a.c === b.c && a.v.length === b.v.length && a.i.length === b.i.length && a.o.length === b.o.length
+}
+
+/**
+ * @param {any}    a
+ * @param {any}    b
+ * @param {number} t
+ */
+function mixPaths(a, b, t) {
+  return { c: a.c, v: mixPoints(a.v, b.v, t), i: mixPoints(a.i, b.i, t), o: mixPoints(a.o, b.o, t) }
+}
+
+/**
+ * @param {number[][]} a
+ * @param {number[][]} b
+ * @param {number}     t
+ */
+function mixPoints(a, b, t) {
+  const points = []
+  for (let n = 0; n < a.length; n++) points.push(mixVectors(a[n], b[n], t))
+  return points
+}