Gravity changes speed, and speed changes position
Velocity is how far, and in which direction, a thing moves on each frame. Gravity is a small number added to the velocity on every frame. Together they make a ball speed up as it falls, and bounce when it lands.
The same two lines of arithmetic move almost everything in a simple game.
By the end of this lesson
Note
I can move a thing with velocity and gravity, one step per frame.
Key words
| Word | What it means |
|---|---|
| Velocity | how far a thing moves on each frame, and which way |
| Gravity | a number added to the velocity on every frame |
| Step | one frame of movement worked out with arithmetic |
| Floor | the y value where a falling thing lands |
| Bounce | turning the velocity round and making it smaller |
The cells students fill in are left blank in this preview.
Two lines move a falling thing
On every frame, a falling thing does two steps in this order. First the gravity is added to the speed. Then the speed is added to the position.
speed = speed + gravity, then y = y + speed. In a web page, y grows downwards, so a positive speed means falling.
Worked example: gravity 1, from rest
| Frame | Speed (old + 1) | Position y (old + speed) |
|---|---|---|
| Start | 0 | 0 |
| 1 | 1 | 1 |
| 2 | 2 | 3 |
| 3 | 3 | 6 |
| 4 | 4 | 10 |
| 5 | 5 | 15 |
The cells students fill in are left blank in this preview.
Try it: print a ball's fall
<pre id="out"></pre>Follow one falling star for ten frames
docker exec jupyter python3 steps/fall.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
The script follows a falling star
The script reads GRAVITY from game/game.js, which is 0.15. It then does the two lines of arithmetic for ten frames and prints each one.
On frame 1 the speed is 0.15 and y is 0.15. On frame 10 the speed is 1.50 and y is 8.25. Each frame moves further than the one before, which is why a falling star seems to speed up.
Find where the game uses GRAVITY
docker exec jupyter grep -n "GRAVITY" game/game.jsShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
The constant is set once and used once
The search prints two lines. Line 3 is var GRAVITY = 0.15;, the named number. Line 74 adds it to a star's speed, scaled by the level.
One named number means one place to change. Lowering it makes the game gentler, and raising it makes the stars hard to catch.
A bounce flips and shrinks the speed
When a ball reaches the floor, two things happen. Its y is put back on the floor, so it does not sink in. Its speed is multiplied by a negative number, such as -0.5, so it turns round and loses half its strength.
The lab's game has no bounce, because a star that is missed is simply lost. The rule is the same one that many games use for balls.
Worked example: gravity 1, bounce 0.5
| Frame | Speed after the step | Position y after the step | What happened |
|---|---|---|---|
| 13 | 13 | 91 | Still falling |
| 14 | 14, then -7 | 105, put back to 100 | Landed and bounced |
| 15 | -6 | 94 | Moving up |
| 16 | -5 | 89 | Slowing down |
| 20 | -1 | 79 | Almost at the top |
| 21 | 0 | 79 | At the top of the bounce |
The cells students fill in are left blank in this preview.
A common mistake
Warning
Many people think gravity moves a thing directly. It does not. Gravity changes the speed, and the speed changes the position. If gravity moved the position, the ball would fall at a steady pace and never speed up.