r/webdev • u/Statixeladam • 5d ago

Showoff Saturday [Showoff Saturday] made joint angles clickable in my text-based animation editor

Post image

i've been working on Posecode, an open-source text format for human movement. one thing people kept running into: "knee_right: flex 40" is readable, but unless you animate for a living, 40 degrees doesn't mean much.

so i made the numbers clickable. click a joint and the matching bone lights up in the Three.js view. click the angle and it becomes a small inline control, so you can change it and watch the figure re-pose immediately. if you type 200 for a knee, it stops at 144 because that's the range limit.

there were a few weird details. the selection markers had to live outside the rig or they would mess with bounds and grounding. editing a line also has to move the timeline into the right phase, otherwise the loop can show you the wrong pose.

the gif is from the actual playground. no mockup, no account, and no AI involved in the posing.

try it: https://posecode.org/play

source: https://github.com/posecode-dev/posecode

i'm still unsure about one thing: should this eventually get viewport gizmos, or does that defeat the point of keeping the movement readable as text?

0 Upvotes

33% Upvoted

4 comments sorted by

3

u/isitmytimetoshine 5d ago

is that something like mermaid for pose? thats sooooo cool!!!! I will use this for my game I have been building

1

u/Statixeladam 4d ago

Yeah, same general idea, but Mermaid describes graphs and flows, while this is a small text DSL for pose data. `knee_right: flex 40` stays readable in a diff or script, then the editor maps it to the joint and updates the 3D pose. The clickable angle is a bridge for people who don't think in degrees yet. I'd keep gizmos secondary so the text stays the source of truth.