TurtleAnimation < Main

---+ Turtle Animation - Bouncing Balls
---+++ Lab 3
---++++++ Due Oct 8, 11:55pm

[[https://moodle.kenyon.edu/mod/assign/view.php?id=53290][Moodle Link]]
---+++ [[https://moodle.kenyon.edu/mod/assign/view.php?id=21248][Goal]]

To create an simulation of bouncing balls.

Consider:
   * https://cs.kenyon.edu/apps/KinecticJS/Gravity4.html
   * https://cs.kenyon.edu/apps/KinecticJS/animateball9.html
---+++ Step 1 - Animate a moving ball

Consider the code below that makes a round turtle, and moves it across the screen:

<iframe frameborder="0" height="500px" src="https://repl.it/@JimSkon/SimpleBallAnimate?lite=true" width="100%"></iframe>
Let's review the code:
   * What is "global"?
      * %TWISTY{}%Global allows functions to access variables defined outside the function. Useful in certain applications to avoid passing too many variables.%ENDTWISTY%
   * What is dX and dY?
      * %TWISTY{}%This is the amount to move the ball in the X or Y direction each time. We are picking a randoms value. A negative value will move things backword. Try it! %ENDTWISTY%
   * What is the animate() function?
      * %TWISTY{}%This function gets called everytime you want to update the animation. It uses the dX and dY to update the location of the ball.%ENDTWISTY%
Fork the program. Play around with the "distance".

Try this: Make the loop run forever. Negate Dx and Dy if ballX is every greater then 100, or ballX is ever less then -100.
---+++ Step 2 - Put a box around the ball

Add the following code to draw a bounding box around the ball
<sticky>
%CODE{"python"}%
sWidth=400
sHeight=400

def makeBoundry(width,height):
  boundry=turtle.Turtle()
  boundry.penup()
  boundry.speed(5)
  boundry.hideturtle()
  boundry.goto(-width//2,-height//2)
  boundry.color("white")
  boundry.down()
  for i in range(4):
    boundry.forward(width)
    boundry.left(90)

makeBoundry(sWidth,sHeight)
%ENDCODE%</sticky>

---+++ Step 3 - Create a timer for the animation

Simply running a loop is problematic because it wastes time running continuously. This rules out capturing user events like keyboard presses and mouse clicks. What we can do is set up a timer that triggers a function to be called after a given amount of time. The timer is based on milliseconds (1/1000 of a second). Try the code below (click on the colsole to see the resulting message:

<iframe frameborder="0" height="500px" src="https://repl.it/@JimSkon/TimerDemo?lite=true" width="100%"></iframe>

Note that the function call screen.ontimer(animate,1000) causes the function animate to be called after 1000 milliseconds (one second). Then in the function animate the command isdone again, scheduling another call one second after the previous, keeping things going.
---+++ Step 4 - Add a timer to the ball animation

Next we wish to use the timer to cause the ball to animate (move). Remove the for loop from the code, and add in the time code to animate the ball. Change the ball speed to 0 so that the built in ball animation doesnot slow down the animation.
---+++ Step 5 - Make the ball bounce off the walls of the boundry box.

What happens when a ball hits a wall?
   * %TWISTY{}%The direction of the ball reverses. Thus if the ball hits a side wall dX becomes -dX and if it hits a bottom or top wall dY becomes -dY.%ENDTWISTY%
How do we know when ball hits a wall?
   * %TWISTY{}%If the ball x or y value exceeds the wall dimensions.%ENDTWISTY%
What are the wall dimensions?
   * %TWISTY{}%The top is sWidth//2, the bottomis -sWidth//2, the right is sHeight//2, and the bottom is -sHeight//2%ENDTWISTY%
Add code to the animate that determine if a bountry has been hit, and reverses the direction of the ball.
---+++ Step 6 - Fix the the bounce over-shoot

Notice that the ball goes slightly beyond the boundry of the screen. Fix this.
---+++ Step 7 - Add some features

Choose at least two features to add:
   1 Make it so the ball slows down over time (perhaps due to friction)
   1 Make it so when you do a mouse click speeds the ball up, or down, or changes it randomly (see: https://repl.it/@JimSkon/TurtleMouseClickExample)
   1 Add a bumper: add a fixed shape (like a circle or square) somewhere in the boundries. Have the ball bounce off this.
   1 Have a boundry appear when you click on the screen and have it bounce off this (only one at a time is reasonable). You could make it so a box will appear wher your click, and remains until the ball hits it and bounces. The box then disappears, and you can make another.
   1 Make the ball change to a random color everytime it hits the wall.
   1 Add gravity so the ball bounces off the floor.. See how here: https://processing.org/examples/bouncingball.html. Also an example here: https://cs.kenyon.edu/apps/KinecticJS/Gravity4.html (obviously too complete for now)
   1 Add a second ball.
   1 Make 2 balls boune off each other. You can see a simulation here https://cs.kenyon.edu/apps/KinecticJS/animateball9.html
   1 Think of something else cool!
Pleae explain what your extra features are so we know what to look for.

Turn in a link to the repl.it!

<table border="1" cellpadding="0" cellspacing="0" id="table2" rules="all"> <tbody> <tr><th bgcolor="#687684" valign="top">Requirements</th><th bgcolor="#687684" valign="top">Grading Comments</th><th bgcolor="#687684" valign="top">Points</th><th bgcolor="#687684" valign="top">Score</th></tr> <tr> <td bgcolor="#ffffff" valign="top">Completion of all functional requirements</td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top">60</td> <td bgcolor="#ffffff" valign="top"> </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top">Code broken up in small, single function functions</td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top">10</td> <td bgcolor="#edf4f9" valign="top"> </td> </tr> <tr> <td bgcolor="#ffffff" valign="top">Appropriate code formatting</td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top">10</td> <td bgcolor="#ffffff" valign="top"> </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top">Meaningful identifier names (variables, functions)</td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top">5</td> <td bgcolor="#edf4f9" valign="top"> </td> </tr> <tr> <td bgcolor="#ffffff" valign="top">Comments at the top, and on all functions</td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top">5</td> <td bgcolor="#ffffff" valign="top"> </td> </tr> <tr> <td bgcolor="#ffffff" valign="top">Two extra features from above</td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top">10</td> <td bgcolor="#ffffff" valign="top"> </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top">Total</td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top">100</td> <td bgcolor="#edf4f9" valign="top"><br /><br /></td> </tr> </tbody> </table> [[SolutionWeb.TurtleAnimationSolutions][Solutions]]
Edit | Attach | ~~Watch~~ | Print version | History: r11 < r10 < r9 < r8 < r7 | Backlinks | View topic | Raw edit | More topic actions
Topic revision: r11 - 2019-09-30 - JimSkon