Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:2.8 hours
Snap 1
  • Overview
  • Transcript

5.4 Organizing the Code

Hello, and welcome back to Animating with Snap.svg. Now that we know how to pull in the current time, let's transform that time into degrees of rotation. So that we can move our hands around on the clock, in order to get it to display the appropriate time. So let's start again by making a copy of the site16 folder. We'll rename this new copy, site17, and then we'll drag that down to Brackets. And I'll also go ahead and jump into Chrome and jump over to the site17 folder. Now, we're still getting this pop up. We'll just hit OK, and we'll jump back into Brackets and get rid of that. So, let's go to our main.js file. And let's get rid of our window alert here. And we've already set the groundwork for pulling in our date, our hours, minutes, and seconds. But now we need to transform these numbers into degrees. If it's currently 5:30 and 30 seconds and we want to rotate the second hand, we need to rotate it around so that it's pointing straight down at the 30 second mark. Well since our circle's 360 degrees, then 30 seconds would be half of that. It would be 180 degrees. So if we were to take our second hand for example. And we've created it up here. But you'll notice, if we try to access our second hand here, we're gonna have problems, so if I were to say secondHand.transform, and then we're gonna rotate it 180 degrees. And we're gonna use the center point as a rotation. And for our second hand up here, I'm gonna get rid of that for now. So we'll save that and we'll see that it's not gonna work, right? We're gonna refresh, and you'll see that our second hand does not rotate. And the reason for that is, our second hand was created up here, inside this function. So this variable, the second hand variable, is only local to this function, we can't access it outside of this function like we were trying to do down here. So one thing I do wanna do before we get any further is, I wanna create a few variables up here at the top. So I'm gonna create a variable called clock. And we're gonna use it down here instead of creating the variable here. So we'll get rid of the var down here and just set it equal to a certain value. So we're declaring it up here. We're assigning it a value in here. So we've got clock. We're also going to point to or we're gonna create the variables for second hand, minute hand, and hour hand. And that should get us started for now. So we've got rid of the var here. Now we need to get rid of it here and here and here. So we're doing the same logic on these items here. The difference is, we're just declaring these objects up here, so that they're more global. We can access them from anywhere. So now we can access them inside this function. We can also access them outside of this function. So now, this same secondHand.transform should work. So if we were to save our file, jump back into our browser and refresh. And the reason that's not working yet is because we have this callback function that's not being called until after this clock.svg file finishes loading. Well even though this code here comes before our secondHand.transform down here, the secondHand.transform is still running at the same time as all of this other code. It's not waiting for this load to finish before it runs. So basically this is running, but at the time that it runs, this clock.svg hasn't finished loading yet. So this line of code here hasn't been run, and we don't really know what to apply this transformation to. We haven't applied it to the second hand yet. In fact, that second hand hasn't even loaded by the time we run this function. So what we need to do is, let's grab this, cut it. And then outside of our window onload function, I'm just gonna create another function here called showTime. And inside this showTime function, I'm gonna paste that code, so we're going to do a secondHand.transform there. But we're gonna call this function from within our callback function here so that we'll know that this function won't get called until after that SVG has finished loading. So we've finished loading the SVG. We've called this callback function here. We've set our secondHand = clock.select("second_hand"). And we've done some other things here. I'm gonna get rid of these transformations here. And we're gonna call the showTime function. And let's see if that works. We'll save our file, jump back into our browser and refresh, and sure enough, now our second hand is pointing down at 30 seconds. Now we still haven't talked about how to calculate that value, how to get that 30 seconds, but we've got our JavaScript now in a better place. So let's clean up some of this extra white space here, and now that we've got that a little bit more organized, in the next lesson, we'll go ahead and jump in and talk about how to calculate those degrees. So let's save our file, and I'll see you in the next video. Thank you for watching.

Back to the top