Image

Coding - Binary

Counting with ones and zeros?

Outcome 1

On completion of this unit the student should be able to;

  • understand the role of binary in computers as they store, transmit and process information,
  • count in binary,
  • understand positional notation,
  • understand the base systems of binary, decimal and hexadecimal,
  • control the colour and positions of pixels in an image.

What you will do

In this unit we are going to learn about how computers store, transmit and process information using a numerical counting system called binary.

We will learn that binary is a different base system for counting se will learn the back story to how we count, using positional notation.

We will step into controlling images with numbers and making colours with the hexadecimal base 16 system of counting.

Quick menu

What is computing?

Image
The world's most powerful computer at Columbia University's Watson Lab, 612 West 115th Street NYC, 5th floor rear, 1954. (http://www.columbia.edu/cu/computinghistory/index.html. Retrieved 2019 0425)
Image

Learning intentions

Learning intentions should be set at the commencement of each unit, then at regular intervals during the task.

Read through the content on this page. Discuss what you think could be learnt and form them into three 'learning intentions'.  Use sentences like, 'I will learn about making 3d drawings', or I will learn about 'media codes'.

Write your three learning intentions.

For advanced learning intentions, go with 3 different levels. 

  • 1 - What you will learn. (For example, the media code of camera describes the techniques camera operators use to record a scene)
  • 2 - How what you will learn can be used to create meaning or structure. (For example, camera techniques are combined with sound and/ or editing to create suspense).
  • 3 - How could your understanding of the learning be extended or related to other learnings. (For example, the use of camera has changed over the years and the invention of digital formats have allowed anyone to become cinema photographers)
Image

Success criteria

Success criteria should be negotiated between students and their teacher. The class group agrees about what is successful completion of the task. Identification of success criteria is done at the commencement of each unit, then at regular intervals.

Now that you are familiar with what you will learn in this task, it's time to lock in how you will be able to demonstrate that you know it, or can do it. 

Write three success criteria, using sentences like the examples in the next column.

I will demonstrate that I have mastered the learning by;

  • 1 - I Can identify all of the camera techniques used in the selected clip.
  • 2 - I can use a camera to film clips in the ways I have identified.
  • 3 - I can explain how camera is combined with other codes to create meaning in a narrative.
Image

Introduction to computers, data, binary and ASCII

The first part of our task will be to talk about computers and computing and join our existing knowledge to future learning.

What do computers do?

What do you know about a computer? Talk to your partner and write down some points.

Let’s see if you thought about a computer like this:

Code academy what is a computer video

https://studio.code.org/s/csd1-2018/stage/4/puzzle/2

Computers do 4 things

  • Input,
  • Storage,
  • Processing,
  • output

Can you think of one example of each of these four actions?

What runs a computer?

Computers, even our brains run with power. Power is electricity. Electricity is an electromagnetic pulse in a wire.

Image
(https://giphy.com/explore/ oscilloscope. Retrieved 2019 0426)

Can we see electricity?

Think of a light globe. Think if it’s on, we see power. If it’s off, we see no power. Look at this image.

Image
Image
Image

How could we communicate information with only two lights?

Computers are really dumb. They only know ‘on or off’. That is all they know. They are really dumb. They don’t know images, sounds, movies or text. They only know on or off.

If they only know off and on do you think you could communicate with each other using just two coloured lights?

What would it look like? Maybe it might look something like this.

What’s a better way for us to write down ‘on’ or ‘off’ so we understand it?

Imagine if the light globes represent on letter. I used 8 pictures to represent just one letter. How many light globes would a whole book take? We need a better way to record our ons and offs. Let’s try thinking of off as ‘0’ and on as ‘1’. Let’s re-write the letter in my pictures like this; 01100001. (Can you see the same pattern?)
Image

This is a letter as a computer knows it! Find out what letter it is in the next section.

Image

Getting started with binary

In this section of the course we are going to learn about a strange thing called 'positional notation'. It's not really strange, in fact you use it all the time. It just means putting numbers in columns. But did you know, you can have different numbers of numbers that make up a column?

Bits and Bytes

You may have heard of bits and bytes. No? Have you heard of a megabyte? A gigabyte? What do these words mean? Think of the lights on and off. One light, or the smallest particle of storage in a computer is one ‘bit’. Storage or data transmission in computers are in multiples of bits. But bits are too tiny to really talk about so computer people talk about groups of bits at the same time. Bits are grouped into sets of 8. Each set of 8 bits is called a ‘byte’. (However, 8 isn’t just 8, its 8 columns and can make a really big number – more on that later).

So how big is a megabyte, or a gigabyte? A ‘meg’ is a million (1,000,000). A ‘gig’ is a billion (1,000,000,000)! So how many ons and offs can there be in 1 gigabyte of storage?

The number of bytes to a gigabyte is 1,073,741,824, and there are eight bits to a byte. Therefore, the number of bits to a gigabyte is 1,073,741,824 multiplied by 8, which equals 8,589,934,592.

So how do computers browse the web, how do they send messages? How do they edit movies or write letters? Computers are really smart. Even though they are really dumb, and they only know ‘on’ or ‘off’ or ‘1’ or ‘0’ they can read and process lots and lots and lots of 1s and 0s in a really quick time. They can process hundreds of billions of numbers in seconds. Everything inside a computer is either a ‘1’ or a ‘0’ and that’s it. There are no pictures, no numbers, no words, just ‘1’s and ‘0’s. And computers can read and process billions of them at a time.

Everything in a computer is a number?

That’s right. Everything in a computer is a number. Numbers are numbers, letters are numbers, pictures are numbers, sounds are numbers, text messages are numbers. Can you suggest a way to make each of these into numbers? I filled in the top two for you. In tables come up with a suggestion for how the following could be done.

What are these 1s and 0s? What is binary?

Now the new challenge is… How can we write every number we need for all this information with only ‘1’s and ‘0’s?

Wait a minute. How do we count anyway?

Let’s think about decimal counting and what it means. This is positional notation. We are going to explore three ways to use columns in differently for counting. • Binary – base 2 • Decimal – base 10 • Hexadecimal – base 16. Think about how we use columns to create numbers of high value in our decimal counting system.

Let's look at how this might work

We are going to explore positional notation then binary. Let's watch the videos shown here. These are pretty big videos that covers a lot from electricity to all kinds of counting. But let's go through them step by step then apply the learning in the tasks below.

tasks

Creating binary numbers
Imagine

Consider these four kinds of things (in human language) consider what they look like or sound like for us;

  1. Numbers
  2. Letters
  3. Pictures
  4. Sounds
  5. Video

Now write down a way to convert each one and record it as a number. Be careful, some exist once and are the same for ever, and some have the component of time changing them frequently.

Suggest a way each of them could be recorded as numbers.

Game it

Using a set of cards we can see if we can make a range of binary numbers. Let's get out to the front of the room. I need 5 people. Take one card each.

Image
Puzzle it

Now jump on this binary modeller program I made for you. You can make numbers by turning on and off lights. Work out what number I've made for you in the picture below. When we get up to ASCII, tell me what letter it is.

Now our activity is for you to make the following numbers;

  • 1, 2, 3, 4, 5, 6, 7, 8.
  • Then answer is it true that 1 + 1 = 10,
  • Describe the patterns you find. Are there any rules that unfold as binary numbers increase?
Image
Image

How are letters stored?

In this section we will apply out knowledge of binary counting and see if we can make a code to store letters.

tasks

Writing with binary
Make a code

Talk to your partner about how you might go about converting letters to numbers.

As you get started, think about how many characters there are in a keyboard. Can you guess? You can Google it if you want.

Next, think about relationships between letters. Is this important?

Which character would you start your code with? Why?

What is ASCII

Watch the first video on the right. It's again pretty big, but as you watch consider what are the benefits and the challenges in creating a unified system to record letters in numbers?

If you dare...

If you have the head for it watch the video on the right. Get ready to be blown away. What’s after ASCII? Are there really 100,000 characters in every language around the world? Enter UTF-8.

ASCII

Take a look at the table at the right. This depicts the way ASCII text converts to binary for storage and processing in a computer.

The ASCII code for a blank space is the decimal number 32, or the binary number 0010 00001. Why do you think it is important to have a code for a blank space?

And why are "A" and "a" given the numbers 65 and 97 respectively? Try to figure it out. The answer is in the way their binaries appear. Can you see what's so special about this number pair combination?

Image
Here is a chart to represent characters to decimal to binary.

tasks

Writing with binary

Draw up or print a table like this.

Use the ASCII code to write your first name or nickname in binary numbers. Begin with an uppercase letter and continuing with lowercase letters. Put the letters of your name in the first column.

Next, write a secret message for your partner to decode.

Image

How big is a file?

Could we work out how much disk space a book might take up if you typed it out? Consider the following:

How many characters of text are there in an average book? To help answer this question, select several different books of varying lengths. For each book, estimate the number of characters of text. Remember to count the punctuation marks and include the blank character between words and sentences. Since ASCII is an 8-bit code and requires 8 binary numbers to represent each letter, blank space, or punctuation mark, how many binary numbers does it take to represent the text of an average book? (Hint: Multiply 8 by the average number of text characters.)

Try it now. Let me know how big the file would be.

Image

Colours and counting...

In this section we will turn our attention to how pictures and made, recorded and transmitted for computers and TV screens. We will learn what pictures are made of and how their colours are written down.

Screens

Let's look at how this might work

To begin with let’s see what a screen really is. Watch this ‘Slow Mo’ picture and pixels, Skip to the second half of the video which shows how pixels make colours.

File size and image size. Are they the same?

Why are these images different file sizes? They are the same ‘size’ in centimetres but they take up different data space. Why? When you finish this section of the course you should be able to answer this question.

Each image has three pieces of information;

  1. Bits available per pixel
  2. File size in Kilobytes (groups of 8 columns of binary)
  3. File size in Bits (single columns of binary)
Image
  • 1 Bit per pixel
  • 41 KB
  • 328,000 Bits
Image
  • 8 Bits per pixel
  • 49 KB
  • 392,000 Bits
Image
  • 24 Bits per pixel
  • 79 KB
  • 632,000 Bits

tasks

Image building, pixel by pixel

In this set of tasks you are going to go to one set of lessons on a site called Code.org where you will use widgets to create images. You will learn about;

  • image size
  • bit depth
  • pixel colours

Click on the image at right to access the lessons on the site.

Task 1>1 bit colour depth

Visit the task 1 video by clicking on the image link at right. Use the widget to make a 4 x 4 pixel image. Question, what football team does this binary code make: 1010 1010 1010 1010?

Task 2>10 x 10 1 bit image

Click the 'more' arrow at the top of the Code.org webpage and select the second black and white task. See if you can type in binary to make the image shown at right.


Colour images

Click the 'more' arrow at the top of the Code.org webpage and select the third task, the colour pixelation tutorial. Watch the video on making colour with 3 bit depth pixels.

Task 3>3 bit per pixel

Finish the 4 x 2 pixel image in example 1.

Task 4>6 bit per pixel

Click on the link at the top of the page to go to the second stage of Lesson 3 tutorial.

Make a 8 x 3 pixel image with 6 bits per pixel.

Experiment with colours first, then see if you can make the set of colours shown at right.

As an extension activity, see if you can add two more lines below and create the same tonal ranges for yellow or purple.

This is going to get pretty complicated if we keep adding pixel bit depth and continue with binary. We need a better way. The next section introduces another way of counting.


Image

Task 1>

Image

Task 2>

Image
Image Image

Task 4>

How many stages in a pixel's brightness?

Introducing hexadecimal

Real RGB pictures use a system known as 'True' colour. This means each pixel has 24 bits of colour depth. It is made by;

  • R = 8 bits
  • G = 8 bits
  • B = 8 bits

Writing these down in binary is simply too long. This is going to create a number which is ((8 to the power of 8) to the power of 8). How big is that? In truth the number of colours is 16,777,216! Can't do it.

Hexadecimal is a base 15 counting scheme. What do you think this means? Let’s see if we can count to 15 with numbers and letters. When we work it make a table like the one below in your book and fill it in.

Image

Make this table to represent the first 15 places of Hexadecimal.

What number do RGB pixels go up to?

In this section we want to learn what does 'off', what does 'on' mean and how many steps are there in between on and off.

OK, for our understanding I'm going to call off '0%' and on '100%'. Does that make sense? But if we had 100% on a volume control what number would that be on the dial? Read on,

The real question is, what is the maximum number that can be written with 8 columns (bits) of binary? Let's work it out. Remember, each column is worth double the one to its right. So that's:

128+64+32+16+8+4+2+1 = ?

Hey, that equals 255. Therefore, in 8 Bits per colour (also know as 8 bits per channel), the number for 100% is 255.

But there's a catch. And that is, we also have '0'. So the real number of different increments from 0 to 100% is actually 256.

Now what's so special about that? Well, if you look back to the table you built above, tell me how many spaces were there between 0 and F?

So if I said you could make 8 bit colour with only two columns using hexadecimal counting system that would mean you would have to be able to make 256 with two columns! Let's see if we can do it. Multiply 16 x 16 and we get ..... 256!!

That's it, hexadecimal to the rescue, and I'm going to show you how we can represent each of the three channels (colours) in two columns, making six column hex numbers.

But before we start

Can you tell me what the hexadecimal number for 256 is?

And what about 0?

Ok, now do you remember how to make white? We have to have;

  • R @ 100%
  • G @ 100%
  • B @ 100%

That's each pixel fully on. So what would that number be in Hex? It is FFFFFF. And when we write it in web code its written #FFFFFF.

To prove graduations in R, G, B and Hex, study the images below. I have made all the shades of red from black to white. Read the way the hex values change in each image - and note the colour that is being made with the small white circle in the colour chart.

Then, we'll move onto making real 24 bit colour images with Hexadecimal.

Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
 

tasks

24 bit images in Hexadecimal
9 and 12 Bit colour depth

Flick to lesson 4 examples 1 and 2 to see hexadecimal in action. Remember these are not 6 column numbers yet as we are only up to 12 Bit colour.

Task 5>9 and 12 Bit colour depth

Click on the 'Continue to next stage' button to get to Lesson 5: Color Pixelation Freeplay. Set up a 5 x 3 pixel image in 24 bit colour. Flick over to Hexadecimal.

Now make black, dark red, red, light red and white on the top row. I made mine;

000000 AA3333 FF0000 FFAAAA FFFFFF

Then do the same for green then blue on the bottom row.

As an extension activity add another line and try to do the same with shades of yellow.


Task 6>Freeplay with hex

Now in the same Lesson 5 Freeplay, set up a new 12 x 12 pixel image in 24 bit colour. Keep it in Hexadecimal.

Make an image similar to the one shown on the right. To start I filled in every pixel with a grey, just to see where each number is in the pattern. Make a string of 999999 with breaks between them. (See image), then copy them 11 more times.

Yo can make the colours by eye or copy these numbers:

  • Dark blue = 3366ff
  • Mid blue = 6699ff
  • Light blue = bbccff
  • Light green = 66ff66
  • Mid green = 33cc33
  • Dark green = 009900
  • mountain = 9966ff
  • snow = ffffff

Task7>Free Freeplay

Now in the same Lesson 5 Freeplay, set up a new 12 x 12 pixel image in 24 bit colour. Keep it in Hexadecimal.

Make your own original image or try to create a logo that you know of. To find the hex numbers of colours you want click on the image at right to visit the w3schools.com color picker.

See how creative you can be.


Image
Set up 5 x 3 @ 24 Bits per pixel.
Image
Make your red row.
Image
Then complete the chart.

Image

Set up 12 x 12 @ 24 Bits per pixel.

Image

Fill in one line of grey.

Image
Copy all the greys to 11 more lines. This gives you the complete pattern.
Image

Edit the colours one by one. I just copied each colour over the top of the others. Then pasted complete lines. I made the mountain last.

Image

Click this image to visit this interactive color picker. It will give you hex numbers for every colour you need.

Image

Evaluation and deeper learning

In this section we will think about the learning we have done. We will review the main topics and evaluate our learning. Follow the steps in the tasks shown here to prepare your folio for presentation and grading.
What have I learnt?

Answer the following questions (on paper or if you use a computer, print them and stick them into your visual diary).

  1. Describe what is meant by 'positional notation'
  2. What do binary numbers really represent?
  3. Define the four jobs a computer does without using the term in your definition,
  4. What is a pixel and what is its role in an image?
  5. What does bit depth mean? Give an example and explain how it applies,
  6. What counting systems are base; 2, 10 and 16? Give examples and explain how they work.
  7. Pick one colour. Give the hex number for it. Now give a similar colour that is lighter and one that is darker. Explain what happens to the numbers to make the colour lighter or darker.
  8. Explain how grey is made in hex. Explain why this works?
  9. Explain what you already knew about the topics in this page before you started.
  10. Explain what you found out that you didn't know in the topics on this page.
Putting it together

Find where you wrote up what you thought the success criteria might be. Check that you have done something for all of the steps you wrote down.

Print final and organise your work book for submission.

Hand up your work on the due date as instructed.

tasks

Evaluation and deeper learning
Complete the evaluation, deeper learning and rating tasks as shown above.
[cbratingsystem form_id="2"]
Image

Assessment criteria

This task does not carry detailed assessment criteria. Please ensure that you have done the tasks and evaluations as shown on this page for assessment.