March 10, 2017

Heart for micro:bit and Processing

A few weeks ago I attended a micro:bit hackathon organized by Lær Kidsa Koding and Open Zone for Experimental Informatics. Then this happened (thanks to Jon Haavie who recorded the video):

Earlier that day I gave a talk on creative programming, and towards the end of the talk, I demonstrated how you, very easily, could send accelerometer data from a BBC micro:bit and draw it on a screen using Processing. What I showed during my talk looked something like this:

Here you see four bars. The red, green and blue bar represents the acceleration of a micro:bit card in the x, y and z direction, respectively, and the white bar represents the so-called absolute value of these values. This is a recording of me holding a micro:bit card and (1) moving it backwards and forwards, (2) moving it from side to side, (3) moving it up and down, (4) throwing it up in air and (5) shaking it a little bit.

All the Hearts

Not long ago, on Valentine's Day, February 14th, I tweeted about hearts and love letters. The context for the tweet was simply that I did not know how to draw a heart, and therefore, I decided to make a program that could draw different hearts for me. Some of them ended up like this:

I never could decide which shape was the perfect heart, but I quickly realized that I could get the hearts to look somewhat like letters. In turn, I could assemble those heart letters such that looked like words. Thereby, I was able to write my "love letter"!

Right before my micro:bit talk that Saturday, I thought it might be fun to connect the micro:bit card to heart drawing program in order to control the hearts via an accelerometer!

BBC micro:bit

I am a huge fan of BBC micro:bit because it is an excellent introduction to the world of computer science and mathematics. Not long ago, Jon Haavie, Torgeir Waterhouse and I wrote a chronicle for the newspaper Aftenposten where we argued that also Norwegian children should be learning programming.

BBC micro:bit makes it remarkably easy to program a sensor that transmits data via radio to a laptop. Here is what I did. First, I programmed a single micro:bit to send data from the accelerometer as follows:

Here, I have used the Javascript Block Editor (see, but it is also possible to switch to code view. In that case, the code looks like this:

let s = ""
basic.forever(() => {
    led.toggle(0, 0)
    s = "m" + input.acceleration(Dimension.X) + " " + input.acceleration(Dimension.Y) + " " + input.acceleration(Dimension.Z)

Afterwards, I programmed a micro:bit to listen to its radio and send along everything it received over to a serial port in the following way:

The code looks like this:

radio.onDataPacketReceived(({receivedString}) => {
    led.toggle(1, 1)

All that now remained was to create a program that could listen to a serial port and receive data. In Processing, I wrote the following code.

import processing.serial.*;
Serial port;

void setup() {
  port = new Serial(this, Serial.list()[7], 115200);

void draw() {

void serialEvent(Serial port) {
  String inData = port.readString();
  if (inData.charAt(0) == 'm') {
    inData = inData.substring(1);
    inData = trim(inData);
    String items[] = (split(inData, ' '));
    println("x=" + items[0] + " y=" + items[1] + " z=" + items[2]);

This is a program that listens to the serial port and writes to the console everything it receives. This is really all you need in order to do this yourself. You probably have to change the number 7 in the code above to another number, but the rest should work "out-of-box".

Good luck!

by Roger Antonsen