ConnorAtherton/walkway

Show specific frame

Opened this issue · 15 comments

Walkway looks like almost exactly what I need in leaving Vivus.

One thing I can't figure out so far is whether I have the ability to show a specific frame. What I want is to render the frames one at a time, so that I can screenshot them, rather than to have them animated in the browser.

Does Walkway support this kind of use?

There's no control over the specific frames in Walkway, although it wouldn't be too hard to add a counter around line 247, if you're willing to DIY.

Should be generally possible based on the calculation for the progress.

@DanielRuf - sure, but i'll be damned if i can figure out where it is in the library

Currently it is not there. There is an internal progress variable but it is not tracked yet. I am currently working on multiple changes and also some progess/resume method. Still not very polished everything but will release the changes when I am done testing, split them into branches and PRs and work with the author, you and the others on the last bits until one of the changes is ready to be published and ready for a new release. Discussion is open then if and what should be in the next releases.

so, if resume can be at a specific frame and stopped, then that's everything i need. i can build my frame getter around those two things quite easily

Well, directly going to a frame and resuming from there is not yet possible, even in my current prototype (still not uploaded) as in this case there is no relative time value when the animation started and how much time of the animation was completed in theory, because going from a percentage / progress to the initial (virtual) values means we have to do the opposite of the easing function and calculate the timestamp when this animation was started and at what point the current state of it is.

Doing the opposite of the timebased easing functions is quite hard as some of the builtin are not so easy to invert and custom ones are harder. So a 1/easing function is possibly not directly possible.

With a time it works, a progress value does not work great.

Does a reverse mode make sense like play the animation backwards? As method? Not sure about this idea.

#45 (comment)
https://github.com/DanielRuf/walkway/commit/75c496a5e145016ed575e26a23a4e4463d30581c

added timetravel(time) (where time is an int value) and also a progress(progress) (where progress is a double value from 0.0 - 1.0) but the timetravel method is much better as you can draw from there as the animation is paused there. Getting the start time from the progress value is not so easy at the first look so I just used this with the fill(progress) function.

I hope one of both is something what you could need.

Does timetravel work when the animation is paused?

Sure. So far I could timetravel back and forth and then resume with draw().

And you still have pause().

ok, so, if i understand correctly, i could abuse timetravel to imitate having a per-frame render?

approximately

seq(1,videoLength*60).map(frame => { timetravel(frame); saveScreenshot(${frame}.png); });

Right, timetravel uses millisecond based value. So an animation with a duration of 8000 = 8s would be complete using timetravel(8000) and at 50% using timetravel(4000) (at second 4). So timebased calculations should work without any issues.

Still not very polished and I did not invest so much work yet but hopefully helpful and it's clear how it works.

Oh okay

This is fantastic, and I really appreciate the help 😀