Merge pull request #45 from raspberrypilearning/draft

Draft

en/step_1.md

@@ -1,3 +1,7 @@
+<div class="c-survey-banner" style="width:100%">
+  <a class="c-survey-banner__link" href="https://form.raspberrypi.org/f/code-editor-feedback" target="_blank">Take our survey</a> to help make our Code Editor better!
+</div>
+
 ## You will make
 
 Make an animation to propel a satellite into orbit — by hitching a ride on a rocket! Your animation will create cool graphic effects and simulate the best amount of fuel to give the rocket. 
@@ -25,7 +29,8 @@ You need to supply the rocket with enough fuel to reach the satellite orbit. Try
 
 How much fuel is just enough without too much left over?
 </div>
-<iframe src="https://trinket.io/embed/python/622b4dd113?outputOnly=true&runOption=run&start=result" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
+<iframe src="https://editor.raspberrypi.org/en/embed/viewer/rocket-launch-example" width="600" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen>
+</iframe>
 </div>
 
 --- /task ---
@@ -34,7 +39,7 @@ How much fuel is just enough without too much left over?
 
 --- print-only ---
 
-![Completed project.](images/showcase.png)
+![Completed project example of rocket ships flying into outer space.](images/showcase.png)
 
 --- /print-only ---
 

en/step_2.md

@@ -13,9 +13,9 @@ The animation needs a space backdrop with a planet to launch the rocket from.
 
 --- task ---
 
