[ ] improve play/pause button, use icons. Now it is just letters S/P .
TODO
Add simple support for running animations
[x] slider is augmented to allow animating
[x] can auto start
[x] allow for separate fps parameter
[x] separate fps parameter should change step for anim param
[x] sliding works as normal along player controls
[x] loop type: 'restart'
[x] no loop
[x] loop type: 'reverse'
[x] works on older jscad web versions as slider still can be used
[x] script on it's own has the task top optimize re-evaluation of parameters when only animation time changes
[x] script on it's own can use animation library to define keyframes
[x] FIXED: for low fps (2 sec anim, 2 fps) time steps are not aligned ( 0.48 instead of .05)
// 5 seconds animation at 60Fps
{name:"anim1", type:"slider", min:0, max:5, step:0.016, fps:60}
// 2 seconds animation at 30Fps, start animating automatically after script is loaded
{name:"anim2", type:"slider", min:0, max:2, step:0.033, fps:30, autostart:true}
// starts from zero again when reaches end time
{name:"anim2", type:"slider", min:0, max:2, step:0.033, fps:30, autostart:true, loop:'restart'}
// reverses when reaches end/start time
{name:"anim2", type:"slider", min:0, max:2, step:0.033, fps:30, autostart:true, loop:'reverse'}
animation frame strategy
request frame send all parameters from form and the new value for time(t)
FPS is honored only if possible only, time is sent to reflect current time animation needs to execute
so animation will track time, but not be as smooth if render is > (1000/fps)ms
measure time startTime = lastTime=now
request a frame (t= now-startTime)
receive frame - delta=now - lastTime
if delta < fps .. sleep(fps-delta) ... to postpone the next steps
request next frame(t= now-startTime) ... render frame
slider improvement
In preparation for animation option I have made improvements to slider UI in few ways
added a real input field to be able to both write values and use slider
their value is connected while changing
slider is intentionally moved to absolute position
form row has extra padding below
slider is placed in the new free space so it can be larger, taking both label an input horizontal space
this also allows to add animation control buttons on the side of input without squaesing the slider
postponed for next pr
TODO
Add simple support for running animations
animation frame strategy
request frame send all parameters from form and the new value for time(t) FPS is honored only if possible only, time is sent to reflect current time animation needs to execute so animation will track time, but not be as smooth if render is > (1000/fps)ms
slider improvement
In preparation for animation option I have made improvements to slider UI in few ways
https://github.com/user-attachments/assets/ff42d217-68cf-4d45-a63e-15dd98b3ab2c