Creating an Animation

Programming with BBC Micro: Bit

Creating an Animation

Introduction

This activity is an introduction to JavaScript programming. The project is to create an animation using the basic.showLeds function which will display a sequence of pictures that will create an animation

Key Word

Objectives

Objective

What you should be able to do:

Learn

Know what a function is in a program.

Understand

Understand how we write, and structure, code in JavaScript to get the BBC Micro: Bit to do something

Apply

Use functions belonging to basic in JavaScript that tells the computer to show an animation using the ShowLeds command.

Advanced

To get the computer to start an animation when a button is pressed.

Programming Activity

These instructions will guide you through the activity. This can be printed off or kept open on the computer. You will be using the make code website.

Understanding the website

You will want to click onto New Project

Figure 1: Front page of the BBC Micro Bit make code site

Figure 2: Insert name box

You will be asked to provide a project name. You will want to give a good name for your animation!

You will be directed to a page that looks like this

Figure 3: The coding workspace in BBC Micro Bit

This is where you will be programming in JavaScript. You can download the finished code onto your Micro Bit.

Figure 4: Labelled Diagram of the workspace

Figure 4, above, shows you the editor you use to program the BBC Micro: Bit. This has been labelled so you know what the website has.

Emulator – This is where you can preview your code online. This allows you to see how your code behaves without having to download it onto the Micro: Bit to find out.

Explorer – This is important and is something that all programming software has. This is where you can see if there are any syntax errors in your program. Syntax is just the programming rules that you must follow (Just like Grammar). You can also access any other scripts which are attached to your program from the explorer too.

Function Drawers - These are where functions are kept. You access functions that are stored in a draw by stating the draw first. Then the function you are accessing. So, if I was accessing showNumber, I will need to start with basic. So, it will look like this: basic.showNumber.

Coding Pane – This is where you write your code. As you write your code, new lines will appear. When the code is run, the computer starts on line one and works its way down to the last line you have coded on.

What is a function

A function is a block of code that tells the computer what it needs to do. So, it is a command that tells the computer what it needs to do.

Functions have a parameter attached. A parameter tells the function what it needs to do. An example of a function on the make code website, is showLeds, which tells the computer what LEDs are going to be on or off on the Micro Bit.

Figure 5: Example of a written function

The image above shows the showString function which has the parameter “hello!”. The parameter is what the showString function must show. So, the Micro Bit will show Hello. Have a go at writing basic.showString(“Hello”)

All programming languages will have defined functions that can be used. These are what we call global functions. However, I will not go into that now.

You can create new functions which can be used in the program. These do need to be defined so the computer knows how to use these functions you have created.

Deeper dive into a function, and how the code is structured

This is the category/drawer the function belongs to

This is the parameter. A parameter is always needed and is referenced inside the parenthesis (). This is telling the function what it needs to do. In this case, what lights it needs to display.

This is the function. This is the command that is telling the computer what it needs to do.

Figure 6: Example of the code written and labelled

We need the drawer to reference the function to use. Without it, the computer will not know where to find the function. Thus, the program will not work.

Creating the AnimationWhat is an animation?

An animation is a collection of images that are created by had or digitally, that are designed to make the drawing move when these images are shown.

An example of this would be a cartoon. The character you see on the screen is an image. When the character moves, there is a collection of different images of that character moving in stages. When these images are shown for 1 second before moving onto the next, it will show the image as moving.

Figure 7: Carton strip of Tom and Jerry from: https://www.tomandjerryonline.com/images/comicart1.jpg

Writing the code for the animation

You will want to make sure you do not have any code in the workspace. You then want to think of an animation you are wanting to create. This could be:

· Faces transitioning to happy and sad

· A face speaking

· Disco Lights with different shapes

· Different shapes.

On line 1, write basic.showLeds

Figure 8: Example of the showLeds function been written

You will see a tool tip, Suggestion, as seen above. This will be under your function and will show when you stop typing. This is the computers way of saying “Is this what you want?”.

You will want to click onto this, and it will produce the grid for you as seen underneath

The grid is referencing the LED lights on your BBC Micro Bit. You will notice the middle light is on. This is referenced by using a # instead of a ‘. ‘

Figure 9: Showing the function wrote correctly with the LED light showing as on, on the Micro Bit

Symbol

Meaning

.

Off

#

On

You want to replace the full stops with hashtags for the lights you want to be on. Place full stops with the lights you want to have off.

Make sure you keep the grid in-line like figure 8 above.

You will need to add a few showLeds functions under each other with different pictures to form an animation.

Finished Code

You will notice that when you run the code, the computer starts on line one, and completes each code on each line. Once it gets to the end, it will stop. You will see nothing on the screen after it has finished.

Figure 10: Example of my code that shows a face speaking.

Saving your code

Figure 11: Shows the save option along with option to download.

At the bottom of your screen you will see a box that looks like figure 10

You want to place a name inside the box (next to download) then click the save icon.

This downloads it to your computer, in the download folder.

Define

Definition:

State something in a program

Synonyms:

State, Outline

Examples:

jump()forward(10)

Page | 1Nathan Roberts

Programming with BBC Micro: Bit

Page

|

1

Nathan Roberts

Creating an Animation

Introduction

This activity is an introduction to JavaScript programming. The project is to create an animation

using the

basic.showLeds

function which will display a sequence of

pictures that will create an

animation

Key Word

Objectives

Objective

What you should be ab

le to do

:

Learn

Know what a function is in a program.

Understand

Understand how we write, and structure, code in JavaScript to get the BBC Micro: Bit to

do something

Apply

Use functions belonging to basic in JavaScript that tells the computer to show an

animation using the ShowLeds command.

Advanced

To get the computer to start an animation when a button is pressed.

Programming with BBC Micro: Bit

Page | 1 Nathan Roberts

Creating an Animation

Introduction

This activity is an introduction to JavaScript programming. The project is to create an animation

using the basic.showLeds function which will display a sequence of pictures that will create an

animation

Key Word

Objectives

Objective What you should be able to do:

Learn Know what a function is in a program.

Understand Understand how we write, and structure, code in JavaScript to get the BBC Micro: Bit to

do something

Apply Use functions belonging to basic in JavaScript that tells the computer to show an

animation using the ShowLeds command.

Advanced To get the computer to start an animation when a button is pressed.