How To Program "I ❤️ Whaleshares" On The BBC Micro:Bit

"That's always a cool thing to be the voice of what the eyes are seeing. It gives you the role of the Greek chorus and that's always fun to do."
- Jorge Garcia -

Why not start today?

That's right, you can start learning today to program the BBC micro:bit computer.

Recently, I introduced you to the BBC micro:bit computer, an excellent tool for makers. At the end of that article, as a teaser I showed you a short animation of my "I ❤️ WLS" program. I told you it took me only a few minutes to program it.

BBC micro:bit layout... ~ Image courtesy of Gareth Halfacree

In this article,

I'll show you step-by-step how that was done, and you'll see just how simple it really is to program a micro:bit.

NOTE: You'll get the greatest benefit from this article if, right now, you open this editor (click) in a separate window and try micro:bit programming for yourself, step by step, along with me.

You don't need a micro:bit to try this.

The makecode editor provides you with a simulated micro:bit computer, visible on the upper left side of the screen. Who knows, once you see how easy it is to use, maybe you'll buy that micro:bit to play with.

Have you opened the editor in another window? Let's get coding!

Step 0.

Why step zero?

In computer programing, as in math, numbers and counting typically start from zero, so I thought I'd help you get used to it. If you've opened the makecode editor window and it looks more or less like the image below, you've taken step zero. Good work, you're on your way!

The makecode editor... ~ Screen capture by @creatr

Your mission,

should you decide to accept it, is to produce a display that says "I ❤️ WLS" on the micro:bit 5x5 LED array.

Notice on the right half of the makecode editor screen, there are already two control structures. The one labeled "on start" will contain any code instructions that we want to occur only once at the beginning of the program. The one labeled "forever" will contain code instructions that we want to repeat over and over as long as the program is running.

Step 1.

Where do we find these instructions?

There is a list of kinds of instructions in the middle of the screen. Click on "Basic" at the top of the list, and you'll see a selection of instruction blocks. Drag and drop one copy of "show leds" into the workspace on the right. Then drag and drop two copies of "show string" into the workspace. Finally, drag and drop a copy of "show icon" into the workspace.

List of basic instructions... ~ Screen capture by @creatr

Step 2.

Now we arrange these instructions in order. Drag the "show string" instruction into the "forever" block. In a minute or two, we'll be replacing the default text ("Hello!") with our own message.

Close-up of the program workspace... ~ Screen capture by @creatr

When you drag the instruction over the "forever" block,

you'll find that it snaps into position and locks itself into place as in the image below.

The "show string" instruction in place... ~ Screen capture by @creatr

Step 3.

Next, do the same with the "show icon" instruction.

The "show icon" instruction in place... ~ Screen capture by @creatr

Step 4.

Next, do the same with the "show leds" instruction. The purpose of "show leds" in this program is to provide a gap between the display of the heart ❤️ and the display of the final WLS string.

NOTE: The "show leds" instruction defaults to all LEDS off, but you might accidentally turn some on when you try to move it. The LEDS simply toggle when you click them with the mouse, so you can easily turn them back off.

Your program workspace should now look like the image below. All we need is one more string.

The "show leds" instruction in place... ~ Screen capture by @creatr

Step 5.

Drag and drop another "show string" command into the bottom of the "forever" loop.

We are now almost done!

You have probably noticed by now that as you place each program instruction, the simulator starts over and runs whatever you've already placed inside the "forever" control block.

Step 6.

Highlight the text in each of the "show string" boxes and change it to what you really want to say. You know, replace "Hello!" with "I" and "WLS" or "Whaleshares."

My final program looks like the image below. Because there is nothing special to do at the beginning, I clicked on and deleted the "on start" block. Whether or not you need "on start" all depends on what you want your program to do.

The "I ❤️WLS" program, complete... ~ Screen capture by @creatr

On the editor display,

(or on your micro:bit if you already have one), you should see something like this:

The "I ❤️WLS" program, in action... ~ Animated GIF by @creatr

Now, wasn't that easy?

Have you had enough fun to want to order your own BBC micro:bit to play with? With the online simulator, you can keep learning how to program your 'bit while you wait for it to arrive. Just keep adding new programs to your repertoire at https://makecode.microbit.org/#editor .

There's actually a simpler way to program this, one I just discovered today... Can you figure out how? :)
In an upcoming article,

I'll show you how I added a small battery pack for a couple of AAA batteries, making my micro:bit a stand-alone device. There are an amazing number of useful things you can do with a standalone micro:bit

The BBC micro:bit... ~ Image courtesy of Wikimedia Commons

Important Note: My articles often contain hot links to supplemental information. While they aren't essential, you may find added value by following them. Most images also link to useful or related information or articles.

I want to be a good member of this community, and so I promise to take your comments, both positive and corrective, very seriously.

I'm especially interesting in meeting makers. If you make stuff, I would love to read about it and encourage you in any way that I can... Just say "Hi" in a comment, and show me what you're working on; I welcome your links!