Replace GIFs for code runs with SIM blocks. (#487)

docs/courses.md

@@ -21,7 +21,7 @@ A collection of courses built for the @boardname@.
   "name": "micro:bit of Things",
   "description": "A hands-on course about the micro:bit and what you can do with it.",
   "url":"https://sites.google.com/view/microbitofthings",
-  "imageUrl": "https://lh4.googleusercontent.com/T_abGPJXNGVRNoKBmu6eZEoAkZXj1JubbIsbimSgF-Yc1BA2fUgXkrtMAmawjWlOU801fUnZ=w371"
+  "imageUrl": "/static/courses/microbit-of-things.jpg"
 }]
 ```
 

docs/courses/csintro/coordinates/project.md

@@ -19,11 +19,29 @@ Your project might use variables to store the values of sprites, which are speci
 
 ## Project Ideas
 
-![Firework Example](/static/courses/csintro/coordinates/firework.gif)
 ### Firework screensaver
 
 This project uses a for loop with the plot/unplot blocks to create a symmetrical design on the screen. This student used a subtraction operation to get a variable that decreases as the index variable in the loop increases.
 
+```sim
+basic.forever(() => {
+    for (let x = 0; x <= 4; x++) {
+        led.plot(x, 0)
+        led.plot(0, 4 - x)
+        led.plot(4 - x, 4)
+        led.plot(4, x)
+        basic.pause(50)
+        led.unplot(x, 0)
+        led.unplot(4 - x, 4)
+        led.unplot(0, 4 - x)
+        led.unplot(4, x)
+        basic.pause(50)
+    }
+})
+```
+
+This project uses a for loop with the plot/unplot blocks to create a symmetrical design on the screen. This student used a subtraction operation to get a variable that decreases as the index variable in the loop increases.
+
 ```blocks
 basic.forever(() => {
     for (let x = 0; x <= 4; x++) {
@@ -41,13 +59,46 @@ basic.forever(() => {
 })
 ```
 
-![Cascade Example](/static/courses/csintro/coordinates/cascade.gif)
 ### Cascade screensaver
 
 This example creates a diagonal cascading effect across the screen. Note the use of a variable (speed) to allow you to easily change the speed of the animation by changing just one number value.
 
-```blocks
+```sim
+let reverse = 0
+let speed = 10
+let inner = 0
+let outer = 0
+basic.forever(() => {
+    for (let outer = 0; outer <= 4; outer++) {
+        reverse = 4 - outer
+        for (let inner = 0; inner <= 4; inner++) {
+            led.plot(outer, reverse)
+            basic.pause(speed)
+            led.plot(reverse, outer)
+            basic.pause(speed)
+            led.plot(reverse - inner, reverse)
+            basic.pause(speed)
+            led.plot(reverse, reverse - inner)
+            basic.pause(speed)
+        }
+    }
+    for (let outer = 0; outer <= 4; outer++) {
+        reverse = 4 - outer
+        for (let inner = 0; inner <= 4; inner++) {
+            led.unplot(outer, reverse)
+            basic.pause(speed)
+            led.unplot(reverse, outer)
+            basic.pause(speed)
+            led.unplot(reverse - inner, reverse)
+            basic.pause(speed)
+            led.unplot(reverse, reverse - inner)
+            basic.pause(speed)
+        }
+    }
+})
+```
 
+```blocks
 let reverse = 0
 let speed = 0
 let inner = 0
@@ -82,10 +133,41 @@ basic.forever(() => {
 })
 speed = 10
 ```
-![Dodge Ball Example](/static/courses/csintro/coordinates/dodge-ball.gif)
-### Dodge ball game 
+
+### Dodge ball game
+
 This is a Dodge Ball game that uses one sprite (dodger) to try to avoid another sprite (ball). You use the A and B buttons to move the dodger to avoid the balls that are falling from the top of the screen.
 
+```sim
+let dodger: game.LedSprite = null
+let ball: game.LedSprite = null
+basic.forever(() => {
+   if (dodger.isTouching(ball)) {
+       game.gameOver()
+   } else if (ball.get(LedSpriteProperty.Y) < 4) {
+       ball.change(LedSpriteProperty.Y, 1)
+       basic.pause(250)
+   } else {
+       game.addScore(1)
+       ball.set(LedSpriteProperty.Y, 0)
+       ball.set(LedSpriteProperty.X, Math.random(5))
+   }
+})
+input.onButtonPressed(Button.A, () => {
+   if (dodger.get(LedSpriteProperty.X) > 0) {
+       dodger.change(LedSpriteProperty.X, -1)
+   }
+})
+input.onButtonPressed(Button.B, () => {
+   if (dodger.get(LedSpriteProperty.X) < 4) {
+       dodger.change(LedSpriteProperty.X, 1)
+   }
+})
+ball = game.createSprite(Math.random(5), 0)
+dodger = game.createSprite(2, 4)
+game.setScore(0)
+```
+
 Here is the complete Dodge Ball program.
 
 ```blocks