Creating Your Bitmap – Piper
LIGHT SHOW PORTAL
← Back
Next →

CREATING BITMAPS OF YOUR FAVORITE CHARACTERS

The Light Show consists of 64 RGB LEDs placed within 8 rows and 8 columns that make up a Matrix! Using some simple understandings of how colors are mapped, we're going to draw out simple block drawings of some of our favorite characters and then learn how to encode them!

STEP 1

HOW COLORS CAN BE MADE WITH RED, GREEN AND BLUE

Each of the LEDs in your light matrix are RGB LEDs, which means that they have a RED, GREEN, and BLUE output of the light, as you can see to the right:

Awesomely enough you can use these three colors to make a lot of other colors. Go ahead, see for yourself using the sliders below:  

The more control you have over the brightness level of each color (i.e. those sliders), the more colors you can make and the higher resolution your picture can become.

So if your RGB lights can only be ON or OFF, then you have 3 BIT scheme (1 bit per light x 3 lights)

This is called BIT DEPTH and determines how many different colors you can make.  

Check out this video explaining bit depth and this page which illustrates differences in resolution.

STEP 2

HOW TO CODE FOR YOUR COLORS IN HEXADECIMAL OR BINARY CODE CODE

In our case, you have a HIGH, MEDIUM, LOW, and OFF state for each of your three lights.

Those four states can be encoded using 2 digits (see RIGHT).

So this means you have (2 bits per light x 3 lights) so you have a 6 BIT setup.

In RGB codes, LOW = 85, MEDIUM = 170, HIGH = 225

Creating Your Bitmap

So how exactly do you code for OFF, LOW, MEDIUM or HIGH?

You're going to have 6 digit binary numbers from 000000-111111 (Hint: there's 64 combinations!)

Creating Your Bitmap

HANDY GUIDE:

110000 = RED    001100 = GREEN   

000011 = BLUE

STEP 3

LET'S LOOK AT HOW THESE CODES LOOK ON YOUR LIGHTSHOW MATRIX

Here are the 64 different binary combinations that are possible and how they will look on your Light Show!

B000000,B000001,B000010,B000011,B000100,B000101,B000110,B000111, B001000,B001001,B001010,B001011,B001100,B001101,B001110,B001111, B010000,B010001,B010010,B010011,B010100,B010101,B010110,B010111, B011000,B011001,B011010,B011011,B011100,B011101,B011110,B011111, B100000,B100001,B100010,B100011,B100100,B100101,B100110,B100111, B101000,B101001,B101010,B101011,B101100,B101101,B101110,B101111, B110000,B110001,B110010,B110011,B110100,B110101,B110110,B110111, B111000,B111001,B111010,B111011,B111100,B111101,B111110,B111111,

So when you see rgb(0,85,255), the binary code will be B000111 and the color will be BLUE

Creating Your Bitmap

STEP 3

NOW THAT WE KNOW HOW TO ENCODE COLORS, LET'S USE THEM TO DRAW OUR FAVORITE CHARACTERS

First, draw the basic designs of the characters on a 8x8 pixel grid

Second, map each of the colors onto each pixel of the grid

Put the color codes together into a matrix to upload to your light show!

Creating Your Bitmap
Creating Your Bitmap
Creating Your Bitmap

MINECRAFT ZOMBIE

Trace how the zombie eyes and frown make up this face and then fill in the rest of the colors!

B000100

B001000

B000000

B000100,B000100,B000100,B000100,B000100,B000100,B000100,B000100,
B000100,B000100,B000100,B000100,B001000,B001000,B000100,B000100,
B000100,B001000,B001000,B001000,B001000,B001000,B001000,B000100,
B001000,B001000,B001000,B001000,B001000,B001000,B001000,B000100,
B001000,B000000,B000000,B001000,B001000,B000000,B000000,B001000,
B000100,B001000,B001000,B000000,B000000,B001000,B001000,B000100,
B000100,B001000,B000000,B001000,B001000,B000000,B001000,B000100,
B000100,B000100,B000100,B000100,B000100,B000100,B000100,B000100,

Creating Your Bitmap
Creating Your Bitmap
Creating Your Bitmap

PIP THE MOUSE

Trace how the colors make up Pip's eyes and mouth and then use your colors to fill the ears and nose!

B110100

B010000

B000000

B110100,B110100,B110100,B000000,B000000,B110100,B110100,B110100,
B110100,B010000,B110100,B000000,B000000,B110100,B010000,B110100,
B110100,B110100,B110100,B110100,B110100,B110100,B110100,B110100,
B000000,B110100,B111111,B110100,B110100,B111111,B110100,B000000,
B000000,B110100,B000000,B110100,B110100,B000000,B110100,B000000,
B110100,B110100,B110100,B010000,B010000,B110100,B110100,B110100,
B000000,B110100,B110100,B110100,B110100,B110100,B110100,B000000,
B110100,B110100,B110100,B110100,B110100,B110100,B110100,B110100,

Creating Your Bitmap
Creating Your Bitmap

PIPERBOT

Trace how the colors make up Piperbot's eyes and mouth and then use your colors to fill in his face!

B000001

B011101

B111111

B000001,B000001,B000001,B000001,B000001,B000001,B000001,B000001,
B000001,B011101,B011101,B011101,B011101,B011101,B011101,B000001,
B000001,B011101,B111111,B011101,B011101,B111111,B011101,B000001,
B000001,B011101,B000000,B011101,B011101,B000000,B011101,B000001,
B000001,B011101,B111111,B011101,B011101,B111111,B011101,B000001,
B000001,B011101,B011101,B011101,B011101,B011101,B011101,B000001,
B000001,B011101,B011101,B000000,B000000,B011101,B011101,B000001,
B000001,B000001,B000001,B000001,B000001,B000001,B000001,B000001,

Creating Your Bitmap

Are you able to understand the code? If yes, hit next!

LIGHT SHOW PORTAL
← Back
Next →