JavaScript Graphics

Back to index
Your browser is broken ASSIGNMENT:
Inspect the code for the example displayed to the left. Experiment by assigning different values to the variable named sides. You will quickly discover how easy it is to change the type of polygon displayed. At what point does a polygon begin to look more like a circle than a multi-sided object?

Notice that the function used in this demo takes four values as input. The first two variables denote the center of the polygon, the next the size, and the last the number of sides. There is no need for the sides variable to exist in this applet and so you should eliminate it and simply feed numbers to the poly function like this:


    poly(150,150,30,12);
    
There is no limit to the number of times that poly can be called and, FYI, you will need to call it nine times in order to complete this assignment.

Your assignment is to create a 3x3 array of polygons with the following number of sides: 3, 7, 10, 12, 18, 20, 30, 60, 100. Your canvas area should be 300x300 with your polygons evenly arranged in that space.



ARTISTIC EXTENSION:
Using the poly function, create an interesting and original design which includes at least sixty polygons of different sizes, shapes, and colors. Remember that polygons can be filled or outlined and that you don't have to use black as your background color. Also keep in mind that it is perfectly acceptable to use a loop to repeatedly call the poly function and that arrays of values can be created to expedite the display of polygons.