Programming in Javascript - Drawing and Animation

This assignment will introduce you to the computer programming in Javascript using the Khan Academy materials.

Complete the Khan Lessons. This assignment assumes you have completed the lesson that takes you through the Khan Academy introduction to programming, drawing, and animation material. Your teacher will track that you did all of tutorials.

Complete the Following Steps.

1. Draw Initial.Do the Draw H exercise. Select your code and copy it so that you can paste it. Go to the Create Program screen. Paste into the new program the final code from the draw H exercise. Add your own code to draw the first letter of your name in blocky rectangles (it doesn't have to be pretty, but it must resemble your initial). If your first initial is H, use your last initial; if they are both H, then draw a C. To get a diagonal block line (e.g. in the letter K), simulate it with many small blocks along a diagonal. Remove the strokes and add a fill color of your choosing. Your program should draw the H AND your initial. Save this at Khan with the program name lastname_myInitial, where lastname is your last name.
   
   
2. Funny Face . Do from the Funny Face exercise. Select your code and copy it so that you can paste it. Go to the Create Program screen. Paste into the new program the final code from the Funny Face exercise. Add code to draw your initials (first and last) in lines. Change the color of your initials only. Save this at Khan with the program name lastname_funnyFace, where lastname is your last name.
   
   
3. Draw Your House/Apartment . Go to the Create Program screen. Use Khan javascript drawing commands to draw a picture of your family's house or apartment building. It should have the house and the yard or street in front. Use at least four different shapes like rect(), ellipse(), and triangle(). You can go to the Khan documentation to find other shapes to use. Use fill() and stroke() to color them. Check the "Documentation" tab on the Khan programming window and click for examples. A basic drawing will get most of the points, but there are discretionaty points for a thorough drawing. Save this at Khan with the program name lastname_myHouse, where lastname is your last name.
   
   
4. Draw An Animal. Go to the Create Program screen. Use drawing commands to create a wild looking animal. You can try to draw one of your favorite animals, or if you really want to go wild, invent a new animal that only exists in your head. Your animal should have a background on the screen (solid color or image) as in the example to the right. Go to the Khan documentation to find shapes to use. A basic drawing will get most of the points, but there are discretionaty points for a thorough drawing. Save this at Khan with the program name lastname_myAnimal, where lastname is your last name.
   
   
5. Dancing Animals. You made two animals in the variables Khan coding challenges: a bunny and a frog. You also made an animal in the last assignment. Put all of the animals (bunny, frog, and your animal) on one screen (i.e. in the same program). Change the program to use these 6 global veriables: bunnyX, bunnyY, frogX, frogY, myAnimalX, myAnimalY. All drawings should be such that if you change one of the variables for an animal, the whole animal changes position on the sceen. For instance, this code:

   var bodyX = 200;
   var bodyY = 220;
   
   fill(240, 209, 36);
   ellipse(bodyX, bodyY, 118, 106); // body
   ellipse(bodyX, bodyY-70, 59, 47); // face
     

   will shift both ellipses if you change the value of bodyX and/or bodyY. Add a colored backdrop with at least two shapes (e.g. a sun) that are at fixed locations. After you get the animals to be drawn relative to the variables, change the six variables to have random values (use the documentation to discover how the random function works). A succesful program will have the animals appear at different locations every time you click the "Restart" button on the far right under the results pane in the Khan programming environment. Click fast and watch your animals dance around! Save this program at Khan with the name lastname_dancingAnimials.
   
   
6. Racing Animals. Now have your animals race. Line them up initially along the left edge of the screen. Add four global variables: bunnySpeed, frogSpeed, and myAnimalSpeed. Set each variable to a random value between 1 and 5. Animate the drawing by having the X positions of the animals add their corresponding Speed value each time at the end of the draw loop. You should see your animals race horizontally across the screen! Use the Restart button on the lower right of the Khan screen to race again - probably with different results. Save this program at Khan with the name lastname_racingAnimals.