Microbit Programming: Showing a Running Pixel on the LED

Before, we briefly introduced the basic knowledge of microbit programming, this week, we will learn how to program on the microbit LED display.

BASICS OF LED

The LED is a tiny ‘screen’ that Microbit has. It is a 25 pixel output device (5 rows and 5 columns). The rows we are referring as the Y-axis where the columns are X-axies. The computer usually start counting (indexing) from number ZERO instead of one. Thus, the top left corner (first pixel) is referred to as X=0, Y=0 and the first pixel second row is referred to as X=0, Y=1.

PLOTTING AND UNPLOTTING IN MICROBIT

To plot a pixel (turn a pixel on on the LED), we can drag the ‘Plot’ on the LED tab.

And as you will see, the pixel (top-left corner) is turned on.

This is essentially the same as the following Javascript code:

To unplot a pixel, we use the led.unplot method, then we can do some animations. A computer animation is just like drawing something, wait sometime (a few milliseconds), erase the original stuff, and then draw the stuff on the new location – then repeat the process that will be showing the animation to the human eyes.

A RUNNING PIXEL ON MICROBIT

We can draw a running pixel on the first row by the following:

Corresponding to the following Javascript code:

Our first animation using the Microbit is accomplished! We use the // to start a line-comment which will be ignored by the computer. A comment helps humans to understand the code better. When the x coodinate of the pixel is beyond the maximum range of the LED screen, we need to make it to the begining of the row – by setting is to zero.

We can also use the modulos operator (%) which is used to get the remainder of a division calculation. For example, 7 % 3 is 1, which is read as: 7 divide by 3 and the remainder is 1.

Thus the above can be written as:

This can be visualised as:

To make the pixel run in the reverse direction e.g. from right to the left, we can decrement the X coordinate and rewind X to 4 when X falls negative.

This can be visualised as:

By using the modulos % operator, we need a special trick to turn the negative into positive by adding 5 pixels:

To make the pixel running from first row to the last row, row by row (from left to the right), we can rewind the pixel to the begining of next row, and when it is beyond the last row, we need to set it back to the first row. The code looks like:

Note that, we need to declare two variables: X and Y to hold the position of the current pixel.

Could you make a running pixel on Microbit that starts from the bottom-right corner and running from right to the left, bottom to the top, repeatedly? e.g. when the pixel lands at the top-left corner, its next position will be rewinded to the last corner on the LED screen.If you have any interesting suggestions or ideas, pls feel free to contact us via services@elecfreaks.com.