@omnimedia/omnitool 1.1.0-78 → 1.1.0-79

package/s/timeline/sugar/helpers.ts

@@ -2,14 +2,18 @@
 import {TextStyleOptions} from "pixi.js"
 
 import {O} from "./o.js"
-import {Transform} from "../types.js"
 import {Media} from "../parts/media.js"
 import {TimelineFile} from "../parts/basics.js"
 import {FilterAction} from "../parts/filters.js"
-import {Crop, FilterableItem, Item} from "../parts/item.js"
+import {visualAnimations} from "../parts/animations.js"
 import {filters, FilterParams, FilterType} from "../parts/filters.js"
+import {Crop, FilterableItem, Item, VisualAnimatableItem} from "../parts/item.js"
+import {Anim, AnimateAction, Interpolation, Keyframes, TrackTransform, Transform, Vec2, VisualAnimations} from "../types.js"
 
 export type Build<T extends Item.Any = Item.Any> = (o: O) => T
+type BuildVisualAnimateActions = {
+	[TKey in keyof VisualAnimations]-?: BuildAnimateAction
+}
 
 function createTimeline(): TimelineFile {
 	return {
@@ -75,11 +79,59 @@ export function spatial(transform?: Transform, crop?: Crop): Build<Item.Spatial>
 	return o => o.spatial(transform, crop)
 }
 
+export function animatedSpatial(anim: Anim<TrackTransform>, crop?: Crop): Build<Item.AnimatedSpatial> {
+	return o => o.animatedSpatial(anim, crop)
+}
+
+export const anim = {
+	scalar(terp: Interpolation, track: Keyframes): Anim<Keyframes> {
+		return {terp, track}
+	},
+
+	vec2(terp: Interpolation, source: Keyframes<Vec2>): Anim<{x: Keyframes, y: Keyframes}> {
+		const track = {x: [] as Keyframes, y: [] as Keyframes}
+
+		for (const [time, [x, y]] of source) {
+			track.x.push([time, x])
+			track.y.push([time, y])
+		}
+
+		return {terp, track}
+	},
+
+	transform(terp: Interpolation, source: Keyframes<Transform>): Anim<TrackTransform> {
+		const track: TrackTransform = {
+			position: {x: [], y: []},
+			scale: {x: [], y: []},
+			rotation: [],
+		}
+
+		for (const [time, [position, scale, rotation]] of source) {
+			track.position.x.push([time, position[0]])
+			track.position.y.push([time, position[1]])
+			track.scale.x.push([time, scale[0]])
+			track.scale.y.push([time, scale[1]])
+			track.rotation.push([time, rotation])
+		}
+
+		return {terp, track}
+	},
+}
+
 interface BuildFilterAction<TFilter extends FilterType> {
 	<T extends FilterableItem>(item: Build<T>, params?: FilterParams<TFilter>): Build<T>
 	make(params?: FilterParams<TFilter>): Build<Item.Filter<TFilter>>
 }
 
+interface BuildAnimateAction {
+	<T extends VisualAnimatableItem>(
+		item: Build<T>,
+		terp: Interpolation,
+		track: Keyframes
+	): Build<T>
+	make(terp: Interpolation, track: Keyframes): Build<Item.Animation>
+}
+
 type BuildFilterActions = {
 	[TName in keyof typeof filters]: BuildFilterAction<(typeof filters)[TName]["type"]>
 }
@@ -106,6 +158,26 @@ function makeFilters(): BuildFilterActions {
 
 export const filter = makeFilters()
 
+function makeAnimate(
+	get: (o: O) => AnimateAction
+): BuildAnimateAction {
+	const action = (<T extends VisualAnimatableItem>(
+		item: Build<T>,
+		terp: Interpolation,
+		track: Keyframes
+	): Build<T> => o => get(o)(item(o), terp, track)) as BuildAnimateAction
+	action.make = (terp: Interpolation, track: Keyframes) => o => get(o).make(terp, track)
+	return action
+}
+
+function makeAnimateActions(): BuildVisualAnimateActions {
+	const entries = Object.keys(visualAnimations)
+		.map(key => [key, makeAnimate(o => o.animate[key as keyof VisualAnimations] as AnimateAction)])
+	return Object.fromEntries(entries) as BuildVisualAnimateActions
+}
+
+export const animate = makeAnimateActions()
+
 export function textStyle(style: TextStyleOptions): Build<Item.TextStyle> {
 	return o => o.textStyle(style)
 }

package/s/timeline/sugar/o.ts

@@ -3,10 +3,15 @@ import {TextStyleOptions} from "pixi.js"
 
 import {Media} from "../parts/media.js"
 import {Id, TimelineFile} from "../parts/basics.js"
-import {Transform, TransformOptions, Vec2} from "../types.js"
 import {FilterAction, FilterActions} from "../parts/filters.js"
-import {Crop, Effect, FilterableItem, Item, Kind} from "../parts/item.js"
 import {filters, FilterParams, FilterType} from "../parts/filters.js"
+import {visualAnimations} from "../parts/animations.js"
+import {Crop, Effect, FilterableItem, Item, Kind, VisualAnimatableItem} from "../parts/item.js"
+import {Anim, AnimateAction, Interpolation, Keyframes, TrackTransform, Transform, TransformOptions, Vec2, VisualAnimations} from "../types.js"
+
+type VisualAnimateActions = {
+	[TKey in keyof VisualAnimations]-?: AnimateAction
+}
 
 export class O {
 	constructor(public state: {timeline: TimelineFile}) {}
@@ -59,6 +64,62 @@ export class O {
   	return item
   }
 
+	animatedSpatial = (anim: Anim<TrackTransform>, crop?: Crop): Item.AnimatedSpatial => {
+		const item: Item.AnimatedSpatial = {
+			id: this.getId(),
+			kind: Kind.AnimatedSpatial,
+			anim,
+			crop,
+			enabled: true
+		}
+		this.register(item)
+		return item
+	}
+
+	#registerAnimation = (anims: VisualAnimations): Item.Animation => {
+		const item: Item.Animation = {
+			id: this.getId(),
+			kind: Kind.Animation,
+			anims,
+			enabled: true
+		}
+		this.register(item)
+		return item
+	}
+
+	anim = {
+		scalar: (terp: Interpolation, track: Keyframes): Anim<Keyframes> => ({terp, track}),
+
+		vec2: (terp: Interpolation, source: Keyframes<Vec2>) => {
+			const track = {x: [] as Keyframes, y: [] as Keyframes}
+
+			for (const [time, [x, y]] of source) {
+				track.x.push([time, x])
+				track.y.push([time, y])
+			}
+
+			return {terp, track}
+		},
+
+		transform: (terp: Interpolation, source: Keyframes<Transform>): Anim<TrackTransform> => {
+			const track: TrackTransform = {
+				position: {x: [], y: []},
+				scale: {x: [], y: []},
+				rotation: [],
+			}
+
+			for (const [time, [position, scale, rotation]] of source) {
+				track.position.x.push([time, position[0]])
+				track.position.y.push([time, position[1]])
+				track.scale.x.push([time, scale[0]])
+				track.scale.y.push([time, scale[1]])
+				track.rotation.push([time, rotation])
+			}
+
+			return {terp, track}
+		},
+	}
+
 	#makeFilter = <TFilter extends FilterType>(type: TFilter) => {
 		const make = (params?: FilterParams<TFilter>) => {
 			const item: Item.Filter<TFilter> = {
@@ -94,6 +155,38 @@ export class O {
 
 	filter = this.#makeFilters()
 
+	#makeAnimate = <TKey extends keyof VisualAnimations>(key: TKey): AnimateAction => {
+		const make = (terp: Interpolation, track: Keyframes) =>
+			this.#registerAnimation({
+				[key]: this.anim.scalar(terp, track)
+			} as Pick<VisualAnimations, TKey>)
+
+		const action = (<T extends VisualAnimatableItem>(
+			item: T,
+			terp: Interpolation,
+			track: Keyframes
+		): T => {
+			const animation = make(terp, track)
+			const next = {
+				...item,
+				animationId: animation.id
+			}
+			this.set<T>(item.id, next as Partial<T>)
+			return next
+		}) as AnimateAction
+
+		action.make = make
+		return action
+	}
+
+	#makeAnimateActions = (): VisualAnimateActions => {
+		const entries = Object.keys(visualAnimations)
+			.map(key => [key, this.#makeAnimate(key as keyof VisualAnimations)])
+		return Object.fromEntries(entries) as VisualAnimateActions
+	}
+
+	animate = this.#makeAnimateActions()
+
 	sequence = (...items: Item.Any[]): Item.Sequence => {
 		const item =  {
 			id: this.getId(),

package/s/timeline/types.ts

@@ -1,5 +1,13 @@
+import {Item, VisualAnimatableItem} from "./parts/item.js"
+
+export type Interpolation =
+	| "linear"
+	| "ease"
+	| "easeIn"
+	| "easeOut"
+	| "bounce"
+	| "catmullRom"
 
-export type Interpolation = "linear" | "catmullRom"
 export type Keyframe<Value = number> = [time: number, value: Value]
 export type Keyframes<Value = number> = Keyframe<Value>[]
 export type Vec2 = [x: number, y: number]
@@ -15,14 +23,29 @@ export type Anim<T> = {
   track: T
 }
 
-export type Animations = Anim<TrackTransform>
-
 export type TrackTransform = {
 	position: TrackVec2
 	scale: TrackVec2
 	rotation: Keyframes
 }
 
+export type ScalarAnimation = Anim<Keyframes>
+export type Vec2Animation = Anim<TrackVec2>
+export type TransformAnimation = Anim<TrackTransform>
+export type VisualAnimations = {
+	opacity?: ScalarAnimation
+}
+export interface AnimateAction {
+	<T extends VisualAnimatableItem>(
+		item: T,
+		terp: Interpolation,
+		track: Keyframes
+	): T
+	make(terp: Interpolation, track: Keyframes): Item.Animation
+}
+
+// export type Animations = Anim<TrackTransform>
+
 export type TransformOptions = {
   position?: Vec2
   scale?: Vec2

package/s/timeline/utils/anim.ts

@@ -0,0 +1,71 @@
+
+import {resolveTerp} from "./terps.js"
+import {Item, Kind} from "../parts/item.js"
+import {Anim, Keyframes, ScalarAnimation, TrackTransform, Transform} from "../types.js"
+
+const resolveScalar =(
+	time: number,
+	keys: Keyframes,
+	terp: Anim<Keyframes>["terp"],
+): number => {
+	if (keys.length === 0)
+		return 0
+
+	if (keys.length === 1)
+		return keys[0][1]
+
+	const sorted = [...keys].sort((a, b) => a[0] - b[0])
+
+	if (time <= sorted[0][0])
+		return sorted[0][1]
+
+	const last = sorted[sorted.length - 1]
+	if (time >= last[0])
+		return last[1]
+
+	let index = 0
+	for (let i = 0; i < sorted.length - 1; i++) {
+		const a = sorted[i]
+		const b = sorted[i + 1]
+		if (time >= a[0] && time <= b[0]) {
+			index = i
+			break
+		}
+	}
+
+	const [t2] = sorted[index]
+	const [t3] = sorted[index + 1]
+	const span = t3 - t2
+	const x = span === 0 ? 0 : (time - t2) / span
+
+	return resolveTerp(terp, x, sorted, index)
+}
+
+export const resolveTransformAnimation =(
+	time: number,
+	anim: Anim<TrackTransform>,
+): Transform => ([
+	[
+		resolveScalar(time, anim.track.position.x, anim.terp),
+		resolveScalar(time, anim.track.position.y, anim.terp),
+	],
+	[
+		resolveScalar(time, anim.track.scale.x, anim.terp),
+		resolveScalar(time, anim.track.scale.y, anim.terp),
+	],
+	resolveScalar(time, anim.track.rotation, anim.terp),
+])
+
+export const resolveScalarAnimation =(
+	time: number,
+	anim: ScalarAnimation,
+): number => resolveScalar(time, anim.track, anim.terp)
+
+export const resolveSpatialTransform =(
+	spatial: Item.Spatial | Item.AnimatedSpatial,
+	time: number,
+): Transform =>
+	spatial.kind === Kind.AnimatedSpatial
+		? resolveTransformAnimation(time, spatial.anim)
+		: spatial.transform
+

package/s/timeline/utils/terps.ts

@@ -0,0 +1,81 @@
+
+import {Interpolation, Keyframes} from "../types.js"
+
+type EasingFn = (x: number, a: number, b: number) => number
+
+class TerpKeys {
+	constructor(
+		private keys: Keyframes,
+		private index: number,
+	) {}
+
+	near(offset: number): number {
+		const next = this.keys[Math.max(0, Math.min(this.keys.length - 1, this.index + offset))]
+		return next[1]
+	}
+}
+
+type TerpFn = (x: number, keys: TerpKeys) => number
+
+const asTerp = (fn: TerpFn): TerpFn => fn
+
+const fromEasingFn = (easing: EasingFn): TerpFn =>
+	asTerp((x, keys) => easing(x, keys.near(0), keys.near(1)))
+
+const lerp = (x: number, a: number, b: number) => a + (b - a) * x
+
+export const terps: Record<Interpolation, TerpFn> = {
+	linear: fromEasingFn(lerp),
+
+	ease: fromEasingFn((x, a, b) => {
+		const eased = x < 0.5
+			? 4 * x * x * x
+			: 1 - Math.pow(-2 * x + 2, 3) / 2
+		return lerp(eased, a, b)
+	}),
+
+	easeIn: fromEasingFn((x, a, b) => lerp(x * x * x, a, b)),
+
+	easeOut: fromEasingFn((x, a, b) => lerp(1 - Math.pow(1 - x, 3), a, b)),
+
+	bounce: fromEasingFn((x, a, b) => {
+		const n1 = 7.5625
+		const d1 = 2.75
+		const eased = x < 1 / d1
+			? n1 * x * x
+			: x < 2 / d1
+				? n1 * (x - 1.5 / d1) ** 2 + 0.75
+				: x < 2.5 / d1
+					? n1 * (x - 2.25 / d1) ** 2 + 0.9375
+					: n1 * (x - 2.625 / d1) ** 2 + 0.984375
+		return lerp(eased, a, b)
+	}),
+
+	catmullRom: asTerp((x, keys) => {
+		const p1 = keys.near(-1)
+		const p2 = keys.near(0)
+		const p3 = keys.near(1)
+		const p4 = keys.near(2)
+		const x2 = x * x
+		const x3 = x2 * x
+		return 0.5 * (
+			(2 * p2) +
+			(-p1 + p3) * x +
+			(2 * p1 - 5 * p2 + 4 * p3 - p4) * x2 +
+			(-p1 + 3 * p2 - 3 * p3 + p4) * x3
+		)
+	}),
+}
+
+export const resolveTerp =(
+	terp: Interpolation,
+	x: number,
+	keys: Keyframes,
+	index: number,
+): number => {
+	const fn = terps[terp]
+	if (!fn)
+		throw new Error(`unknown terp "${terp}"`)
+
+	return fn(x, new TerpKeys(keys, index))
+}