Programming in Javascript - Animation


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. There are points for this assignment for doing the tutorials assigned to you.

  1. 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.

  2. 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.