Difference: TurtleAnimation (1 vs. 10)

Revision 102019-02-27 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Turtle Animation - Bouncing Balls

Lab 3

Line: 88 to 88
  Turn in a link to the repl.it!
Deleted:
<
<
RequirementsGrading CommentsPointsScore
Completion of all functional requirements 60
Code broken up in small, single function functions 10
Appropriate code formatting 5
Meaningful identifier names (variables, functions) 5
Comments at the top, and on all functions 5
Document with screen capture of picture 5
Two extra features from above 10
Total 100

Solutions
 \ No newline at end of file
Added:
>
>
RequirementsGrading CommentsPointsScore
Completion of all functional requirements 60
Code broken up in small, single function functions 10
Appropriate code formatting 10
Meaningful identifier names (variables, functions) 5
Comments at the top, and on all functions 5
Two extra features from above 10
Total 100

Solutions
 \ No newline at end of file

Revision 92019-02-26 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Turtle Animation - Bouncing Balls

Lab 3

Line: 84 to 84
 
  1. Add a second ball.
  2. Make 2 balls boune off each other. You can see a simulation here https://cs.kenyon.edu/apps/KinecticJS/animateball9.html
  3. Think of something else cool!
Added:
>
>
Pleae explain what your extra features are so we know what to look for.
 Turn in a link to the repl.it!
Deleted:
<
<
Solutions
 \ No newline at end of file
Added:
>
>
RequirementsGrading CommentsPointsScore
Completion of all functional requirements 60
Code broken up in small, single function functions 10
Appropriate code formatting 5
Meaningful identifier names (variables, functions) 5
Comments at the top, and on all functions 5
Document with screen capture of picture 5
Two extra features from above 10
Total 100

Solutions
 \ No newline at end of file

Revision 82019-02-11 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Turtle Animation - Bouncing Balls

Lab 3

Line: 78 to 78
 
  1. Make it so the ball slows down over time (perhaps due to friction)
  2. 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)
  3. Add a bumper: add a fixed shape (like a circle or square) somewhere in the boundries. Have the ball bounce off this.
Changed:
<
<
  1. Add 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 appear wher you click, and remains until the ball hits it and bounces. The box then disappears, and you canmake another.
  2. Make the ball change to a random color everytime it hits the wall
>
>
  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.
  2. 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)
Changed:
<
<
  1. Add a second ball
>
>
  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
  2. Think of something else cool!
Turn in a link to the repl.it!

Revision 72019-02-09 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Turtle Animation - Bouncing Balls

Changed:
<
<

In class Lab

>
>

Lab 3

 
Due Feb 19, 11:55pm
Changed:
<
<
Moodle Link
>
>
Moodle Link
 

Goal

To create an simulation of bouncing balls.

Revision 62019-02-05 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Turtle Animation - Bouncing Balls

In class Lab

Changed:
<
<
Due Oct 4, 11:55pm
>
>
Due Feb 19, 11:55pm
 
Changed:
<
<
Moodle Link
>
>
Moodle Link
 

Goal

To create an simulation of bouncing balls.

Revision 52018-11-23 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Turtle Animation - Bouncing Balls

In class Lab

Line: 14 to 14
 

Step 1 - Animate a moving ball

Changed:
<
<
Consider the cole below that makes a round turtle, and moves it across the screen:
>
>
Consider the code below that makes a round turtle, and moves it across the screen:
  Let's review the code:

Revision 42018-10-04 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Turtle Animation - Bouncing Balls

In class Lab

Changed:
<
<
Due Oct 4, 1:55pm
>
>
Due Oct 4, 11:55pm
  Moodle Link

Goal

Revision 32018-09-27 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Turtle Animation - Bouncing Balls

In class Lab

Changed:
<
<
Due Oct 2
>
>
Due Oct 4, 1:55pm
  Moodle Link

Goal

Revision 22018-09-27 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Turtle Animation - Bouncing Balls

In class Lab

Line: 14 to 14
 

Step 1 - Animate a moving ball

Changed:
<
<
Consider the colde 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>

>
>
Consider the cole below that makes a round turtle, and moves it across the screen:
 
Added:
>
>
 Let's review the code:
  • What is "global"?
    • More... Close
      <--/twistyPlugin twikiMakeVisibleInline-->
      Global allows functions to access variables defined outside the function. Useful in certain applications to avoid passing too many variables.
      <--/twistyPlugin-->
Line: 25 to 24
 
    • More... Close
      <--/twistyPlugin twikiMakeVisibleInline-->
      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!
      <--/twistyPlugin-->
  • What is the animate() function?
    • More... Close
      <--/twistyPlugin twikiMakeVisibleInline-->
      This function gets called everytime you want to update the animation. It uses the dX and dY to update the location of the ball.
      <--/twistyPlugin-->
Changed:
<
<
Fork the program. Play around with the "distance". What happens if it runs too long?
>
>
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

Line: 53 to 54
  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:
Changed:
<
<
<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

Revision 12018-09-27 - JimSkon

Line: 1 to 1
Added:
>
>
META TOPICPARENT name="IntroToCSF2018"

Turtle Animation - Bouncing Balls

In class Lab

Due Oct 2

Moodle Link

Goal

To create an simulation of bouncing balls.

Consider:

Step 1 - Animate a moving ball

Consider the colde 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"?
    • More... Close
      <--/twistyPlugin twikiMakeVisibleInline-->
      Global allows functions to access variables defined outside the function. Useful in certain applications to avoid passing too many variables.
      <--/twistyPlugin-->
  • What is dX and dY?
    • More... Close
      <--/twistyPlugin twikiMakeVisibleInline-->
      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!
      <--/twistyPlugin-->
  • What is the animate() function?
    • More... Close
      <--/twistyPlugin twikiMakeVisibleInline-->
      This function gets called everytime you want to update the animation. It uses the dX and dY to update the location of the ball.
      <--/twistyPlugin-->
Fork the program. Play around with the "distance". What happens if it runs too long?

Step 2 - Put a box around the ball

Add the following code to draw a bounding box around the ball

<-- SyntaxHighlightingPlugin -->
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)
<-- end SyntaxHighlightingPlugin -->

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?

  • More... Close
    <--/twistyPlugin twikiMakeVisibleInline-->
    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.
    <--/twistyPlugin-->
How do we know when ball hits a wall?
  • More... Close
    <--/twistyPlugin twikiMakeVisibleInline-->
    If the ball x or y value exceeds the wall dimensions.
    <--/twistyPlugin-->
What are the wall dimensions?
  • More... Close
    <--/twistyPlugin twikiMakeVisibleInline-->
    The top is sWidth//2, the bottomis -sWidth//2, the right is sHeight//2, and the bottom is -sHeight//2
    <--/twistyPlugin-->
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)
  2. 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)
  3. Add a bumper: add a fixed shape (like a circle or square) somewhere in the boundries. Have the ball bounce off this.
  4. Add 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 appear wher you click, and remains until the ball hits it and bounces. The box then disappears, and you canmake another.
  5. Make the ball change to a random color everytime it hits the wall
  6. 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)
  7. Add a second ball
  8. Make 2 balls boune off each other. You can see a simulation here https://cs.kenyon.edu/apps/KinecticJS/animateball9.html
  9. Think of something else cool!
Turn in a link to the repl.it!

Solutions

 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2019 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback