@omnimedia/omnitool 1.1.0-84 → 1.1.0-86

package/README.md

@@ -146,22 +146,24 @@ const timeline = omni.timeline(o => {
 })
 ```
 
-Animated spatial transforms:
+Animations:
 
 ```ts
 const timeline = omni.timeline(o => {
-	const customMotion = o.animatedSpatial(
-		o.anim.transform("linear", [
-			[0, o.transform({position: [-400, 0]})],
-			[1000, o.transform({position: [0, 0]})],
-		])
-	)
+	const fadeIn = o.animate.opacity.make("easeIn", [
+		[0, 0],
+		[700, 1],
+	])
+	const slideOut = o.animate.transform.make("linear", [
+		[0, o.transform({position: [0, 0]})],
+		[1000, o.transform({position: [400, 0]})],
+	])
 
 	const title = o.text("Lower third", {
 		duration: 2000,
 		styles: {fill: "white", fontSize: 36}
 	})
-	o.set(title.id, {spatialId: customMotion.id})
+	o.set(title.id, {animationIds: [fadeIn.id, slideOut.id]})
 
 	return o.stack(
 		o.video(clip, {duration: 4000}),
@@ -170,31 +172,28 @@ const timeline = omni.timeline(o => {
 })
 ```
 
-Built-in spatial animations:
+Built-in transform animations:
 
 ```ts
 const animOut = {
 	duration: 500,
 	offset: item.duration - 500,
 }
-const slideIn = o.animatedSpatial(o.anim.presets.slideIn())
-const slideOut = o.animatedSpatial(o.anim.presets.slideOut(animOut))
-const spinIn = o.animatedSpatial(o.anim.presets.spinIn())
-const spinOut = o.animatedSpatial(o.anim.presets.spinOut(animOut))
-const zoomIn = o.animatedSpatial(o.anim.presets.zoomIn())
-const zoomOut = o.animatedSpatial(o.anim.presets.zoomOut(animOut))
-const bounceIn = o.animatedSpatial(o.anim.presets.bounceIn())
-const bounceOut = o.animatedSpatial(o.anim.presets.bounceOut(animOut))
+const slideIn = o.animate.presets.slideIn.make()
+const slideOut = o.animate.presets.slideOut.make(animOut)
+const spinIn = o.animate.presets.spinIn.make()
+const spinOut = o.animate.presets.spinOut.make(animOut)
+const zoomIn = o.animate.presets.zoomIn.make()
+const zoomOut = o.animate.presets.zoomOut.make(animOut)
+const bounceIn = o.animate.presets.bounceIn.make()
+const bounceOut = o.animate.presets.bounceOut.make(animOut)
 ```
 
 Built-in scalar animations:
 
 ```ts
-const fadeInPreset = o.anim.presets.fadeIn()
-const fadeIn = o.animate.opacity.make(fadeInPreset.terp, fadeInPreset.track)
-
-const fadeOutPreset = o.anim.presets.fadeOut({duration: 500})
-const fadeOut = o.animate.opacity.make(fadeOutPreset.terp, fadeOutPreset.track)
+const fadeIn = o.animate.presets.fadeIn.make()
+const fadeOut = o.animate.presets.fadeOut.make(animOut)
 ```
 
 Animation application:
@@ -233,7 +232,7 @@ const timeline = omni.timeline(o => {
 		duration: 2000,
 		styles: {fill: "white", fontSize: 36},
 	})
-	o.set(title.id, {animationId: fadeIn.id})
+	o.set(title.id, {animationIds: [fadeIn.id]})
 
 	return o.stack(
 		o.video(clip, {duration: 4000}),
@@ -269,8 +268,9 @@ Object.entries(animationPresets).forEach(([preset, meta]) => {
 ```
 
 Animatable properties describe what can be keyframed, such as `transform` and `opacity`.
-Animation presets describe built-in recipes, such as `slideIn` and `fadeIn`, that create animation data.
-Use `animationPresets` to list available recipes, and `o.anim.presets` to create animation data from them.
+Animation presets describe built-in recipes, such as `slideIn` and `fadeIn`.
+Use `animationPresets` to list available recipes, and `o.animate.presets` to create animation items.
+Use `o.animate` to create or apply animation items.
 
 Preset options:
 - `duration` sets the animation duration, defaulting to `700`.
@@ -285,7 +285,7 @@ Utils:
 ```ts
 import {resolveScalarAnimation, resolveTransformAnimation} from "@omnimedia/omnitool"
 
-const transform = resolveTransformAnimation(localTime, spatial.anim)
+const transform = resolveTransformAnimation(localTime, transformAnimation)
 const opacity = resolveScalarAnimation(localTime, opacityAnimation)
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@omnimedia/omnitool",
-	"version": "1.1.0-84",
+	"version": "1.1.0-86",
 	"description": "open source video processing tools",
 	"license": "MIT",
 	"author": "Przemysław Gałęzki",

package/s/demo/routines/timeline-setup.ts

@@ -22,17 +22,16 @@ export async function TimelineSchemaTest(driver: Driver, file: File) {
 			}),
 			[0.15, 0.1, 0.05, 0.2],
 		)
-		const textSpatial = o.animatedSpatial(
-			o.anim.transform("linear", [
+		const textSpatial = o.spatial()
+		const textMotion = o.animate.transform.make("linear", [
 				[0, o.transform({position: [-320, 80], scale: [0.7, 0.7]})],
 				[1000, o.transform({position: [120, 80], scale: [1, 1]})],
 				[2000, o.transform({position: [200, 40], scale: [1.35, 1.35], rotation: 8})],
 				[3000, o.transform({position: [320, 0], scale: [1.15, 1.15], rotation: 0})],
-			]),
-		)
+		])
 
 		const video = o.video(videoA, {duration: 3000, start: 1000})
-		o.set<Item.Text>(text.id, {styleId: style.id, spatialId: textSpatial.id, animationId: fade.id})
+		o.set<Item.Text>(text.id, {styleId: style.id, spatialId: textSpatial.id, animationIds: [fade.id, textMotion.id]})
 		o.set<Item.Video>(video.id, {spatialId: videoSpatial.id})
 
 		return o.sequence(

package/s/timeline/parts/animations/properties.ts

@@ -1,7 +1,7 @@
 
 import type {AnimationDefinition} from "./types.js"
 
-export const spatialAnimations = {
+export const visualAnimations = {
 	transform: {
 		type: "transform",
 		defaultTerp: "linear",
@@ -13,9 +13,6 @@ export const spatialAnimations = {
 			{path: "rotation", type: "number", default: 0, unit: "radian"},
 		],
 	},
-} as const satisfies Record<string, AnimationDefinition>
-
-export const visualAnimations = {
 	opacity: {
 		type: "scalar",
 		defaultTerp: "linear",
@@ -28,7 +25,6 @@ export const visualAnimations = {
 // const audioAnimations = {}
 
 export const animatableProperties = {
-	...spatialAnimations,
 	...visualAnimations,
 } as const
 

package/s/timeline/parts/animations/types.ts

@@ -1,7 +1,8 @@
 
 import {animationPresets} from "./presets.js"
-import {spatialAnimations, visualAnimations, animatableProperties} from "./properties.js"
-import {Anim, Interpolation, Keyframes, TrackTransform, TransformOptions, Vec2} from "../../types.js"
+import type {Item, VisualAnimatableItem} from "../item.js"
+import {visualAnimations, animatableProperties} from "./properties.js"
+import type {Anim, Interpolation, Keyframes, ScalarAnimation, TrackTransform, TransformAnimation, TransformOptions, Vec2} from "../../types.js"
 
 export type AnimationType = "scalar" | "transform"
 export type AnimationChannelType = "number"
@@ -41,7 +42,6 @@ export type AnimationPresetDefinition =
 	| MotionAnimationPresetDefinition
 	| ScalarAnimationPresetDefinition
 
-export type SpatialAnimationProperty = keyof typeof spatialAnimations
 export type VisualAnimationProperty = keyof typeof visualAnimations
 export type AnimationProperty = keyof typeof animatableProperties
 export type AnimationPreset = keyof typeof animationPresets
@@ -67,3 +67,14 @@ export type AnimationPresetOptions<Value> = {
 
 export type MotionAnimationOptions = AnimationPresetOptions<Vec2>
 export type ScalarAnimationOptions = AnimationPresetOptions<number>
+export type PresetAnimation = ScalarAnimation | TransformAnimation
+export type PresetOptions = MotionAnimationOptions | ScalarAnimationOptions
+
+export interface PresetAnimateAction {
+	<T extends VisualAnimatableItem>(item: T, options?: PresetOptions): T
+	make(options?: PresetOptions): Item.Animation
+}
+
+export type PresetAnimateActions = {
+	[TKey in AnimationPreset]: PresetAnimateAction
+}

package/s/timeline/parts/item.ts

@@ -4,7 +4,7 @@ import {TextStyleOptions} from "pixi.js"
 import {Id, Hash} from "./basics.js"
 import {Ms} from "../../units/ms.js"
 import type {FilterParams, FilterType} from "./filters.js"
-import {Anim, TrackTransform, Transform, VisualAnimations} from "../types.js"
+import {Transform, VisualAnimations} from "../types.js"
 
 export type Crop = [top: number, right: number, bottom: number, left: number]
 
@@ -16,7 +16,6 @@ export enum Kind {
 	Text,
 	Gap,
 	Spatial,
-	AnimatedSpatial,
 	Animation,
 	Transition,
 	TextStyle,
@@ -42,14 +41,6 @@ export namespace Item {
 		enabled: boolean
 	}
 
-	export type AnimatedSpatial = {
-		id: Id
-		kind: Kind.AnimatedSpatial
-		anim: Anim<TrackTransform>
-		crop?: Crop
-		enabled: boolean
-	}
-
 	export type Animation = {
 		id: Id
 		kind: Kind.Animation
@@ -94,7 +85,7 @@ export namespace Item {
 		start: number
 		duration: number
 		spatialId?: Id
-		animationId?: Id
+		animationIds?: Id[]
 		filterIds?: Id[]
 	}
 
@@ -113,7 +104,7 @@ export namespace Item {
 		content: string
 		duration: number
 		spatialId?: Id
-		animationId?: Id
+		animationIds?: Id[]
 		styleId?: Id
 		filterIds?: Id[]
 	}
@@ -134,7 +125,6 @@ export namespace Item {
 		| Gap
 		| Transition
 		| Spatial
-		| AnimatedSpatial
 		| Animation
 		| TextStyle
 		| Filter
@@ -144,7 +134,6 @@ export namespace Item {
 export type ContainerItem = Item.Sequence | Item.Stack
 export type NonContainerItem = Exclude<Item.Any, ContainerItem>
 export type FilterableItem = Item.Sequence | Item.Stack | Item.Video | Item.Text
-export type SpatialItem = Item.Spatial | Item.AnimatedSpatial
 export type VisualAnimatableItem = Item.Video | Item.Text
 
 export type PlayableItem = Item.Any & {

package/s/timeline/renderers/parts/handy.ts

@@ -1,10 +1,11 @@
 
 import {ms, Ms} from '../../../units/ms.js'
 import {Id, TimelineFile} from '../../parts/basics.js'
+import {Keyframes, TransformAnimation} from '../../types.js'
 import { SampleContext } from './samplers/visual/parts/types.js'
 import {I6, Mat6, mul6, transformToMat6} from '../../utils/matrix.js'
-import {resolveScalarAnimation, resolveTransform} from '../../utils/anim.js'
-import {ContainerItem, Item, Kind, PlayableItem, SpatialItem} from '../../parts/item.js'
+import {ContainerItem, Item, Kind, PlayableItem} from '../../parts/item.js'
+import {resolveScalarAnimation, resolveTransformAnimation} from '../../utils/anim.js'
 
 function isPlayableItem(item: Item.Any): item is PlayableItem {
 	return 'duration' in item
@@ -98,14 +99,27 @@ function applySpatialIfAny(
 	parentMatrix: Mat6,
 	time: Ms,
 ) {
+	let matrix = parentMatrix
 	if ("spatialId" in item && item.spatialId) {
-		const spatial = items.get(item.spatialId) as SpatialItem | undefined
+		const spatial = items.get(item.spatialId) as Item.Spatial | undefined
 		if (spatial?.enabled) {
-			const local = transformToMat6(resolveTransform(spatial, time))
-			return mul6(local, parentMatrix)
+			const local = transformToMat6(spatial.transform)
+			matrix = mul6(local, matrix)
 		}
 	}
-	return parentMatrix
+
+	if ("animationIds" in item && item.animationIds) {
+		for (const id of item.animationIds) {
+			const animation = items.get(id) as Item.Animation | undefined
+			const anim = animation?.anims.transform
+			if (animation?.enabled && anim && transformActiveAt(anim, time)) {
+				const local = transformToMat6(resolveTransformAnimation(time, anim))
+				matrix = mul6(local, matrix)
+			}
+		}
+	}
+
+	return matrix
 }
 
 export function walk(
@@ -366,12 +380,39 @@ export function computeOpacity(
 	item: Item.Any,
 	time: Ms,
 ) {
-	if (!("animationId" in item) || item.animationId === undefined)
+	if (!("animationIds" in item) || item.animationIds === undefined)
 		return 1
 
-	const animation = ctx.items.get(item.animationId) as Item.Animation | undefined
-	return animation?.enabled && animation.anims.opacity
-		? resolveScalarAnimation(time, animation.anims.opacity)
-		: 1
+	let opacity = 1
+	for (const id of item.animationIds) {
+		const animation = ctx.items.get(id) as Item.Animation | undefined
+		const anim = animation?.anims.opacity
+		if (animation?.enabled && anim && keyframesActiveAt(anim.track, time))
+			opacity = resolveScalarAnimation(time, anim)
+	}
+	return opacity
+}
+
+function keyframesActiveAt(keys: Keyframes, time: Ms) {
+	if (keys.length === 0)
+		return false
+
+	let start = keys[0][0]
+	let end = keys[0][0]
+	for (const [keyTime] of keys) {
+		start = Math.min(start, keyTime)
+		end = Math.max(end, keyTime)
+	}
+
+	return time >= start && time <= end
 }
 
+function transformActiveAt(anim: TransformAnimation, time: Ms) {
+	return (
+		keyframesActiveAt(anim.track.position.x, time) ||
+		keyframesActiveAt(anim.track.position.y, time) ||
+		keyframesActiveAt(anim.track.scale.x, time) ||
+		keyframesActiveAt(anim.track.scale.y, time) ||
+		keyframesActiveAt(anim.track.rotation, time)
+	)
+}

package/s/timeline/renderers/parts/samplers/visual/parts/sample.ts

@@ -2,7 +2,7 @@
 import {SampleContext} from "./types.js"
 import {sampleSequence} from "./sequence.js"
 import {Ms} from "../../../../../../units/ms.js"
-import {Item, Kind, SpatialItem} from "../../../../../parts/item.js"
+import {Item, Kind} from "../../../../../parts/item.js"
 import {FilterSpec, Layer} from "../../../../../../driver/fns/schematic.js"
 import {AncestorAt, computeOpacity, computeWorldMatrix} from "../../../handy.js"
 
@@ -15,7 +15,7 @@ export async function sampleVisual(
 	const matrix = computeWorldMatrix(ctx.items, ancestors, item, time)
 	const alpha = computeOpacity(ctx, item, time)
 	const crop = "spatialId" in item && item.spatialId
-		? (ctx.items.get(item.spatialId) as SpatialItem | undefined)?.crop
+		? (ctx.items.get(item.spatialId) as Item.Spatial | undefined)?.crop
 		: undefined
 	const filters = "filterIds" in item && item.filterIds
 		? item.filterIds

package/s/timeline/sugar/helpers.ts

@@ -6,37 +6,17 @@ import {Media} from "../parts/media.js"
 import {TimelineFile} from "../parts/basics.js"
 import {FilterAction} from "../parts/filters.js"
 import {filters, FilterParams, FilterType} from "../parts/filters.js"
+import {AnimationPreset, PresetOptions} from "../parts/animations/types.js"
 import {Crop, FilterableItem, Item, VisualAnimatableItem} from "../parts/item.js"
-import {makeAnimationPresets, visualAnimations} from "../parts/animations/registry.js"
-import {Anim, AnimateAction, Interpolation, Keyframes, TrackTransform, Transform, TransformOptions, Vec2, VisualAnimations} from "../types.js"
-
-const transformFrom = (options: TransformOptions): Transform => [
-	options.position ?? [0, 0],
-	options.scale ?? [1, 1],
-	options.rotation ?? 0,
-]
-
-const transformAnimation = (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}
-}
+import {animationPresets, visualAnimations} from "../parts/animations/registry.js"
+import {Anim, AnimateAction, Interpolation, Keyframes, TrackTransform, Transform, Vec2, VisualAnimationInput, VisualAnimations} from "../types.js"
 
 export type Build<T extends Item.Any = Item.Any> = (o: O) => T
 type BuildVisualAnimateActions = {
-	[TKey in keyof VisualAnimations]-?: BuildAnimateAction
+	[TKey in keyof VisualAnimations]-?: BuildAnimateAction<TKey>
+}
+type BuildPresetAnimateActions = {
+	[TKey in AnimationPreset]: BuildPresetAnimateAction
 }
 
 function createTimeline(): TimelineFile {
@@ -103,10 +83,6 @@ 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}
@@ -123,13 +99,23 @@ export const anim = {
 		return {terp, track}
 	},
 
-	transform: transformAnimation,
+	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])
+		}
 
-	presets: makeAnimationPresets(
-		(terp, track) => ({terp, track}),
-		transformAnimation,
-		transformFrom,
-	),
+		return {terp, track}
+	}
 }
 
 interface BuildFilterAction<TFilter extends FilterType> {
@@ -137,13 +123,18 @@ interface BuildFilterAction<TFilter extends FilterType> {
 	make(params?: FilterParams<TFilter>): Build<Item.Filter<TFilter>>
 }
 
-interface BuildAnimateAction {
+interface BuildAnimateAction<TKey extends keyof VisualAnimations = keyof VisualAnimations> {
 	<T extends VisualAnimatableItem>(
 		item: Build<T>,
 		terp: Interpolation,
-		track: Keyframes
+		track: VisualAnimationInput<TKey>
 	): Build<T>
-	make(terp: Interpolation, track: Keyframes): Build<Item.Animation>
+	make(terp: Interpolation, track: VisualAnimationInput<TKey>): Build<Item.Animation>
+}
+
+interface BuildPresetAnimateAction {
+	<T extends VisualAnimatableItem>(item: Build<T>, options?: PresetOptions): Build<T>
+	make(options?: PresetOptions): Build<Item.Animation>
 }
 
 type BuildFilterActions = {
@@ -172,25 +163,45 @@ function makeFilters(): BuildFilterActions {
 
 export const filter = makeFilters()
 
-function makeAnimate(
-	get: (o: O) => AnimateAction
-): BuildAnimateAction {
+function makeAnimate<TKey extends keyof VisualAnimations>(
+	get: (o: O) => AnimateAction<TKey>
+): BuildAnimateAction<TKey> {
 	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)
+		track: VisualAnimationInput<TKey>
+	): Build<T> => o => get(o)(item(o), terp, track)) as BuildAnimateAction<TKey>
+	action.make = (terp: Interpolation, track: VisualAnimationInput<TKey>) => 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)])
+		.map(key => [key, makeAnimate(o => o.animate[key as keyof VisualAnimations] as AnimateAction<any>)])
 	return Object.fromEntries(entries) as BuildVisualAnimateActions
 }
 
-export const animate = makeAnimateActions()
+function makePresetAnimate(
+	key: AnimationPreset
+): BuildPresetAnimateAction {
+	const action = (<T extends VisualAnimatableItem>(
+		item: Build<T>,
+		options?: PresetOptions
+	): Build<T> => o => o.animate.presets[key](item(o), options)) as BuildPresetAnimateAction
+	action.make = (options?: PresetOptions) => o => o.animate.presets[key].make(options)
+	return action
+}
+
+function makePresetAnimateActions(): BuildPresetAnimateActions {
+	const entries = Object.keys(animationPresets)
+		.map(key => [key, makePresetAnimate(key as AnimationPreset)])
+	return Object.fromEntries(entries) as BuildPresetAnimateActions
+}
+
+export const animate = {
+	...makeAnimateActions(),
+	presets: makePresetAnimateActions(),
+}
 
 export function textStyle(style: TextStyleOptions): Build<Item.TextStyle> {
 	return o => o.textStyle(style)