|
- 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.
- Declare the two cartesian grid lines using the new Line({}) call. In the example they are red and green, but use any colors you like.
- Create a text label on the upper left of the screen using the new Text({}) call.
- Setup a forever function.
forever( function() {
YOUR CODE GOES HERE
});
This will take care of showing your mouse position in real time.
- In the forever function, update the mousePosition text label to show the X and Y coordinates of the mouse.
- In the top of the program, before the forever function, declare the 3 lines that will connect with the position of your mouse: xLine (red), yLine (green), rLine (blue). You'll then modify them inside the forever function.
- Start with the xLine. Back in the forever function, update the endpoints for the xLine to start on the Y axis and end on the mouse position.
- Once you get it working, you may want to group the 4 endpoint variables into one expression as follows:
[x,y,x1,y1] = [a,b,c,d]
This will help make your program readable and easier to understand.
- Repeat for the other two lines. Does everythig look good so far?
- Declare a 2nd textLabel to show angleDegrees.
- Calculate degrees for the mouse X and Y position using a Math.atan2 trig function. The degrees should be a number between 0 and 360. Show the degrees in the angleDegrees label.
- Calculate radians (between 0 and 2PI) and show that as well.
- 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/CIT to upload it to your public folder.
|
|
