From d6ca3b8b9eff3602bf026ba5ccf268d041b0bd38 Mon Sep 17 00:00:00 2001 From: Laura Sach <5183697+lawsie@users.noreply.github.com> Date: Tue, 22 Oct 2024 11:06:10 +0100 Subject: [PATCH] Update step 3 --- en/step_2.md | 29 +++++++------ en/step_3.md | 115 +++++++++++++++++++++++++++++++++------------------ 2 files changed, 88 insertions(+), 56 deletions(-) diff --git a/en/step_2.md b/en/step_2.md index 5b0d4b436..0b7e106f4 100644 --- a/en/step_2.md +++ b/en/step_2.md @@ -35,8 +35,8 @@ Add this function to the list of things to `draw()` in every frame. --- language: python line_numbers: true -line_number_start: 23 -line_highlights: 25 +line_number_start: 25 +line_highlights: 27 --- def draw(): @@ -52,19 +52,11 @@ def draw(): **Test:** Run your code and you should see a black square. --- /task --- -**Tip**: The three numbers in `background(0, 0, 0)` are red, green and blue values. If you'd like your version of space to be a different colour, try changing these numbers to any whole number between 0 and 255. ---- task --- - -Display an image of a planet. -The `image()` function needs the following data: +--- task --- -- image filename -- x coordinate -- y coordinate -- image width -- image height +Add a line of code to display an image of a planet. --- code --- --- @@ -78,6 +70,14 @@ def draw_background(): image(planet, screen_size/2, screen_size, 300, 300) --- /code --- +The `image()` function needs the following data: + +- image filename - we have already loaded the planet image +- x coordinate - we have already set the screen size +- y coordinate +- image width +- image height + --- /task --- --- task --- @@ -102,8 +102,8 @@ If you want to change the planet image, change `planet.png` in the code to the f --- language: python line_numbers: true -line_number_start: 18 -line_highlights: 23 +line_number_start: 17 +line_highlights: 22 --- def setup(): # Set up your animation here @@ -115,4 +115,3 @@ def setup(): --- /task --- ---- save --- \ No newline at end of file diff --git a/en/step_3.md b/en/step_3.md index 4a2bcd9b7..e30fde953 100644 --- a/en/step_3.md +++ b/en/step_3.md @@ -1,50 +1,54 @@ -## Liftoff! - -
-
-Each time a new frame is drawn, the rocket needs to move up the screen to create an animation effect. -
-
- -![A rocket flying at a steady speed from the bottom to the top of the screen.](images/fly.gif){:width="300px"} - -
-
- ---- task --- +## Lift off! The starter project has a rocket image provided for you. ![Image of the rocket in the code editor image gallery.](images/rocket_image.png) ---- /task --- - --- task --- - Add code to the `setup()` function to load the rocket image into a `rocket` global variable. +
+ --- code --- --- language: python filename: main.py line_numbers: true -line_number_start: 20 -line_highlights: 24, 26 +line_number_start: 18 +line_highlights: 22, 24 --- def setup(): - # Setup your animation here + # Set up your animation here size(screen_size, screen_size) image_mode(CENTER) global planet, rocket planet = load_image('planet.png') rocket = load_image('rocket.png') +--- /code --- +--- /task --- + +--- task --- + +Add a `rocket_position` global variable to keep track of the rocket's `y` position. + +--- code --- +--- +language: python +line_numbers: true +line_number_start: 6 +line_highlights: 8 +--- + +# Setup global variables +screen_size = 400 +rocket_position = screen_size + --- /code --- --- /task --- -### Make the rocket fly The `y` position of the rocket will start at 400 (the screen height) and then decrease by 1 each time a new frame is drawn. @@ -67,28 +71,26 @@ rocket_y = screen_size # Start at the bottom --- /code --- +The `rocket_position` is set to the `screen_size` at the start so that the rocket appears right at the bottom edge of the screen. + --- /task --- --- task --- -Define a `draw_rocket()` function to change the rocket's `y` position and redraw it. - -`rocket_y -= 1` is a shorter way of saying `rocket_y = rocket_y - 1`. +Define a `draw_rocket()` function to make the rocket appear on the screen. --- code --- --- language: python -filename: main.py line_numbers: true -line_number_start: 11 -line_highlights: 12-16 +line_number_start: 9 +line_highlights: 10-12 --- # The draw_rocket function goes here def draw_rocket(): - global rocket_y # Use the global rocket_y variable - rocket_y -= 1 # Move the rocket - image(rocket, width/2, rocket_y, 64, 64) + global rocket_position + image(rocket, width/2, rocket_position, 64, 64) --- /code --- @@ -97,21 +99,20 @@ def draw_rocket(): --- task --- -Call your new `draw_rocket()` in the `draw()` function so that the rocket gets redrawn every frame. +Call the `draw_rocket()` function. --- code --- --- language: python -filename: main.py line_numbers: true -line_number_start: 33 -line_highlights: 36 +line_number_start: 28 +line_highlights: 31 --- -def draw(): - # Things to do in every frame - draw_background() - draw_rocket() +def draw(): + # Things to do in every frame + draw_background() + draw_rocket() --- /code --- @@ -120,10 +121,42 @@ def draw(): --- task --- -**Test:** Run your code to check that the rocket starts at the bottom of the screen and moves up each frame. +**Test:** Run your code and check that the rocket appears at the bottom of the image. -![Animation of the rocket flying half way up the screen.](images/rocket_fly.gif) --- /task --- ---- save --- + +Each time a new frame is drawn, you need to move the rocket one pixel up the screen to create an animation effect. + + +--- task --- + +The `rocket_position` of the rocket will start at 400 (the screen height) and then decrease by 1 each time a new frame is drawn. + +--- code --- +--- +language: python +line_numbers: true +line_number_start: 8 +line_highlights: 11 +--- + +# The draw_rocket function goes here +def draw_rocket(): + global rocket_position + rocket_position = rocket_position - 1 + image(rocket, width/2, rocket_position, 64, 64) +--- /code --- + +--- /task --- + + +--- task --- + +**Test:** Run your code to check that the rocket blasts off from the bottom of the screen. + + +![A rocket flying at a steady speed from the bottom to the top of the screen.](images/fly.gif){:width="300px"} + +--- /task --- \ No newline at end of file