|
- If you are coding outside of WoofJS.com (like in Sublime), insert the Woof_JS source tag into the <head>section of your project page:
<script src="https://rawgit.com/stevekrouse/WoofJS/master/dist/woof.js"></script>
Your code now speaks Woof!
- Setup your background to be an all-black, or another dark color.
- Draw the two cartesian axis lines. In the example they are red and green, but use any colors you like.
- Declare two text labels objects, one to show the time (timeText), the other the degrees (degreeText).
- Declare the secondHand marker by using the new Circle({}) call.
- Draw the clock face. Do this by going around the 60-second clock face, and for each second, plot a dot on the circle. HINT: convert each second to radians, and then get an (x,y) pair for each dot by using Math.sin() and Math.cos().
- Get fancy by changing colors and dot-sizes in the clock face.
- Setup a forever function.
forever( function() {
YOUR CODE GOES HERE
});
This will take care of updating the clock in real time.
- In the forever function, get the current Date() and pull from it the latest hours, minutes and seconds. Display those in the timeText label.
- Now plot the secondHand marker on the clock face by converting the current second into an X,Y dot, as you did before.
- Display the radians and degrees corresponding to the second in the degreeText label.
- Add the 2PI symbol at 12 o'clock. HINT: 960 is the charCode for the PI symbol.
- Add a descriptive label on the upper left of the canvas with the name of this project, and any other info you want to show the user.
- Keep working on the project and customizing until you are satisfied.
Ask your teacher/TA to upload it to your public folder.
|
|
