Show the current time using fancy math

- [Voiceover] This is where things get interesting. We have to figure out how to convert this nine hours, 48 minutes, and one second into the correct degrees on a circle so that the arms are positioned correctly to show the time. That requires some math, and it all starts with dividing up the clock face into the correct number of sections. Because the second arm splits the clock face into 60 components. There are 69 seconds in one minute, so it takes 60 steps to go around the circle.

That means we have to take 360 degrees, divide it by 60, and then add up how many seconds, or how many segments, we want to move. The same goes for the minute hand. There are 60 minutes in an hour, and for the hour hand, we divide the clock face up into 12, because there are 12 hours on the clock face. Over in my code, what I need to do is grab these values here, hr, min, and sec, and convert them to degrees, and place those degrees inside the hr position, min position, and sec position variables.

I'm just going to move these down below so we get the correct structure here, and then we can start doing the math. So I'll start with the seconds, 'cause that's the easiest one. What I know right now is the number of seconds in the current minutes. So sec. Then I'd need to take the 60 seconds that could be on the clock, and divide those by 360 degrees so we get how many degrees are covered by one second, and then we time those degrees by second.

So we say if there are five seconds, we have five segments. That means multiply by 360 over 60. We can test this right away by simply saving, and you should see here, right now the second is 31 and this arm is positioned at the 31st second. If I reload the browser, arm has moved 43 seconds, here's at 45 seconds, and you can see it's in the correct position. All right, so far so good. Next up, minutes.

Now here we have to do two things. We'll do the simple part first. I need to do the exact same thing for minutes as I did with seconds. So I'll grab the minute element, that's the current number of minutes in an hour. Then multiply by 360, divided by 60. This gives us the minute position. So right now, it's the 54th minute, so it's at 54 minutes. However, I want this clock to be super fancy. Meaning, this arm, the minute arm, moves along with the second arm.

So for every full minute, this arm should incrementally move the length of one minute up here. So we don't get some weird, kind of popping action between the minutes. That means we need to take the current minute degrees and add to them the number of seconds that are added to the clock, but instead of just dividing it by 60, which is the complete clock face, I have to divide this one piece here into 60 increments. So I say, sec multiplied by 360 degrees divided by 60.

And then, divide all of that by 60 because I want just this little component over here. Save that and the arm should move so we get the correct position again, and here we get 55 minutes and 40 seconds. So if it was just 55 minutes, the arm would be on this mark over here. But because we have 55 minutes plus 40 seconds, so not a full extra minute, the minute arm has moved a little bit over. Finally, we have the hour position.

So here we grab the hour, multiply it by 360, divided by 12, because we're dividing the clock face into 12 segments for the hour. And save. Now, my hour hand is placed at the ninth hour. However the time right now is 9:56, so technically this hour hand, just like the minute hand, should move up based on what the minutes currently are. So it should be about here instead. So again we'll take the hour position, and add to it the position of the minute hand this time.

So then min times 360 over 60, so that gives us the relative minute position, and then we divide that information by 12 so that we only get this little segment here, and we divide that little segment into 60 components. Save one more time. And now the hour hand is almost at the 10 o'clock mark but not quite, because we're still at 57 minutes, meaning the minute arm still has a little ways to go, and that means the hour hand also has a little ways to go before it gets all the way to 10.