Jump to random time in timeline

Using JavaScript with Hype
1

Hey, back with another question!

My place of work currently started implementing hype to create educational content. The current task at hand is to have a user click a “generate” button, and have 5 progress bars randomly generate a percentage.

My thought was to animate the different amount of percentages on a single timeline (possibly a different timeline for each individual progress bar?), then hopefully implement some javascript that would randomly pick a time on the timeline when the user clicks the “generate” button. I would need all 5 progress bars to generate random percentages simultaneously. Suggestions?

I have an animation and design background and don’t currently know any Javascript, I am going to start to learn it considering it seems to be a huge help when manipulating hype documents.

I hope this made sense, haha.

Once again, thank you for the support! (Assuming it comes)

1 Like
2

The hard part is the randomness. So let’s get a random number between 1 and ten and store it as a variable:

var timeBetween1and10 = Math.floor((Math.random() * 10) + 1);

Next, we want to jump to this time with the Hype API:

hypeDocument.goToTimeInTimelineNamed(timeInSeconds, 'timelineName')

So we can replace the timeInSeconds with our new variable, which should be a number between 1 and 10.

hypeDocument.goToTimeInTimelineNamed(timeBetween1and10, 'timelineName')

The full script would be:

 var timeBetween1and10 = Math.floor((Math.random() * 10) + 1);
 hypeDocument.goToTimeInTimelineNamed(timeBetween1and10, 'timelineName')`

So if you have multiple timelines (both 10 seconds long), you would need to repeat this function (generating new random numbers) and inserting them within the Hype API function to get the timeline to jump to different points in that timeline when the function is loaded:

 var timeBetween1and10A = Math.floor((Math.random() * 10) + 1);
 hypeDocument.goToTimeInTimelineNamed(timeBetween1and10A, 'timelineNameA')`

 var timeBetween1and10B = Math.floor((Math.random() * 10) + 1);
 hypeDocument.goToTimeInTimelineNamed(timeBetween1and10B, 'timelineNameB')`

This returns numbers like 1, 2, 3. But if you wanted a number like 1.55 (which would be a bit more random looking), you would use this function: https://stackoverflow.com/a/45736188, which sets the decimal precision of the random number.

4 Likes
3

3 posts were merged into an existing topic: Linking to random scenes using Javascript

4

Someone asked via email about rolling a dice to show a random number. Here’s a quick example of this:

var timeBetween1and5A = Math.floor(Math.random() * 6) + 1;
hypeDocument.goToTimeInTimelineNamed(timeBetween1and5A, 'Main Timeline')

dice-roll.zip (16.1 KB)