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

package/lottie/lottie.paths.js

@@ -0,0 +1,474 @@
+/**
+ * Geometry: Lottie's shapes as cubic bezier paths, the affine maths that
+ * moves them between spaces, and trimming by length.
+ *
+ * A path keeps absolute control points, so a transform maps it exactly:
+ * `cOut[k]` follows point k, `cIn[k]` leads into it. Rectangles, ellipses and
+ * stars start and wind as lottie-web builds them, since a trim depends on both.
+ */
+
+/** Bezier control distance for a quarter circle */
+const KAPPA = 0.5519
+
+/**
+ * @typedef {{ x: number, y: number }} Point
+ * @typedef {{ closed: boolean, points: Point[], cIn: Point[], cOut: Point[] }} Path
+ * @typedef {number[]} Matrix  `[a, b, c, d, e, f]`, as canvas setTransform takes it
+ */
+
+export const IDENTITY = [ 1, 0, 0, 1, 0, 0 ]
+
+/**
+ * `left × right`: right applies first.
+ *
+ * @param   {Matrix} left
+ * @param   {Matrix} right
+ * @returns {Matrix}
+ */
+export function multiply(left, right) {
+  return [
+    left[0] * right[0] + left[2] * right[1],
+    left[1] * right[0] + left[3] * right[1],
+    left[0] * right[2] + left[2] * right[3],
+    left[1] * right[2] + left[3] * right[3],
+    left[0] * right[4] + left[2] * right[5] + left[4],
+    left[1] * right[4] + left[3] * right[5] + left[5],
+  ]
+}
+
+/**
+ * @param   {Matrix} m
+ * @param   {number} x
+ * @param   {number} y
+ * @returns {Point}
+ */
+export function apply(m, x, y) {
+  return { x: m[0] * x + m[2] * y + m[4], y: m[1] * x + m[3] * y + m[5] }
+}
+
+/**
+ * A Lottie transform's matrix: anchor, scale, skew, rotation, then position,
+ * in lottie-web's order.
+ *
+ * @param   {number[]} anchor
+ * @param   {number[]} position
+ * @param   {number[]} scale    percent
+ * @param   {number}   rotation degrees, clockwise
+ * @param   {number}   skew     degrees
+ * @param   {number}   skewAxis degrees
+ * @returns {Matrix}
+ */
+export function transformMatrix(anchor, position, scale, rotation, skew, skewAxis) {
+  let m = [ 1, 0, 0, 1, -anchor[0], -anchor[1] ]
+  m = multiply([ scale[0] / 100, 0, 0, scale[1] / 100, 0, 0 ], m)
+  if (skew) {
+    const axis = (skewAxis * Math.PI) / 180
+    const shear = Math.tan((-skew * Math.PI) / 180)
+    const cos = Math.cos(axis)
+    const sin = Math.sin(axis)
+    m = multiply([ cos, -sin, sin, cos, 0, 0 ], m)
+    m = multiply([ 1, 0, shear, 1, 0, 0 ], m)
+    m = multiply([ cos, sin, -sin, cos, 0, 0 ], m)
+  }
+  if (rotation) {
+    const angle = (rotation * Math.PI) / 180
+    m = multiply([ Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), 0, 0 ], m)
+  }
+  return multiply([ 1, 0, 0, 1, position[0], position[1] ], m)
+}
+
+/**
+ * @param   {Path}   path
+ * @param   {Matrix} m
+ * @returns {Path}
+ */
+export function transformPath(path, m) {
+  const map = (/** @type {Point[]} */ list) => list.map((p) => apply(m, p.x, p.y))
+  return { closed: path.closed, points: map(path.points), cIn: map(path.cIn), cOut: map(path.cOut) }
+}
+
+/**
+ * Traces a path onto the context's current path.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Path}                     path
+ */
+export function trace(ctx, path) {
+  const { points, cIn, cOut } = path
+  if (!points.length) return
+
+  ctx.moveTo(points[0].x, points[0].y)
+  for (let k = 1; k < points.length; k++) segment(ctx, points[k - 1], cOut[k - 1], cIn[k], points[k])
+  if (path.closed) {
+    const last = points.length - 1
+    segment(ctx, points[last], cOut[last], cIn[0], points[0])
+    ctx.closePath()
+  }
+}
+
+/**
+ * One segment: a line where both handles sit on their points, as most of a
+ * Lottie's do, else the cubic. A line is far cheaper for the canvas to fill
+ * and stroke than a curve, and draws the same.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Point}                    from
+ * @param {Point}                    out  from's out handle
+ * @param {Point}                    into to's in handle
+ * @param {Point}                    to
+ */
+function segment(ctx, from, out, into, to) {
+  const isStraight = out.x === from.x && out.y === from.y && into.x === to.x && into.y === to.y
+  if (isStraight) ctx.lineTo(to.x, to.y)
+  else ctx.bezierCurveTo(out.x, out.y, into.x, into.y, to.x, to.y)
+}
+
+// Shapes
+// ■■■■■■
+
+/**
+ * Lottie's own `{ v, i, o, c }`, tangents relative to their vertex.
+ *
+ * @param   {any}  shape
+ * @returns {Path}
+ */
+export function fromLottie(shape) {
+  const points = []
+  const cIn = []
+  const cOut = []
+  const vertices = shape.v || []
+  for (let k = 0; k < vertices.length; k++) {
+    const v = vertices[k]
+    const i = (shape.i && shape.i[k]) || [ 0, 0 ]
+    const o = (shape.o && shape.o[k]) || [ 0, 0 ]
+    points.push({ x: v[0], y: v[1] })
+    cIn.push({ x: v[0] + i[0], y: v[1] + i[1] })
+    cOut.push({ x: v[0] + o[0], y: v[1] + o[1] })
+  }
+  return { closed: !!shape.c, points, cIn, cOut }
+}
+
+/**
+ * A rectangle centred on `position`, its corners rounded by `roundness`.
+ * Winds clockwise from the top right, or the other way when `reversed`.
+ *
+ * @param   {number[]} position
+ * @param   {number[]} size
+ * @param   {number}   roundness
+ * @param   {boolean}  reversed
+ * @returns {Path}
+ */
+export function rectangle(position, size, roundness, reversed) {
+  const w = size[0] / 2
+  const h = size[1] / 2
+  const r = Math.min(roundness || 0, w, h)
+  const [ x, y ] = position
+  const c = r * (1 - KAPPA)
+
+  /** @type {[number, number, number, number, number, number][]} point, then in and out control offsets */
+  const corners = r
+    ? [
+      [ x + w, y - h + r, 0, -r + c, 0, 0 ],
+      [ x + w, y + h - r, 0, 0, 0, r - c ],
+      [ x + w - r, y + h, r - c, 0, 0, 0 ],
+      [ x - w + r, y + h, 0, 0, -(r - c), 0 ],
+      [ x - w, y + h - r, 0, r - c, 0, 0 ],
+      [ x - w, y - h + r, 0, 0, 0, -(r - c) ],
+      [ x - w + r, y - h, -(r - c), 0, 0, 0 ],
+      [ x + w - r, y - h, 0, 0, r - c, 0 ],
+    ]
+    : [ [ x + w, y - h, 0, 0, 0, 0 ], [ x + w, y + h, 0, 0, 0, 0 ], [ x - w, y + h, 0, 0, 0, 0 ], [ x - w, y - h, 0, 0, 0, 0 ] ]
+
+  const ordered = reversed ? reverseCorners(corners) : corners
+  return {
+    closed: true,
+    points: ordered.map((p) => ({ x: p[0], y: p[1] })),
+    cIn: ordered.map((p) => ({ x: p[0] + p[2], y: p[1] + p[3] })),
+    cOut: ordered.map((p) => ({ x: p[0] + p[4], y: p[1] + p[5] })),
+  }
+}
+
+/**
+ * The same corners the other way round: each point's in and out swap.
+ *
+ * @param {[number, number, number, number, number, number][]} corners
+ */
+function reverseCorners(corners) {
+  const reversed = []
+  for (let k = corners.length - 1; k >= 0; k--) {
+    const p = corners[k]
+    reversed.push(/** @type {[number, number, number, number, number, number]} */ ([ p[0], p[1], p[4], p[5], p[2], p[3] ]))
+  }
+  return reversed
+}
+
+/**
+ * An ellipse centred on `position`, from its top, clockwise unless `reversed`.
+ *
+ * @param   {number[]} position
+ * @param   {number[]} size
+ * @param   {boolean}  reversed
+ * @returns {Path}
+ */
+export function ellipse(position, size, reversed) {
+  const [ x, y ] = position
+  const rx = size[0] / 2
+  const ry = size[1] / 2
+  const kx = rx * KAPPA
+  const ky = ry * KAPPA
+  const direction = reversed ? -1 : 1
+
+  const points = [ { x, y: y - ry }, { x: x + direction * rx, y }, { x, y: y + ry }, { x: x - direction * rx, y } ]
+  const cIn = [ { x: x - direction * kx, y: y - ry }, { x: x + direction * rx, y: y - ky }, { x: x + direction * kx, y: y + ry }, { x: x - direction * rx, y: y + ky } ]
+  const cOut = [ { x: x + direction * kx, y: y - ry }, { x: x + direction * rx, y: y + ky }, { x: x - direction * kx, y: y + ry }, { x: x - direction * rx, y: y - ky } ]
+  return { closed: true, points, cIn, cOut }
+}
+
+/**
+ * A star (`sy` 1) or polygon (`sy` 2), as lottie-web builds them.
+ *
+ * @param   {{ type: number, points: number, position: number[], rotation: number, outer: number, inner: number, outerRound: number, innerRound: number, reversed: boolean }} star
+ * @returns {Path}
+ */
+export function star(star) {
+  const isStar = star.type === 1
+  const count = Math.floor(star.points) * (isStar ? 2 : 1)
+  const angleStep = (2 * Math.PI) / count
+  const direction = star.reversed ? -1 : 1
+  let angle = (star.rotation * Math.PI) / 180 - Math.PI / 2
+
+  const points = []
+  const cIn = []
+  const cOut = []
+  for (let k = 0; k < count; k++) {
+    const isOuter = !isStar || k % 2 === 0
+    const radius = isOuter ? star.outer : star.inner
+    const round = (isOuter ? star.outerRound : star.innerRound) / 100
+    const perimeter = (2 * Math.PI * radius) / (count * 2)
+    const x = star.position[0] + radius * Math.cos(angle)
+    const y = star.position[1] + radius * Math.sin(angle)
+    const tx = -Math.sin(angle) * perimeter * round * direction
+    const ty = Math.cos(angle) * perimeter * round * direction
+    points.push({ x, y })
+    cIn.push({ x: x - tx, y: y - ty })
+    cOut.push({ x: x + tx, y: y + ty })
+    angle += angleStep * direction
+  }
+  return { closed: true, points, cIn, cOut }
+}
+
+// Trimming
+// ■■■■■■■■
+
+/**
+ * The segments of a path, each as its four bezier points.
+ *
+ * @param   {Path}      path
+ * @returns {Point[][]}
+ */
+function segments(path) {
+  const list = []
+  const { points, cIn, cOut } = path
+  for (let k = 1; k < points.length; k++) list.push([ points[k - 1], cOut[k - 1], cIn[k], points[k] ])
+  if (path.closed && points.length > 1) {
+    const last = points.length - 1
+    list.push([ points[last], cOut[last], cIn[0], points[0] ])
+  }
+  return list
+}
+
+/**
+ * @param {Point[]} s four bezier points
+ * @param {number}  t
+ */
+function pointAt(s, t) {
+  const u = 1 - t
+  return {
+    x: u * u * u * s[0].x + 3 * u * u * t * s[1].x + 3 * u * t * t * s[2].x + t * t * t * s[3].x,
+    y: u * u * u * s[0].y + 3 * u * u * t * s[1].y + 3 * u * t * t * s[2].y + t * t * t * s[3].y,
+  }
+}
+
+/** Samples per segment when measuring length */
+const STEPS = 24
+
+/**
+ * @param   {Point[]}  s
+ * @returns {number[]}   cumulative length at each of STEPS + 1 samples
+ */
+function lengths(s) {
+  const table = [ 0 ]
+  let previous = s[0]
+  for (let n = 1; n <= STEPS; n++) {
+    const point = pointAt(s, n / STEPS)
+    const dx = point.x - previous.x
+    const dy = point.y - previous.y
+    table.push(table[n - 1] + Math.sqrt(dx * dx + dy * dy))
+    previous = point
+  }
+  return table
+}
+
+/**
+ * The bezier parameter at a distance along a segment.
+ *
+ * @param {number[]} table    from lengths()
+ * @param {number}   distance
+ */
+function parameterAt(table, distance) {
+  const total = table[table.length - 1]
+  if (distance <= 0 || total === 0) return 0
+  if (distance >= total) return 1
+
+  for (let n = 1; n < table.length; n++) {
+    if (table[n] >= distance) {
+      const span = table[n] - table[n - 1]
+      const within = span > 0 ? (distance - table[n - 1]) / span : 0
+      return (n - 1 + within) / STEPS
+    }
+  }
+  return 1
+}
+
+/**
+ * The part of a segment between two parameters, by de Casteljau.
+ *
+ * @param   {Point[]} s
+ * @param   {number}  t0
+ * @param   {number}  t1
+ * @returns {Point[]}
+ */
+function subSegment(s, t0, t1) {
+  const split = (/** @type {Point[]} */ q, /** @type {number} */ t) => {
+    const mix = (/** @type {Point} */ a, /** @type {Point} */ b) => ({ x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t })
+    const ab = mix(q[0], q[1])
+    const bc = mix(q[1], q[2])
+    const cd = mix(q[2], q[3])
+    const abc = mix(ab, bc)
+    const bcd = mix(bc, cd)
+    const mid = mix(abc, bcd)
+    return { before: [ q[0], ab, abc, mid ], after: [ mid, bcd, cd, q[3] ] }
+  }
+  const tail = split(s, t0).after
+  const span = t0 < 1 ? (t1 - t0) / (1 - t0) : 0
+  return split(tail, Math.min(1, Math.max(0, span))).before
+}
+
+/**
+ * The stretch of a path between two distances along it, as an open path.
+ *
+ * @param   {Point[][]}   list   the path's segments
+ * @param   {number[][]}  tables each segment's lengths()
+ * @param   {number}      from
+ * @param   {number}      to
+ * @returns {Path | null}
+ */
+function between(list, tables, from, to) {
+  /** @type {Path} */
+  const path = { closed: false, points: [], cIn: [], cOut: [] }
+  let offset = 0
+  for (let n = 0; n < list.length; n++) {
+    const length = tables[n][tables[n].length - 1]
+    const start = Math.max(from, offset)
+    const end = Math.min(to, offset + length)
+    if (end > start || (length === 0 && start === offset && start <= to && start >= from)) {
+      const piece = subSegment(list[n], parameterAt(tables[n], start - offset), parameterAt(tables[n], end - offset))
+      if (!path.points.length) {
+        path.points.push(piece[0])
+        path.cIn.push(piece[0])
+      }
+      path.cOut[path.points.length - 1] = piece[1]
+      path.points.push(piece[3])
+      path.cIn.push(piece[2])
+      path.cOut.push(piece[3])
+    }
+    offset += length
+  }
+  return path.points.length > 1 ? path : null
+}
+
+/**
+ * Trim Paths: the part of each path between `start` and `end`, percent of its
+ * length, shifted by `offset` degrees (360 is the whole length). `together`
+ * (`m` 2) treats every path as one, in order; otherwise each is trimmed alone.
+ *
+ * @param   {Path[]}   paths
+ * @param   {number}   start
+ * @param   {number}   end
+ * @param   {number}   offset
+ * @param   {boolean}  together
+ * @returns {Path[][]}          what each path keeps, in the same order
+ */
+export function trimEach(paths, start, end, offset, together) {
+  let s = Math.min(start, end) / 100
+  let e = Math.max(start, end) / 100
+  if (e - s >= 1) return paths.map((path) => [ path ])
+  if (e === s) return paths.map(() => [])
+
+  const shift = (offset % 360) / 360
+  s += shift
+  e += shift
+  // the range may run past the end and wrap round to the start
+  const ranges = s >= 1 || s < 0 ? wrapRanges(s, e) : e > 1 ? [ [ s, 1 ], [ 0, e - 1 ] ] : [ [ s, e ] ]
+
+  const measured = paths.map((path) => {
+    const list = segments(path)
+    const tables = list.map(lengths)
+    let total = 0
+    for (let n = 0; n < tables.length; n++) total += tables[n][tables[n].length - 1]
+    return { list, tables, total }
+  })
+
+  let combined = 0
+  for (let n = 0; n < measured.length; n++) combined += measured[n].total
+
+  const kept = []
+  let before = 0
+  for (let n = 0; n < measured.length; n++) {
+    const m = measured[n]
+    // alone, a path's range is its own length; together, a share of the combined one
+    const scale = together ? combined : m.total
+    const origin = together ? before : 0
+    const pieces = []
+    for (let r = 0; r < ranges.length; r++) {
+      const from = ranges[r][0] * scale - origin
+      const to = ranges[r][1] * scale - origin
+      if (to <= 0 || from >= m.total) continue
+      const piece = between(m.list, m.tables, Math.max(0, from), Math.min(m.total, to))
+      if (piece) pieces.push(piece)
+    }
+    kept.push(pieces)
+    before += m.total
+  }
+  return kept
+}
+
+/**
+ * The same trim, every path's pieces in one list.
+ *
+ * @param   {Path[]}  paths
+ * @param   {number}  start
+ * @param   {number}  end
+ * @param   {number}  offset
+ * @param   {boolean} together
+ * @returns {Path[]}
+ */
+export function trim(paths, start, end, offset, together) {
+  const kept = trimEach(paths, start, end, offset, together)
+  const flat = []
+  for (let n = 0; n < kept.length; n++) for (let k = 0; k < kept[n].length; k++) flat.push(kept[n][k])
+  return flat
+}
+
+/**
+ * A range shifted wholly outside 0-1, folded back into it.
+ *
+ * @param {number} s
+ * @param {number} e
+ */
+function wrapRanges(s, e) {
+  const shift = Math.floor(s)
+  const a = s - shift
+  const b = e - shift
+  return b > 1 ? [ [ a, 1 ], [ 0, b - 1 ] ] : [ [ a, b ] ]
+}