Programming in Javascript - Loops and Arrays

Complete the Khan Lessons. This assignment assumes you have completed the lesson that takes you through the Khan Academy tutorials assigned to you. Your teacher will track that you did all of tutorials by looking for the green circles for each tutorial that you will see linked vertically on the right of the Khan tutorial pages. There are points for this assignment for doing the tutorials assigned to you.

Zoo Display. Make a zoo cage with 4 exact copies of your animals in it. Use loops whenever you have repeated code including (but not limited to) a loop to call your drawAnimal function four times and a loop to draw the bars of the cage. Make the cage have a decorative border with repeated patterns as the border - use loops to make the repeated patterns, as in the example shown here.

Note that there are points in all programs for your use of style:
- Comments
- Indenting and white space
- CamelCase names for variables (including functions) and parameters.
- Descriptive name for variables (including functions) and parameters.
- Use of functions to break code up
- Minimal use of global variables (instead using function parameters and local variables)
Save this program at Khan with the name lastname_zoo.
Dry Animal. Do the Khan project Make It Rain. Add these features to it:
- limit the display to a width of the first 360 pixels of the screen. Put a solid color rectangle over the right-most 40 pixels of the Khan canvas. This will allow the program to display as a phone app.
- Make the speed of the increment to the rain drop Y position be a random number between 1 and 5.
- Put your animal centered on the screen holding a flat umbrella 150 pixels wide centered over your animal. If a rain drop hits the umbrella, have the rain drop disappear right then and not continue to the bottom of the screen. All other rain drops go the bottom of the screen and then disappear.
- All rain drops that disappear go back to the top to start again.
- Set the initial Y position of the rain drops to be random from the top of the screen to the top of the umbrella.
- Have the number of rain drops be a global variable that you can set once to establish it for the program. 100 - 200 drops makes for a good animation.
- Make an array of colors, so that every drop is a random color.
- Initialize the arrays of rain drop X positions, initial Y positions, and colors using a for loop and random() function, at the beginning of the program.
Here is an example output:

Save this program at Khan with the name lastname_dyAnimal.