Chapter 1. Customize Emoji

We can hardly stop using emoji now when we chat online, how about design a unique emoji for ourselves to display the emotion we feel now! In this chapter, we will get to know micro:bit, and try using its LED panel display function. Besides, we will also get familiar with mind+, and learn how to create a sprite and build a background and so on.

1.1 Micro:bit

Micro:bit is an open source hardware ARM-based embedded system designed by BBC for use in computer education, developed under the cooperation of Microsoft, Samsung, ABM, and so on. From robots to Lego, micro:bit can be used to build all sorts of fantastic projects-the possibilities are endless! At present, micro:bit is promoted by the British non-profit organization Micro:bit Educational Foundation all over the world. Visit the Website at http://www.microbit.org.

Figure 1-1

Micro:bit board, with a credit card size of 5cm×4cm, has 25 programming LEDs, two programmable buttons, light sensor, accelerometer, magnetometer, temperature sensor and Bluetooth module and so on.

Micro:bit integrated a state indicator (keep on when powered up and keep flashing when burning and communicating) and reset button (reboot the program quickly) near the micro USB.

What can micro:bit do?

Micro:bit is equipped with built-in common sensors and its LED can display text, numbers and images. We can carry out many interesting experiments by graphical programming or coding. In addition, micro:bit can also be used together with crocodile clips and expansion board to interact with other electronics, for instance, to read sensor data, control servo and LED strip. It can totally fit all kinds of programming teaching and developing situations.

Micro:bit can be widely used in computer games, acousto-optic interactions, robotics, scientific experiments, wearable device and so on.

Programming micro:bit

Micro:bit is compatible with a number of online code editors such as Blocks, javascript. Python, scratch etc. Without installing any software, users can directly program mciro:bit on the web page. While if you want use Bluetooth to send code from your mobile phone to the micro:bit, you need to download the micro:bit companion APP first. Visit micro:bit website at http://micro:bit.org to start coding.

There are many graphical programing software supporting micro:bit. However, most programming software only support some certain hardware and robots or even cannot work with any hardware at all. It would be perfect if there is a software that not only supports graphical programming, but also compatible with all sorts of hardware. Luckily, we get Mind+ here, and it can meet all the requirements! It is suitable for primary and secondary school students as well as able to provide a great learning environment for makers who want to improve themselves by studying high-level programming language such as Arduino, python, C, C++ etc. Drag and combine code blocks to make programs, easy to find the joy of creating.

1.2 Mind+ Interface

Mind+ download address: http://www.mindplus.cc/

Mind+ interface includes: function menu bar, control, block, script, sprite and stage section.

1) Create a sprite

This is the backstage of the whole “stage”. Without the help of the menu bar, we can do nothing with this software. What functions are there behind the “stage”? Sprite is the main character in the play, and will show his performance on the stage. Users can give instructions to a sprite by snapping blocks together in the script area. A robot Micko will be regarded as the main character by default when creating a new project. If you want to add new sprites to the project, just click the sprite library at the lower-right corner (next to the background library) to select the one you like. Then drag and combine the blocks in the script area to program and control the sprite. Each sprite has its own script, when you click the sprite in the sprite area, the related codes will be displayed on the script area. There are so many ways to create a sprite, let’s start to learn! Frist we will take a look about the sprite tool in Chart 1-1.

Open the sprite library, in which there are different character classifications. We can choose them according to our actual project.

In order to make the sprite fit the whole story plot, you may need to adjust its size and costumes after importing it to stage, or even sometimes you have to draw a new sprite.

We can design different costumes for every sprite, for instance, when we add “Butterfly 1” to the stage, we can find there are two different costumes (some sprites only have one shape). This can basically make our sprite come to alive. Of course, we can add new sprite or switch the sprite’s costumes.

2) Build a background

Stage is the place where your sprites show their performance. Add background to the stage to provide a suitable living environment for the characters so as to make the entire story fun and lively. In the background area, we can choose an image we like from the background library, also we can upload a picture from the computer. Let’s get to know the background library.

3) Coordinate system of stage

Each sprite has its own position on the stage. To let the whole play orderly, we have to make every sprite move along the exact routine in the coordinate system of the stage.

The center point of the stage is (0,0). The horizontal direction is X axis and vertical direction is Y axis. Take the center point as the original point, the right part of X axis, positive (+); the left part negative (-). The upper section of Y axis, positive (+); the lower section, negative (-). Get known about the coordinate system then we can well control the sprites to perform on the stage.

1.3 Algorithms Analysis

- Create two sprites: smiling face and crying face.

- Make the two sprites switch automatically every 3 seconds. Press the space key to trigger.

- Synchronize hardware. Realize to switch emojis on micro:bit board automatically.

1.4 Example Program

1) Build a new costume

Click the paint to draw new sprites, make a smiling face and a crying face.

2) Sprite costume programming

1. Click and find suitable blocks to switch different style sprites.

2. When the space key is pressed, the program starts and it will switch to next sprite.

Add Blocks:

Drag blocks from the module area to script area, snap blocks together to control the sprite. The different color of the block represents different functions such as motion, look, sound etc.

Delete blocks:

Drag block to the left to remove it, or right-click to delete block. Notice: when we want to delete block that has been nested in a group of blocks, we have to separate it from the others firstly.

Get to know events:

The events module is usually used to detect the event operation of other modules. They are often used as the foundation of starting a program, so this module is relatively simple to learn.

① When Green Flag clicked: click the green flag to enable the entire program;

② When (space key) pressed: press the space key to start the event, or replace space key with other keys to control the scripts underneath this block.

③ When this sprite clicked: scripts that wear the block will activate once its sprite is clicked.

④ When backdrop switches to backdrop (): scripts under this block will be triggered once the specified backdrop has been switched to on the stage.

⑤ When (loudness /timer)>(): it starts the scripts below it when a value (loudness or timer) is greater than another value (can be input).

⑥ When I receive (message 1): scripts that begin with this block will be invoked once the specified broadcast has been sent by a calling script.

⑦ Broadcast (): send a broadcast throughout the whole program. Any scripts in any sprites that are hatted with the When I Receive () block that is set to a specified broadcast will activate.

⑧ Broadcast () and wait：this block lets scripts send broadcasts, and have them wait until all scripts activated by the broadcast end.

Result:

Add a background for the stage. When the space key is pressed, the program starts and the two different emojis are switched.

1.5 LED Matrix

Switch different emojis on the micro:bit LED screen. What is it? LED stands for Light Emitting Diode. Micro:bit has 25 individually-programmable LEDs, allowing you to display text, numbers, and images.

We can use micro:bit LED screen to display our customized emojis.

Hardware Connection

Connect micro:bit to the computer with Micro USB, select the corresponding COM port in the Connect Device menu bar. Please note: if we selected the Scratch mode at the right-upper corner, then the program result can be displayed without downloading codes.

Result:

Press the space key, let’s see what the Mind+ and micro:bit LED screen will display.

1.6 Training Camp

It may be bored if there are only pictures displayed on the screen, how about add some sounds for the emojis? Display the smiling face with laugh sound, and the crying face with cry sound. Have any idea how to do this? Come and try!