Binary and colours with Crossy Road
In this tutorial you'll learn how computers store simple and complex data using binary digits. You'll use binary to create images from coloured pixels.
Learning outcomes:
- Create different colours by changing their RGB channels
- Ability to convert numbers to binary and vice versa
- Use 8-bit binary colours in images
Are you ready?
Step 1: Ones and zeros
Computers store information as 1s and 0s: this is called binary. Each 1 or 0 represents on or off.
A computer screen is made of small square lights called pixels. We can draw simple black and white image from pixels that are either lit up white (on) or black (off).
>Click Play and select Level 1 to see the black and white image that we'll start with.
The image on the left is shown as binary data on the right. Each 1 or 0 is called a bit. Because each pixel is represented by only a single 1 or 0, this means this is a 1-bit image.
You can change this binary data by clicking on one of the lines of binary and typing in new 1s and 0s to update it.
>Click on the first line of binary and change all the numbers to 0 to see what happens.
>Change the second line of binary to 11111111 to see how this works.
You can draw a new image by changing the 1s and 0s in each line of binary to update each line of pixels in the image. Let's use this to draw a new coin icon to display in the game so the chicken knows how many coins it has collected.
>Change each line of binary to create a coin like this:
>Click the Next button in the game to see your image in the top-right of the game.
>Move the chicken using the arrow keys to collect the coin
Did you make the coin image? If not, collect the coin and click Back to return to the pixel art screen. (Make sure you don't close the game, or you will lose your changes).
If you successfully made the coin image, click Next in the game, and move on to Step 2.
Step 2: Red, Green, and Blue
Let's take this to the next level.
>Click Level 2 in the game.
This time you'll make an image of coloured pixels. It's important to know that a pixel is made of three coloured lights that mix together: Red, green, and blue. Here's a close-up picture of a computer screen:
We can tell the Red, Green, and Blue parts of a pixel to turn on or off by setting their binary digit to 1 (on) or 0 (off). Each pixel will now have a 3 binary digits, for example, a red pixel will have: Red = on, Green = off, and Blue = off, and would be represented as 100.
There are 8 pixels in each row, and 3 digits for each pixel, so we now have 24 digits in each row.
>Click on the first line of binary and type in 100 to make the first pixel red, then add 21 zeros. This should be 100000000000000000000000.
>Then click OK.
The second pixel is represented by the next 3 digits. Let's change the colour of the second pixel to yellow (yellow is made from red light and green light combined).
>Click on the first line of binary and type in 100 to keep the first pixel red, then add 110 to make the second pixel yellow, followed by 18 zeros to keep the rest of the pixels turned off (black).
This kind of colour is called 3-bit colour, since we have 3 bits for each pixel (remember a bit is a 1 or a 0).
By mixing red, green and blue you can make a rainbow. This chart shows you how to mix all the colours you can create with 3-bit colour:
> Follow the steps below to mix the 3-bit colours to create this colourful rainbow coin:
>Click on the first line of code and type 011 to start with a cyan pixel. Fill the rest of this line with black pixels except for the last pixel, which should also be cyan (011). Then press OK.
>Click on the second line down. Type the numbers for a black pixel (000), followed by 6 red pixels (100), and finish with another black pixel (000).
>Continue to fill each line in using black (000), red (100), yellow (110), green (010), cyan (011), and magenta (101).
Remember to type 24 1s and 0s into each line of binary.
>Click the Next button to see your rainbow in the game.
Did you make the rainbow coin image? If not, collect the coin and click Back to return to the pixel art screen. (Make sure you don't close the game, or you will lose your changes).
If you successfully made the rainbow coin image, click Next in the game, and move on to Step 3.
Step 3: Creating complex colours
Level 3.
>Click Level 3 in the game.
By changing the brightness of red, green, and blue pixels you can make even more colours!
There are 256 levels of brightness from 0 (off) to 255 (full brightness) to play with.
In this step we'll just use normal decimal numbers to represent our colours, and we'll convert them to binary in the next step.
Follow the steps below to mix the red, green and blue to create these more complex colours and draw the chicken in this image:
>Click on a colour in the palette
>Click on the red number under the palette, and type 249
>Click on the green number and type 88
>Click on the blue number and type 88
This is the shade of red you'll use to draw the red parts of the chicken in this image:
>Click on the squares in the pixel art to fill them with the colour you have selected in the palette
>Click on different colours in the palette and make sure you have all these colours:
Red: R=249, G=88, B=88 Orange: R=224, G=131, B=78 White: R=255, G=255, B=255 Black: R=0, G=0, B=0 Blue: R=133, G=210, B=254
>Draw the chicken with all the right colours
>Click the Next button to see your image in the game.
Did you make the chicken image? If not, collect the coin and click Back to return to the pixel art screen. (Make sure you don't close the game, or you will lose your changes).
If you successfully made the chicken image, good stuff! You just mixed different lights together to potentially make 16,777,216 different colours!
Click Next in the game, and move on to Step 4.
Step 4: 24-bit binary colour
Back to binary in level 4.
>Click Level 4 in the game.
The different decimal numbers from 0 to 255 for each red, green and blue colour channel have to be represented in binary so the computer can understand them. To count to higher decimal numbers using binary, we need more ones and zeros. For example, the decimal number 255 is represented as 1111111111 in 8-bit binary, while the decimal number 0 is 00000000 in 8-bit binary.
Red, green, and blue each have 8 bits, making 24 bits in total for a coloured pixel. That's a lot of 1s and 0s for a single pixel. Remember how a 3-bit red pixel was represented as 100? Well, a 24-bit red pixel is represented as 111111110000000000000000.
>Click on a pixel in the palette and change its red to 11111111, its green to 00000000, and its blue to 00000000.
An 8-bit number can go up to 255. Let's say our decimal number is 238 and we want to convert it into binary. Here's how to count in 8-bit binary:
The first bit in our 8-bit number counts for 128. If your number is bigger than or equal to 128, then this bit is a 1, or else it's a 0. Subtract 128 from your number if it was bigger than 128 to see how much is left for the other bits to represent. Our number in this example is 238, which is larger than 128, so we know the first bit will be 1. We subtract 128 from 238 which equals 110. Our binary number so far is 10000000.
The second bit counts for 64. If what's left of your number is bigger than or equal to 64, we count this bit as a 1, if not, count it as a 0. Subtract 64 from your number if it was bigger than 64. In our example we now have 110, which is bigger than 64, so the second bit will be 1. We also subtract 64 from 110, which is 46. Our binary number so far is 11000000.
The third bit counts for 32. If what remains of your number is bigger than or equal to 32, we count this bit as a 1, or else it's a 0. Subtract 32 from your number if it was bigger than 32. In our example, 46 is bigger than 32, so count this bit as a 1. Subtracting 32 from 46 = 14. Our binary number so far is 11100000.
The fourth bit counts for 16. If the rest of your number is bigger than or equal to 16, then this bit is a 1, or else it's a 0. If your number was bigger than 16, subtract 16 from it. In our example 14 is not bigger than 16, so we count this bit as a 0 and keep our number at 14. Our binary number so far is 11100000
The fifth bit counts for 8. If your number at this point is bigger than 8, then the fifth bit is a 1, or else it is 0. If your number was bigger than or equal to 8, subtract 8 from it. In our example 14 is bigger than 8, so we count the 5th bit as a 1 and subtract 8 from 14, which leaves us with 6. Our binary number so far is 11101000.
The sixth bit counts for 4. If your number is still bigger than or equal to 4, this bit counts as 1 and you can subtract 4 from your number. Otherwise, make this bit a 0. In our example, 6 is larger than 4, so count the 6th bit as 1 and subtract 4 from 6, leaving us with 2. Our binary number so far is 11101100.
The seventh bit counts for 2. If your number is larger than or equal to 2, this bit will be 1, otherwise make it 0. If your number was larger than 2, subtract 2 from it. In our example, we are left with 2, so count the seventh bit as 1, and subtract 2 from 2. Our binary number so far is 11101110.
- The eighth bit counts for 1. If the last remaining amount is 1, then count this bit as a 1. Otherwise, count it as 0. In our example we have nothing remaining in our number, so our binary number remains 11101110. Therefore 238 is represented as 11101110 in binary.
>Using your knowledge of counting in binary, add these colours to the palette:
Green: R=0, G=128, B=128 White: R= 255, G=255, B=255 Black: R=0, G=0, B=0 Purple: R=128, G=64, B=128 Orange: R=255, G=128, B=64 Yellow: R=255, G=255, B=64 Blue: R=128, G=255, B=255
>Draw this duck icon using those colours:
>Click the Next button to see your image in the game.
Did you make the duck icon? If not, collect the coin and click Back to return to the pixel art screen. (Make sure you don't close the game, or you will lose your changes).
If you successfully made the duck icon, click Next in the game, and move on to Step 5.
Step 5: Debug decimal to binary
Time to debug in level 5.
>Click Level 5 in the game.
Hmm, the wrong colours are used in this railway signal icon.
That purple needs to be red. Here are the correct decimal numbers. Can you convert these to binary? Red = 255, green = 0, blue = 0.
>Change purple in the palette to red.
That yellow needs to be dark red. Here are the decimal numbers: Red = 168, green = 0, blue = 32.
>Change yellow in the palette to dark red.
>Draw the correct colours in the pixel art icon.
>Click Next to see your image in the game.
Did you fix the railway signals icon? If not, collect the coin and click Back to return to the pixel art screen. (Make sure you don't close the game, or you will lose your changes).
If you successfully fixed the icon, click Next in the game, and move on to Step 6.
Step 6: Debug binary to decimal
More debugging in level 6.
>Click Level 6 in the game.
Dang, the wrong colors are used in this tree icon. This time we'll use decimal numbers from 0 to 255 instead of binary so you can practice converting them back.
That black needs to be green. Here are the correct binary numbers. Can you convert these to decimal? Red = 10011100, green = 11110010, blue = 00100001.
If you get stuck converting these binary numbers to decimal, check Step 4 for a refresher.
>Change black in the palette to green.
That blue needs to be brown. Here are the binary numbers: Red = 10110000, green = 01111010, blue = 01000110.
>Change blue in the palette to brown.
>Draw the correct colours in the pixel art icon.
>Click Next to see your image in the game.
Did you fix the tree icon? If not, collect the coin and click Back to return to the pixel art screen. (Make sure you don't close the game, or you will lose your changes).
If you successfully fixed the tree icon, move on to Step 7.
Step 7: What you've learned
Nice work. You've shown that you can: Create different colours by changing their RGB channels Convert decimal numbers to binary and vice versa Use 8-bit binary colours in images
Are you ready to move on to your next challenge?