Free Template Tuesday #3 – Tumult Hype “Groundhog”

groundhog-coin-head-cloud-2016Today’s “Groundhog Day”. It’s a strange tradition, where a rodent basically becomes a weatherman. If a groundhog comes out of its hole, and it’s cloudy, then it will be an early spring. If it’s sunny, and the groundhog sees it shadow, then it will get scared and go back inside. That’s supposed to mean six more weeks of winter. While I think its cute that people make such a fuss over fuzzy critters like Staten Island Chuck or Punxsutawney Phil, a groundhog is not much different at predicting the weather than tossing a coin. That’s this week’s Free Hype Template.

By using JavaScript, it’s fairly easy to create a 50/50 outcome. The “Math.random” method can generate a random number between 0 and 1. That’s almost like a coin toss, as a coin toss has two possible outcomes. But since Math.random generates a number like 0.7035838516894728, the “Math.round” function is used to round the number to the nearest integer. That’s at the core of the Groundhog coin flip.

By pressing the “Flip” button, the following code is run…

var heads = Math.round(Math.random());
if (heads == true) {
hypeDocument.goToTimeInTimelineNamed(0, 'Heads');
} else {
hypeDocument.goToTimeInTimelineNamed(0, 'Tails');

If the random value is rounded up, then “heads” is equal to “1” or “true”. If the random value is rounded down, then “heads” is “0” or “false”. Depending on the value, the corresponding timeline is manipulated. In the example, the “Heads” timeline switches the coin image to the “Cloudy” side. In the “Tails” timeline, the coin image is switched to the “Sunny” side.

This can be a little tricky to understand. But if you can master it, this is the building block to adding lots of random activity to your projects. To take a closer look at this project, Download the “Groundhog” Hype Template.