-Open the [project template](https://trinket.io/python/f2199f5a8c){:target="_blank"}.
+Open the [project template](https://editor.raspberrypi.org/en/projects/rocket-launch-starter){:target="_blank"}.
 
-If you have a Trinket account, you can click on the **Remix** button to save a copy to your `My Trinkets` library.
+### Create the screen
 
 --- /task ---
 
@@ -34,7 +34,7 @@ line_number_start: 7
 line_highlights: 8
 ---
 
-#Setup global variables    
+# Setup global variables    
 screen_size = 400   
 
 --- /code ---
@@ -55,31 +55,33 @@ line_highlights: 20
 ---
 
 def setup():   
-  #Setup your animation here   
-  size(screen_size, screen_size)   
+    # Setup your animation here   
+    size(screen_size, screen_size)   
 
 
 --- /code ---
 
 --- /task ---
 
+### Choose an image
+
 --- task ---
 
-The starter project has three different planet images and the moon provided for you. You can view these in the Trinket image library by selecting the **View and Add Images** button.
+The starter project has three different planet images and the moon provided for you. You can view these in the **Image gallery** on the left hand side of the code editor.
 
-![A plus symbol, an upload symbol, and an image symbol. The image symbol is highlighted.](images/trinket_image.png)
+![A screenshot of the code editor, with the image gallery highlighted containing images of planets and the moon.](images/image_gallery.png)
 
 **Choose:** Decide which image you want to use and make a note of the filename. For example, `orange_planet.png`.
 
 --- /task ---
 
-It's a good idea to load images in `setup()` so that they are ready when you need to use them and your animation will run quickly.
-
 --- task ---
 
+Add code to the `setup()` function to load and position your image. 
+
 The `image_mode(CENTER)` line says that you will be positioning images by giving the coordinates of the centre of the image (instead of the top left corner).
 
-Also add code to the `setup()` function to load your chosen image into a `planet` global variable. The variable needs to be global so you can use it later when you draw the planet to the screen.
+Next load your image into a global `planet` variable. The variable needs to be global so you can use it later when you draw the planet to the screen.
 
 --- code ---
 ---
@@ -91,17 +93,19 @@ line_highlights: 21-23
 ---
 
 def setup():   
-  #Setup your animation here   
-  size(screen_size, screen_size)   
-  image_mode(CENTER)   
-  global planet   
-  planet = load_image('planet.png') #Your chosen planet
+    # Setup your animation here   
+    size(screen_size, screen_size)   
+    image_mode(CENTER)  # Positions the image in the center
+    global planet   
+    planet = load_image('planet.png')  # Your chosen planet
 
 
 --- /code ---
 
 --- /task ---
 
+### Draw background
+
 --- task ---
 
 Define a `draw_background()` function, to draw the background, below the comment that tells you where it should go. 
@@ -110,7 +114,7 @@ Use `background(0)` to set the background colour to black and add an `image()` f
 
 `image(image filename, x-coordinate, y-coordinate, image_width, image_height)`
 
-The `p5` library sets global `width` and `height` variables based on the size of the screen. Use these in your code to position the planet with its centre half-way across (`width/2`) and at the bottom (`height`) of the screen.
+The line of code `from p5 import *` gives you global `width` and `height` variables based on the size of the screen. Use these in your code to position the planet with its centre half-way across (`width/2`) and at the bottom (`height`) of the screen.
 
 --- code ---
 ---
@@ -121,10 +125,10 @@ line_number_start: 14
 line_highlights: 15-17
 ---
 
-#The draw_background function goes here   
+# The draw_background function goes here   
 def draw_background():   
-  background(0) #Short for background(0, 0, 0) — black    
-  image(planet, width/2, height, 300, 300) #Draw the image
+    background(0)  # Short for background(0, 0, 0) — black    
+    image(planet, width/2, height, 300, 300)  # Draw the image
 
 
 --- /code ---
@@ -147,8 +151,8 @@ line_highlights: 30
 ---
 
 def draw():   
-  #Things to do in every frame    
-  draw_background()
+    # Things to do in every frame    
+    draw_background()
 
 --- /code ---
 
@@ -160,4 +164,6 @@ def draw():
 
 --- /task ---
 
+If you have a Raspberry Pi account, on your code editor you can click on the **Save** button to save a copy of your project to your Projects.
+
 --- save ---

en/step_3.md

@@ -15,7 +15,7 @@ Each time a new frame is drawn, the rocket needs to move up the screen to create
 
 The starter project has a rocket image provided for you. 
 
-![Image of the rocket in the Trinket image library.](images/trinket_rocket_image.png)
+![Image of the rocket in the code editor image gallery.](images/rocket_image.png)
 
 --- /task ---
 
@@ -33,17 +33,19 @@ line_highlights: 24, 26
 ---
 
 def setup():   
-  #Setup your animation here   
-  size(screen_size, screen_size)   
-  image_mode(CENTER)   
-  global planet, rocket   
-  planet = load_image('planet.png')    
-  rocket = load_image('rocket.png')    
+    # Setup 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 ---
 
+### 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.
 
 --- task ---
@@ -59,9 +61,9 @@ line_number_start: 7
 line_highlights: 9
 ---
 
-#Setup global variables    
+# Setup global variables    
 screen_size = 400    
-rocket_y = screen_size #Start at the bottom
+rocket_y = screen_size  # Start at the bottom
 
 --- /code ---
 
@@ -82,12 +84,11 @@ line_number_start: 11
 line_highlights: 12-16 
 ---
 
-#The draw_rocket function goes here   
+# 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_y  # Use the global rocket_y variable    
+    rocket_y -= 1  # Move the rocket    
+    image(rocket, width/2, rocket_y, 64, 64)    
 
 
 --- /code ---
@@ -103,14 +104,14 @@ Call your new `draw_rocket()` in the `draw()` function so that the rocket gets r
 language: python
 filename: main.py
 line_numbers: true
-line_number_start: 34 
-line_highlights: 37 
+line_number_start: 33 
+line_highlights: 36 
 ---
 
 def draw():   
-  #Things to do in every frame   
-  draw_background()   
-  draw_rocket()   
+    # Things to do in every frame   
+    draw_background()   
+    draw_rocket()   
 
 
 --- /code ---
@@ -121,7 +122,7 @@ def draw():
 
 **Test:** Run your code to check that the rocket starts at the bottom of the screen and moves up each frame.
 
-![Image of the rocket half way up the screen.](images/trinket_rocket_fly.gif)
+![Animation of the rocket flying half way up the screen.](images/rocket_fly.gif)
 
 --- /task ---
 

en/step_4.md

@@ -18,14 +18,12 @@ You can create cool effects by using a `for` loop to draw lots of shapes in each
 <p style="border-left: solid; border-width:10px; border-color: #0faeb0; background-color: aliceblue; padding: 10px;">
 Coding is used to make <span style="color: #0faeb0">**graphic effects**</span> for movies and games. It's much quicker to write code than to draw each frame of an animation individually. </p>
 
+### Draw your exhaust
+
 Drawing lots of yellow ellipses at different `y` positions creates an exhaust trail with a round bottom.
 
 --- task ---
 
-A `for` loop repeats a piece of code once for every item it is given. To run the code in a `for` loop a certain number of times, you can use the `range()` function. For example, `range(5)` creates a sequence of five numbers starting from 0, so [0, 1, 2, 3, 4].
-
-Each time the `for` loop repeats, it sets a variable to the current item so that you can use it in the loop. 
-
 Update your `draw_rocket()` function to include a `for` loop that repeats the drawing of `25` exhaust ellipses. The **loop variable** `i` gets added to `rocket_y` to draw each ellipse further below the rocket. 
 
 --- code ---
@@ -34,27 +32,32 @@ language: python
 filename: main.py - draw_rocket()
 line_numbers: true
 line_number_start: 12
-line_highlights: 16-22
+line_highlights: 16-20
 ---
 
 def draw_rocket():
-
-  global rocket_y   
-  rocket_y -= 1   
+    global rocket_y   
+    rocket_y -= 1   
 
-  no_stroke() #Turn off the stroke
+    no_stroke()  # Turn off the stroke
 
-  for i in range(25): #Draw 25 burning exhaust ellipses   
-    fill(255, 255, 0) #Yellow   
-    ellipse(width/2, rocket_y + i, 8, 3) #i increases each time the loop repeats    
+    for i in range(25):  # Draw 25 burning exhaust ellipses   
+        fill(255, 255, 0)  # Yellow   
+        ellipse(width/2, rocket_y + i, 8, 3)  # i increases each time the loop repeats    
 
-  image(rocket, width/2, rocket_y, 64, 64)
+    image(rocket, width/2, rocket_y, 64, 64)
 
 
 --- /code ---
 
 --- /task ---
 
+A `for` loop repeats a piece of code once for every item it is given. 
+
+To run the code in a `for` loop a certain number of times, you can use the `range()` function. For example, `range(5)` creates a sequence of five numbers starting from 0, so [0, 1, 2, 3, 4].
+
+Each time the `for` loop repeats, it sets a variable to the current item so that you can use it in the loop. 
+
 --- task ---
 
 **Test:** Run your code to check the rocket has a new exhaust trail.
@@ -63,24 +66,26 @@ def draw_rocket():
 
 --- /task ---
 
+### Add a gradient
+
 The `i` variable can also be used to create a colour gradient with less green in each ellipse that gets drawn.
 
 --- task ---
 
-Change the call to `fill()` to set the amount of green to `255 - i*10` so that the first ellipse has equal amounts of red and green and the last ellipse has very little green.
+Change the call to `fill()` to set the amount of green to `255 - i * 10` so that the first ellipse has equal amounts of red and green and the last ellipse has very little green.
 
 --- code ---
 ---
 language: python
 filename: main.py - draw_rocket()
 line_numbers: true
-line_number_start: 19
-line_highlights: 20
+line_number_start: 18
+line_highlights: 19
 ---
 
-  for i in range(25):   
-    fill(255, 255 - i * 10, 0) #Reduce the amount of green    
-    ellipse(width/2, rocket_y + i, 8, 3)
+    for i in range(25):   
+        fill(255, 255 - i * 10, 0)  # Reduce the amount of green    
+        ellipse(width/2, rocket_y + i, 8, 3)
 
 --- /code ---
 
@@ -92,6 +97,8 @@ line_highlights: 20
 
 --- /task ---
 
+### Create a smoke effect
+
 The smoke exhaust trail is created by drawing lots of slightly transparent grey ellipses at different positions in each frame. 
 
 ![A slow animation of the smoke effect.](images/rocket_smoke.gif)
@@ -107,19 +114,19 @@ In each frame of the animation, 20 ellipses of random sizes will be drawn at ran
 language: python
 filename: main.py - draw_rocket()
 line_numbers: true
-line_number_start: 19
-line_highlights: 23-26
+line_number_start: 18
+line_highlights: 22-24
 ---
 
-  for i in range(25):  
-    fill(255, 255 - i * 10, 0)   
-    ellipse(width/2, rocket_y + i, 8, 3)    
+    for i in range(25):  
+        fill(255, 255 - i * 10, 0)   
+        ellipse(width/2, rocket_y + i, 8, 3)    
 
-  fill(200, 200, 200, 100) #Transparent grey   
-  for i in range(20): #Draw 20 random smoke ellipses    
-    ellipse(width/2 + randint(-5, 5), rocket_y + randint(20, 50), randint(5, 10), randint(5, 10))    
-
-  image(rocket, width/2, rocket_y, 64, 64)
+    fill(200, 200, 200, 100)  # Transparent grey   
+    for i in range(20):  # Draw 20 random smoke ellipses    
+        ellipse(width/2 + randint(-5, 5), rocket_y + randint(20, 50), randint(5, 10), randint(5, 10))    
+    
+    image(rocket, width/2, rocket_y, 64, 64)
 
 --- /code ---
 
@@ -129,7 +136,7 @@ line_highlights: 23-26
 
 **Test:** Run your program and check the exhaust fumes are visible. 
 
-![A close-up of the rocket and exhaust trail with added smoke.](images/rocket_exhaust_circles.gif)
+![An animation of the rocket and exhaust trail with added smoke.](images/rocket_exhaust_circles.gif)
 
 --- /task ---