How to Reset Animation Playhead?

Questions
1

I have seen two different ways to do animations, one using the playhead:

number(`a`): this.animationTime
animationDuration: 5

I was using this method and able to pass the animation duration from the graph and use the animation time, but I was attempting to also make a reset button and could not find a way to move the playhead back to 0 without clicking play. By manipulating animation duration, I made a button to make the playhead disappear (which is necessary to make a draggable point in my diagram usable again), but when the playhead reappears, it is still at the final time. I cannot seem to reset the playhead to 0.
this.animationTime seems to be stuck in memory.

The alternative to using the playhead is doing something like this sketch using button properties:

This example is a couple of years old and possibly predates the availability of animationTime and animationDuration. This almost worked for my purposes, except that I was unable to control the end time of the animation. The value gets set using “timeSincePress” which defaults to a max of 10 seconds and won’t let you pass a number from the graph (gives error, “parameters to sinks and sources must be constant”). I have a calculated maximum that I need for my graph, so this wasn’t workable.

number("t"):when graph1.number("P")=1 act1.timeSincePress
otherwise 0

I would be open to any other workarounds that do the following:

  1. Animate when button is pressed (or open up playhead) with duration being passed from the graph
  2. Reset animation and playhead upon button press (could be different button) and remove playhead so diagram can be manipulated again before the student restarts the animation.
2

You can change the maximum duration of timeSincePress by entering a value as a parameter:

button.timeSincePress(30)

Hope that helps resolve your issue.

3

I have a calculated time in the graph that I need to use as the maximum and it won’t let me pass that. It flags that line in the CL with the error: “parameters to sinks and sources must be constant”
So putting in a number like 30 works fine, but trying to pass graph1.number(“a”) does not.

5

Make t=timeSincePress(100). Then in your graph another variable conditionally dependent on t:

t_0={P=1:t,0}

Then, use t0 for your animations instead of t.

6

Here’s a method I picked up from the Desmos Graph Team. You can send the timeSincePress to the calculator as you suggested, but you don’t need to set a maximum time. Then create a median function and multiply your calculated maximum by this amount. The median function thinks of any animation as a percentage that’s been completed. In this example, I have the point set to start after a half second and it will finish after five seconds. I wanted the point to finish when y is 5, so I multiplied the percentage by 5. It’s a very versatile method. Feel free to share your graph if you need some help making it work!

7

@Daniel_Grubbs and @cwinske Thanks for your help. I will play around with these two ideas.

8

Just a heads up, we added a sink resetAnimationOnChange. It works similarly to other resetOnChange sinks Computation Layer Documentation

3 Likes