feat(stdlib): add Anim.* + Tween.* — deterministic 2D animation & tweening (#5)
All checks were successful
bootstrap / cfree-fixpoint (push) Successful in 16s
ci / build-and-test (push) Successful in 1m9s
commit-lint / conventional-commits (push) Successful in 3s
docs / build-and-deploy (push) Successful in 18s

Two ECS-native, deterministic namespaces for 2D motion, driven off the fixed
frame clock so replays and lockstep netcode reproduce every frame and every
eased value exactly. Both are pure computed-inline Q16.16 / integer math (no new
runtime, no heap) — the game stores a timer on a component and calls these each
frame, exactly the way Collision.* / Grid.* are used.

Anim.* — spritesheet frame animation:
  - Anim.frame(timer,fps,count) -> int      looping frame index
  - Anim.once(timer,fps,count) -> int       one-shot, clamps on the last frame
  - Anim.pingpong(timer,fps,count) -> int   bounce 0..count-1..0
  - Anim.finished(timer,fps,count) -> bool   has a one-shot run past its end?
  - Anim.duration(fps,count) -> fixed        seconds for one cycle
  - Anim.cell_x/cell_y(frame,cols,cell) -> int  source rect on a grid sheet

Tween.* — value interpolation over a timeline:
  - Tween.progress/loop/yoyo(timer,duration) -> fixed  normalized amount
  - Tween.done(timer,duration) -> bool
  - Tween.ease(t, mode) -> fixed             shape by a literal curve 0..6,
                                             the same curves as Ease.* (now
                                             factored into a shared ease_eval)
  - Tween.number/round/point/tint(from,to,t) blend a fixed / int / Vector / color

The typed blends reuse the existing fixed / Vector / color helpers, and
Tween.ease shares Ease.*'s exact formulas via the new ease_eval(mode,t) — one
source of truth for every easing curve in the engine.

examples/library/anim.ludic asserts 34 cases (frame math, clamping, ping-pong,
cell geometry, timeline clamp/loop/yoyo, rounding, color/vector blends, and
Ease.in == Tween.ease(.,1)); wired into x test (now 62 passed). Docs: Anim +
Tween sections with 16 per-symbol pages, inventory/coverage green. Seed
reseeded; the C-free bootstrap fixpoint holds.

The stateful sugar the proposal sketches (named clips, Anim.play, fluent
Tween.chain/parallel handles, and an auto-injected advance system) is deliberately
left as a follow-up — this lands the deterministic math core both halves stand on.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Orkun ÇAKILKAYA 2026-08-31 13:05:06 +03:00
parent 07e5a20c0e
commit e4d1e95dcb
25 changed files with 12379 additions and 9910 deletions

View file

@ -0,0 +1,7 @@
---
id: tween
title: Tween
order: 29
---
Value interpolation over a timeline, off the fixed frame clock. The timeline helpers <a href="tween-progress"><code>Tween.progress</code></a>/<a href="tween-loop"><code>Tween.loop</code></a>/<a href="tween-yoyo"><code>Tween.yoyo</code></a> turn an elapsed <code>timer</code> and a <code>duration</code> into a normalized amount; <a href="tween-ease"><code>Tween.ease</code></a> shapes that amount through an easing curve (shared with <a href="ease"><code>Ease</code></a>); and the typed blends <a href="tween-number"><code>Tween.number</code></a>/<a href="tween-round"><code>Tween.round</code></a>/<a href="tween-point"><code>Tween.point</code></a>/<a href="tween-tint"><code>Tween.tint</code></a> interpolate a <code>fixed</code>, <code>int</code>, <code>Vector</code>, or color. All deterministic fixed-point, so a replay reproduces every eased value exactly.

View file

@ -0,0 +1,29 @@
---
id: tween-done
name: Tween.done
category: tween
kind: namespace-method
tokens: Tween.done
sig: Tween.done(timer, duration) -> bool
tip: True once a one-shot tween's timer reaches its duration.
order: 4
ns: Tween
member: done
---
Returns <code>true</code> once <code>timer >= duration</code> — the companion to <a href="tween-progress"><code>Tween.progress</code></a> for ending a one-shot tween: kick off the next step, clear a component, or snap the value to its target.
Parameters:
- `timer` — elapsed seconds (a `fixed`)
- `duration` — the tween's length in seconds (a `fixed`)
```ludic
program Demo {
property Slide { timer: fixed = 0.0 }
model Menu { Slide }
handler Run phase Update {
Slide.timer = Slide.timer + Time.delta()
if Tween.done(Slide.timer, fixed(1)) { print(1) }
}
}
```

View file

@ -0,0 +1,37 @@
---
id: tween-ease
name: Tween.ease
category: tween
kind: namespace-method
tokens: Tween.ease
sig: Tween.ease(t, mode) -> fixed
tip: Shape a 0..1 amount through an easing curve chosen by a literal mode.
order: 5
ns: Tween
member: ease
---
Shapes a normalized amount <code>t</code> (<code>0.0</code>..<code>1.0</code>) through one of the engine's easing curves and returns the eased <code>fixed</code>. <code>mode</code> must be a literal integer selecting the curve — the same curves as the <a href="ease"><code>Ease</code></a> namespace:
- `0` — linear
- `1` — ease-in (quadratic)
- `2` — ease-out (quadratic)
- `3` — smooth ease-in-out
- `4` — ease-in-back (overshoots below 0)
- `5` — ease-out-elastic (springy settle)
- `6` — ease-out-bounce
Parameters:
- `t` — the amount to shape (a `fixed` in 0..1, e.g. from <a href="tween-progress"><code>Tween.progress</code></a>)
- `mode` — a literal `int` 0..6 selecting the curve
```ludic
program Demo {
handler Run phase Update {
let t = Tween.progress(fixed(1), fixed(2))
let e = Tween.ease(t, 4) # ease-in-back
let x = Tween.round(0, 200, e)
print(x)
}
}
```

View file

@ -0,0 +1,30 @@
---
id: tween-loop
name: Tween.loop
category: tween
kind: namespace-method
tokens: Tween.loop
sig: Tween.loop(timer, duration) -> fixed
tip: A repeating 0..1 sawtooth amount over duration.
order: 2
ns: Tween
member: loop
---
Returns the fractional part of <code>timer / duration</code> — a sawtooth that ramps <code>0.0</code>→<code>1.0</code> then jumps back to <code>0.0</code> and repeats. Use it for a continuously cycling value: a scrolling offset, a rotating hue, a repeating pulse.
Parameters:
- `timer` — elapsed seconds (a `fixed`)
- `duration` — seconds per cycle (a `fixed`)
```ludic
program Demo {
property Spin { timer: fixed = 0.0 }
model Coin { Spin }
handler Run phase Update {
Spin.timer = Spin.timer + Time.delta()
let t = Tween.loop(Spin.timer, fixed(2)) # a 2-second cycle
print(t)
}
}
```

View file

@ -0,0 +1,29 @@
---
id: tween-number
name: Tween.number
category: tween
kind: namespace-method
tokens: Tween.number
sig: Tween.number(from, to, t) -> fixed
tip: Linear blend of two fixeds by amount t.
order: 6
ns: Tween
member: number
---
Interpolates two <code>fixed</code> values: <code>from + (to - from) * t</code>. Feed it an eased <code>t</code> from <a href="tween-ease"><code>Tween.ease</code></a> to tween any fractional quantity — an alpha, a scale, a fixed-point position.
Parameters:
- `from` — the value at `t = 0` (a `fixed`)
- `to` — the value at `t = 1` (a `fixed`)
- `t` — the blend amount (a `fixed`, usually 0..1)
```ludic
program Demo {
handler Run phase Update {
let t = Tween.progress(fixed(1), fixed(2))
let scale = Tween.number(fixed(1), fixed(2), Tween.ease(t, 2))
print(scale)
}
}
```

View file

@ -0,0 +1,31 @@
---
id: tween-point
name: Tween.point
category: tween
kind: namespace-method
tokens: Tween.point
sig: Tween.point(from, to, t) -> Vector
tip: Component-wise blend of two Vectors by amount t.
order: 8
ns: Tween
member: point
---
Interpolates two <a href="vector"><code>Vector</code></a> endpoints component-wise by amount <code>t</code> — the 2D version of <a href="tween-number"><code>Tween.number</code></a>. Move an entity along a straight path, or ease a camera toward a target, in one call.
Parameters:
- `from` — the point at `t = 0` (a `Vector`)
- `to` — the point at `t = 1` (a `Vector`)
- `t` — the blend amount (a `fixed`, usually 0..1)
```ludic
program Demo {
handler Run phase Update {
let a = Vector.make(fixed(0), fixed(0))
let b = Vector.make(fixed(100), fixed(40))
let t = Tween.progress(fixed(1), fixed(2))
let p = Tween.point(a, b, Tween.ease(t, 3))
print(Vector.x(p))
}
}
```

View file

@ -0,0 +1,31 @@
---
id: tween-progress
name: Tween.progress
category: tween
kind: namespace-method
tokens: Tween.progress
sig: Tween.progress(timer, duration) -> fixed
tip: A one-shot 0..1 amount, clamped, for timer over duration.
order: 1
ns: Tween
member: progress
---
Returns <code>timer / duration</code> clamped to <code>0.0</code>..<code>1.0</code> — the normalized progress of a one-shot tween. Feed it to <a href="tween-ease"><code>Tween.ease</code></a> to shape it, then to a typed blend. Once <code>timer</code> reaches <code>duration</code> it pins at <code>1.0</code> (a non-positive <code>duration</code> also reads as done).
Parameters:
- `timer` — elapsed seconds (a `fixed`)
- `duration` — the tween's length in seconds (a `fixed`)
```ludic
program Demo {
property Fade { timer: fixed = 0.0 }
model Panel { Fade }
handler Run phase Update {
Fade.timer = Fade.timer + Time.delta()
let t = Tween.progress(Fade.timer, fixed(1))
let a = Tween.round(0, 255, Tween.ease(t, 2))
print(a)
}
}
```

View file

@ -0,0 +1,32 @@
---
id: tween-round
name: Tween.round
category: tween
kind: namespace-method
tokens: Tween.round
sig: Tween.round(from, to, t) -> int
tip: Linear blend of two ints by amount t, rounded to the nearest int.
order: 7
ns: Tween
member: round
---
Interpolates two <code>int</code> endpoints by amount <code>t</code> and rounds to the nearest integer (half up): <code>from + round((to - from) * t)</code>. The go-to for tweening a pixel position, a channel byte, or any integer field. Combine with <a href="tween-ease"><code>Tween.ease</code></a> for shaped motion.
Parameters:
- `from` — the value at `t = 0` (an `int`)
- `to` — the value at `t = 1` (an `int`)
- `t` — the blend amount (a `fixed`, usually 0..1)
```ludic
program Demo {
property Slide { timer: fixed = 0.0 }
model Card { Slide }
handler Run phase Update {
Slide.timer = Slide.timer + Time.delta()
let t = Tween.progress(Slide.timer, fixed(1))
let x = Tween.round(0, 320, Tween.ease(t, 2))
print(x)
}
}
```

View file

@ -0,0 +1,29 @@
---
id: tween-tint
name: Tween.tint
category: tween
kind: namespace-method
tokens: Tween.tint
sig: Tween.tint(from, to, t) -> int
tip: Per-channel blend of two colors by amount t.
order: 9
ns: Tween
member: tint
---
Blends two colors (<code>0x00RRGGBB</code> ints) channel by channel by amount <code>t</code> — the color equivalent of <a href="tween-number"><code>Tween.number</code></a>. Fade a sprite to white on hit, cross-fade a sky, or pulse a UI accent. Matches <a href="color-lerp"><code>Color.lerp</code></a>, ready for an eased <code>t</code> from <a href="tween-ease"><code>Tween.ease</code></a>.
Parameters:
- `from` — the color at `t = 0` (an `int`, `0x00RRGGBB`)
- `to` — the color at `t = 1` (an `int`, `0x00RRGGBB`)
- `t` — the blend amount (a `fixed`, usually 0..1)
```ludic
program Demo {
handler Run phase Update {
let t = Tween.progress(fixed(1), fixed(2))
let c = Tween.tint(Color.rgb(0, 0, 0), Color.rgb(255, 255, 255), t)
print(c)
}
}
```

View file

@ -0,0 +1,31 @@
---
id: tween-yoyo
name: Tween.yoyo
category: tween
kind: namespace-method
tokens: Tween.yoyo
sig: Tween.yoyo(timer, duration) -> fixed
tip: A repeating 0..1..0 triangle amount over duration.
order: 3
ns: Tween
member: yoyo
---
Returns a triangle wave: <code>timer / duration</code> ramps <code>0.0</code>→<code>1.0</code> over the first <code>duration</code>, then <code>1.0</code>→<code>0.0</code> over the next, and repeats. The smooth back-and-forth for a hover bob, a pulsing highlight, or a breathing scale — no snap at the ends the way <a href="tween-loop"><code>Tween.loop</code></a> has.
Parameters:
- `timer` — elapsed seconds (a `fixed`)
- `duration` — seconds for each leg (a `fixed`)
```ludic
program Demo {
property Bob { timer: fixed = 0.0 }
model Pickup { Bob }
handler Run phase Update {
Bob.timer = Bob.timer + Time.delta()
let t = Tween.yoyo(Bob.timer, fixed(1))
let y = Tween.round(100, 108, Tween.ease(t, 3))
print(y)
}
}
```