Blow Away
1. Introduction pt. 1
👻 Oh, no! Your micro:bit is being haunted by a ghost named Haven 👻
For this tutorial, we’ll learn how to blow Haven away 🌬️
2. Haunted ghost setup
🏚️ BooOooOoo 🏚️
A wild Haven has appeared!
► From the ||basic:Basic|| category, find ||basic:show icon [ ]|| and add it to your ||basic:on start|| container.
► Click the heart icon and set it to show a ghost.
💡 In the show icon dropdown menu options, you can hover to see what each design is called.
// @highlight
basic.showIcon(IconNames.Ghost)3. Loop setup
➰ Looping around ➰
► From the ||loops:Loops|| category, find the ||loops:repeat [4] times|| loop and snap it into your empty ||basic:forever|| container.
💡 Why do we need a repeat loop when we already have a forever container? Because forever has an embedded delay that we want to avoid!
basic.forever(function () {
// @highlight
for (let index = 0; index < 4; index++) {
}
})4. Conditional setup
🤔 Conditioning and comparing 🤔
Haven hates noise and will blow away if things get too loud. Let’s use an if statement to check for sounds.
► From ||logic:Logic||, grab an ||logic:if <true> then|| statement and snap it into your empty ||loops:repeat [4] times do|| loop.
► Go back to ||logic:Logic|| to get a ||logic:<[0] [=] [0]>|| comparison.
► Snap ||logic:<[0] [=] [0]>|| in to replace the ||logic:<true>|| condition for your ||logic:if then|| statement.
basic.forever(function () {
// @highlight
for (let index = 0; index < 4; index++) {
// @highlight
if (0 == 0) {
}
}
})5. Blow sound
👂 Haven’s ears 👂
We’ll be using a sound threshold to act as Haven’s ears.
► From the ||input:Input|| category, drag ||input:sound level|| in to replace the left 0 of your ||logic:<[0] [=] [0]>|| comparison.
► Using the dropdown in the middle of ||logic:[sound level] [=] [0]||, change the comparison to be > (greater than).
► Finally, have the right side of the comparison say 128 so your full comparison reads: sound level > 128.
💡 This means Haven will hear any sound above 128.
basic.forever(function () {
for (let index = 0; index < 4; index++) {
// @highlight
if (input.soundLevel() > 128) {
}
}
})6. Making variables
☀️ Variable weather 🌨️
Let’s create some variables to keep track of Haven’s movement.
► In the ||variables:Variables|| category, click on Make a Variable... and make a variable named col.
💡 col is short for “column”.
► Make another variable and name it row.
7. Displacing LEDs part 1
🔀 Random chance 🔀
To show Haven is blowing away, we want to move a random set of lights sideways.
► Your ||variables:Variables|| category should now have the option to ||variables:set [row] to [0]||. Drag that block into your empty ||logic:if then|| statement.
► From the ||math:Math|| category, find ||math:pick random [0] to [10]|| and snap that in to replace the [0] in your ||variables:set [row] to [0]|| block.
► Change the maximum number from 10 to 4.
💡 We are setting the maximum random value to 4 because the lights on the micro:bit are numbered 0, 1, 2, 3, and 4 for columns and rows.
let row = 0
basic.forever(function () {
for (let index = 0; index < 4; index++) {
if (input.soundLevel() > 128) {
// @highlight
row = randint(0, 4)
}
}
})8. Displacing LEDs part 2
► Go back into ||variables:Variables|| and drag out another ||variables:set [row] to [0]||. Place this one below the last one (at the end) of your if then statement.
► Using the dropdown menu, set the new block to read ||variables:set [col] to [0]||.
► From the ||math:Math|| category, grab another ||math:pick random [0] to [10]|| and snap that in to replace the [0] in your ||variables:set [col] to [0]|| block.
► Change the maximum number from 10 to 4.
let col = 0
let row = 0
basic.forever(function () {
for (let index = 0; index < 4; index++) {
if (input.soundLevel() > 128) {
row = randint(0, 4)
// @highlight
col = randint(0, 4)
}
}
})9. Conditioning on one point
✨ Ooh, sparkly ✨
Time to move some lights around!
► From ||logic:Logic||, grab another ||logic:if <true> then|| and snap it at the inside and at the bottom of your ||loops:repeat [4] times do|| loop, right below your ||logic:if [sound level] [>] [128]|| statement.
► From the ||led:Led|| category, find ||led:point x [0] y [0]|| and drag it in to replace the ||logic:<true>|| condition in the new ||logic:if then|| statement.
💡 This block will test if the light is on at the the given x and y coordinate points.
let col = 0
let row = 0
basic.forever(function () {
for (let index = 0; index < 4; index++) {
if (input.soundLevel() > 128) {
row = randint(0, 4)
col = randint(0, 4)
}
// @highlight
if (led.point(0, 0)) { }
}
})10. Unplotting and replotting LEDs
To create the animation effect of Haven blowing away, we will turn off (or unplot) a light that is on and then turn it on again (plot it) in a different spot.
► From ||led:Led||, grab ||led:unplot x [0] y [0]|| and snap it inside the empty ||logic:if <point x [0] y [0]> then|| statement.
► Go back to ||led:Led|| and get ||led:plot x [0] y [0]||. Snap that in beneath the ||led:unplot x [0] y [0]|| block that you just added.
let col = 0
let row = 0
basic.forever(function () {
for (let index = 0; index < 4; index++) {
if (input.soundLevel() > 128) {
row = randint(0, 4)
col = randint(0, 4)
}
// @highlight
if (led.point(0, 0)) {
led.unplot(0, 0)
led.plot(0, 0)
}
}
})11. Setting variables
📃 Columns and rows 📃
Notice how you have three blocks from the ||led:Led|| category. All three have ||led:x|| [0] and ||led:y|| [0] coordinates. In these two steps, we will set it so that every ||led:x|| is followed by the ||variables:col|| variable and every ||led:y|| is followed by the ||variables:row|| variable.
► From ||variables:Variables||, get three copies of ||variables:col||, and use them to replace the x values in the following three blocks:
1. ||led:point x [0] y [0]||
2. ||led:unplot x [0] y [0]||
3. ||led:plot x [0] y [0]||
► Go into ||variables:Variables||, get three copies of ||variables:row||, and use them to replace the y values in the same three blocks.
let col = 0
let row = 0
basic.forever(function () {
for (let index = 0; index < 4; index++) {
if (input.soundLevel() > 128) {
row = randint(0, 4)
col = randint(0, 4)
}
// @highlight
if (led.point(col, row)) {
led.unplot(col, row)
led.plot(col, row)
}
}
})12. Moving LEDs
➕ Math makes the lights go swoosh ➗
Right now, we are unplotting and replotting in the same spot. What we want to do is move the lights we’re turning back on just a smidge to the right every time until there’s nothing left on the grid.
► From ||math:Math||, find the ||math:[0] [+] [0]|| operation and use it to replace ||variables:col|| in your ||led:plot x [col] y [row]|| block.
💡 If you move your entire ||basic:forever|| container, you should find a greyed out col variable in your workspace.
► Take the greyed out ||variables:col|| variable (or get a new one) and use it to replace the first [0] so the operation reads ||math:[col] [+] [0]||.
► Replace the second [0] with [1] so the operation reads ||math:[col] [+] [1]||.
let col = 0
let row = 0
basic.forever(function () {
for (let index = 0; index < 4; index++) {
if (input.soundLevel() > 128) {
row = randint(0, 4)
col = randint(0, 4)
}
// @highlight
if (led.point(col, row)) {
led.unplot(col, row)
led.plot(col + 1, row)
}
}
})13. Testing in the simulator
🌬️ Test what you’ve created 👻
Check out the simulator!
► Click on the pink bar underneath the microphone icon. Drag it above the sound number you chose (we used 128!) to blow Haven away.
► If you have a new micro:bit (the one with the shiny gold logo at the top), download this code and try it out!
💡 Blow close to the micro:bit and watch Haven swoosh away 💨
💡 Use your micro:bit’s reset button (it’s on the back!) to bring Haven back 👻
let col = 0
let row = 0
basic.showIcon(IconNames.Ghost)
basic.forever(function () {
for (let index = 0; index < 4; index++) {
if (input.soundLevel() > 128) {
row = randint(0, 4)
col = randint(0, 4)
}
if (led.point(col, row)) {
led.unplot(col, row)
led.plot(col + 1, row)
}
}
})