University of South Florida Spirograph HTML5 & Javascript Code Project

Hi need help with HTML5 and Javascript code to do the following:

Using HTML5 Canvas, you are going to create a Spirograph. Start with a blank Canvas, and draw a spirograph pattern. To do this you will first need the equations that govern the location of the pen in a Spirograph. These are

x = (R+r)*cos(t) – (r+O)*cos(((R+r)/r)*t)

y = (R+r)*sin(t) – (r+O)*sin(((R+r)/r)*t)

where
R is the radius of the outer (fixed) circle,
r is the radius of the rotating (inner) circle, and
O is the offset of the pen from the center of the inner circle.

Since a pen moves the Spirograph, t is a variable that starts at 0 and increases (you can test different increments) to give the x and y location of the pen.

Increasing t will eventually start drawing extending the same line that was previously drawn. You should have a single button to start the Spirograph drawing. Valid random numbers for R, r, and O should be entered in text boxes by the user. If you have the user enter these numbers, be sure to seed the text box and indicate and validate acceptable ranges of values for R, r, and O.

Please note r cannot be greater than R.