\$35.00

Category:

## Description

Resources

http://www.w3schools.com/html/html5_canvas.asp

Overview

In this lab you will begin experimenting with writing your own functions. Functions allow you to organize and name blocks of code that you write, so that you may reuse them. This behavior allows your code to be neater, and allows you to keep blocks of code isolated from one another. In this lab you will write several functions and then use them in your main JavaScript.

Lab work

Go and view a completed version of the web application you are going to build today at http://mylinux.langara.bc.ca/~jmckeescott/1045/lab6.html

Create a new HTML web page and a new JavaScript file and link them. Your HTML file should contain all of the basic tags required to pass validation. Follow the steps below to create your own variation of the web app shown in step 1.

In your JavaScript, write a function called toRad(angle) that takes an angle in degrees as a parameter, and returns the angle in radians. Using this function will allow you to specify all of your angles in degrees when we are drawing on the canvas. The formula to convert degrees to radians is:

Write a function called isValidNumber(inputNum, validMin, validMax). This function will take in a number (the inputNum parameter) and return true if the number is greater than or equal to validMin and less than or equal to validMax. The function should return false if the number is outside of this range, or if inputNum is not a number.

Write a function called drawObject(x, y) which draws your shape on the canvas at the location given by the parameters x and y. You can choose to draw whatever shape you would like (it does not have to be cats!).

NOTE: If in this function you modify the local coordinate system in any way, it is important that you use save and restore so that the coordinate system is restored back to default before the function exits.

Now, we are going to put all of our hard work together. Write the JavaScript to complete the following steps:

Prompt the user to enter a number of objects to draw to draw on the canvas (let’s call this number N).

Verify that the input is valid using the function you created in step 3. If the input is not valid, inform the user that input is not valid, and ask them for another value. N should be a reasonable number of objects to draw on the canvas

Prompt the user to enter a distance (let’s call it R). This will be how far from the center of the circle you draw each shape.

Verify that the input is valid, again using your function from step 3. If the input is not valid, inform the user that the input is not valid, and ask them for another value. R cannot be too large or your shapes will be drawn off the canvas. R cannot be negative.

Finally, draw N of your shapes in a circle on the canvas, with each shape R distance away from the center of the canvas. The objects should all be equally spaced along the circle.

Here is a sample screenshot with R = 100 and N = 4

Image

Submissions

Submit to D2L ONE zip/archive file containing all of your files from this lab

If you do not zip your files, you will receive ZERO for this lab (http://www.wikihow.com/Zip-Files-Together)

Marks will be assigned as follows:

4 marks for toRad(angle)

7 marks for isValidNumber(inputNum, validMin, validMax)

6 marks for drawObject(x, y)

13 marks for step 6

1 mark each for A and C

3 marks each for B and D

5 marks for E

Note: In step 5 you must use all of the functions you created in steps 1-4 or you will receive 0 for steps B, D, and E