codeBuglogo.pngIntroducing CodeBug!

  What is CodeBug

  10 CodeBug Projects in 10 Days

  Are You a STEM Educator?

 

 

Getting Started:

manyfaced.png

We start the project by visiting the CodeBug website http://www.codebug.co.uk and creating an account. It only takes a few minutes. While logged in, clock on Create to start a new project. Don't forget to save your work!

 

The interface for CodeBug contains an area to the right of the screen with is the primary programming interface. There are a series of menus that are used to store the blocks with can be dragged from the menus into the coding area. Good blocks are made to connect together, and that is what we intend to do!


Now that you have familiarized yourself with the interface, let's get started on an intermediate project Thomas Macpherson-Pope pulled together from CodeBug.org.

 


What you need:

CodeBugCodeBug

Micro USB CableMicro USB Cable

CR2032 BatteryCR2032 Battery

Computer


The Project:

 

Expression has always been an important variable in human communications. From the smile on someone's face to a frustrated emoticon via text or the "mischief" emoticon found in the majority of our @Top Members conversations .  The visual representation of ones feelings can also be communicated to the outside world via the CodeBug. In this project we will walk through how to show off the many faces of CodeBug!

 

 

Before we get started, it's  best to plan out your faces so you know how many you will have. Print out the template attached and get a pencil to plan out which LEDs you are going to have on. Below are some example faces.

example.png


Now that you've plotted out the expressions to display let's get coding that bug!

 

Let's begin at the Start block which is a pre-existing block in which the coding is ready to be built on! The Start block can be used to configure CodeBug when we run the emulation on the interface, for this project we will keep it as is.

 

For the first block of code we are going to need to use Sprites. Sprites are simple images created by the Build Sprite block and displayed using either the Draw Spite block or the Scroll Sprite block . To display a Sprite we need to drag a Draw Sprite block and a Build Sprite block into the coding area. Join the Build Sprite block into the Draw Sprite block and join that group of code into the Start block.

CB_manfaces_step1_blocky.png 

Click on the different boxes of your Build Sprite block to design your sprite. A ticked box means that LED will be on. Run the code via the blockly emulator and see the "LEDs" light up!
   
Next we will need to program a different Sprite to be displayed when different buttons and legs are pressed. From the If menu drag an If block to an empty space on your workplace. Click on the cog icon on your If block and, in the window that appears, drag an Else If into the If on the right.
elseif.png

From the Inputs/Outputs menu drag in two Pressed blocks and snap them onto the If block. From the drop down selector tool on the Pressed block we will have the first block as "A" and the second block as "B"
pressed.png


From the Sprite menu drag in another Draw and Build Sprite block and place it inside of the If block.

spritestack.png


 


From the Loops menu, drag a Repeat While True loop and snap it onto your Start block. Drag your If Else If block into this While loop.


loop.png


Let's add a few more Sprites into the code. Click on the Cog of the If block and drag four more of the Else If blocks into the If block. Next, from the Inputs/Outputs menu drag in four Leg Grounded block. Join these onto the Else If blocks and number them using the drop down selector tool 0-3.

 

sprites.png

 

To set the Legs of the CodeBug we will need to first configure the Emulator. To do this we will need to open the emulator configuration via the settings cog on the emulator. Tick the Show Leg Controls box. Click on the Configure Emulator button to complete the settings change. The Emulator will now show the status of the CodeBug's legs with blue arrows. The arrow pointing to the legs is the Input, away from the legs is the Output. When the background of the leg is red, the leg is at Power, when the leg is at black, it is Ground.

bug.png

Now it's time to add in those extra Sprites. Drag four Draw Sprite blocks and four Build Sprite blocks into the coding area. Join the Build Sprite block into the Draw Sprite block and snap that group of code into the Else If blocks.

final.png

 

From there we can run the emulator with the code...

 


With the code working, click on Download, it's just under the simulator controls. When the code downloads, plug in a USB to micro USB into your computer. While holding Button A of your CodeBug also insert the micro USB to the CodeBug. The top left LED in the matrix on the CodeBug will flash. Your computer should also recognize the CodeBug as a USB drive on your computer. Copy the code downloaded from the CodeBug website to the USB drive and run the program by pressing Button B.



Wear your emotions on your sleeve by inserting a  CR2032CR2032 battery into the holder on the back of the CodeBug and attaching to wherever you see fit

 

 

REMIX THIS PROJECT

 


See more CodeBug projects and learn how you can get one of your own by visiting: 10 CodeBug Projects in 10 Days