Text, colours and pictures · Computer Basics
If a computer can only store numbers, how does it store a message, a photo or a song?
Course contentsWhy you need it
Every message you send, every photo you take and every song you play is turned into numbers, and the numbers into bits.
Knowing how explains things you meet every day: why a video file is so much bigger than a text message, why text sometimes turns into strange symbols, and what MB and GB really measure.
The intuition
The trick is an agreement: everyone agrees which number stands for what.
Text. Every character gets a number. In the agreement called Unicode, A is 65, B is 66, a is 97, ! is 33 and 你 is 20320. A message is just a list of these numbers. Garbled text like ä½ å¥½ appears when a program reads the numbers using the wrong agreement.
Colours. A screen is made of tiny dots called pixels. Each pixel mixes red, green and blue light, each from 0 (off) to 255 (full brightness):
| Red, green, blue | Colour |
|---|---|
| 255, 0, 0 | red |
| 255, 255, 0 | yellow (red + green light) |
| 0, 0, 0 | black (all off) |
| 255, 255, 255 | white (all full) |
Pictures. A photo is a grid of pixels, so it's a long list of colour numbers. A 12-megapixel phone photo has 12 million pixels.
Sound. A microphone measures the sound wave tens of thousands of times a second, and each measurement is a number.
Sizes. Because everything ends up as bytes, sizes are counted in bytes:
| Unit | Size | Roughly holds |
|---|---|---|
| 1 byte | 8 bits | one English letter |
| 1 KB (kilobyte) | 1,000 bytes | a short email |
| 1 MB (megabyte) | 1,000 KB | one phone photo is a few MB |
| 1 GB (gigabyte) | 1,000 MB | hundreds of photos, or about an hour of ordinary video |
| 1 TB (terabyte) | 1,000 GB | a large hard drive |
Some systems count 1,024 instead of 1,000 for each step, which is why a "256 GB" phone shows a little less free space.
Definition
Character encoding
A character encoding is an agreed table that maps each character to a number, so that text can be stored as bits.
Unicode is the encoding used almost everywhere today. It covers English, Chinese, emoji and nearly every other writing system.
Pixel
A pixel is the smallest dot of colour on a screen or in a digital image.
RGB
RGB describes a colour by how much red, green and blue light it contains, each usually from 0 to 255.
Examples
Text is numbers
Try it yourselfEach character and its Unicode number. Put your own name between the quotes, or try 你好.
message = "Hi!" # change me 改这里
for ch in message:
print(ch, "->", ord(ch))- L1The input: three characters.
message = "Hi!" - L3H is 72 in Unicode.
H -> 72 - L3Lower-case i has its own number: 105.
i -> 105 - L3Even punctuation is a number.
! -> 33
A tiny picture
Try it yourselfA black-and-white picture can use one bit per pixel: 1 is dark, 0 is light. Change some 0s and 1s and draw your own. Colour photos store three numbers per pixel instead.
picture = [
"01010",
"11111",
"11111",
"01110",
"00100",
]
for row in picture:
line = ""
for bit in row:
if bit == "1":
line = line + "#"
else:
line = line + "."
print(line)- L1Five rows of five bits: 25 pixels.
5 × 5 - L8Go through the picture one row at a time.
row = "01010" - L12A 1 becomes a dark dot.
# - L14A 0 becomes a light dot.
. - L15Print the finished row.
.#.#.
How big is a photo?
Try it yourselfA 12-megapixel photo, with 3 bytes (red, green, blue) per pixel. Phones squeeze it down to a few MB by storing it cleverly; that's called compression.
width = 4000
height = 3000
pixels = width * height
size = pixels * 3 # red, green and blue: 3 bytes each pixel
print(pixels, "pixels")
print(size // 1000000, "MB before compression")- L34000 × 3000 pixels.
pixels = 12000000 - L4Three bytes for every pixel.
size = 36000000 - L636 million bytes is 36 MB.
36 MB before compression
Common mistakes
Upper and lower case are different characters
A is 65 and a is 97. To a computer they are as different as A and Z, which is why a password is case-sensitive.
The digit 7 is not the number 7
As text, the character 7 is stored as 55. Only when a program treats it as a number does it mean seven. You'll meet this again in Python.
Garbled text isn't broken data
When text turns into symbols, the bytes are usually fine. They were just read with the wrong encoding. Opening the file with the right one (almost always UTF-8, the common form of Unicode) brings the text back.
Quick quiz
1. A pixel is (255, 255, 255): red, green and blue all at full brightness. What colour is it?
Show the answer
Answer: B
Mixing all three lights at full gives white. All three at 0 is black, like a screen that's switched off.
2. In Unicode, A is 65, B is 66 and C is 67. What number is E?
Show the answer
Answer: B
The capital letters are numbered in order: D is 68 and E is 69.
3. Which file is likely to be the biggest?
Show the answer
Answer: C
A video is many pictures every second plus sound, so it's far bigger than one photo. Text is tiny: about one byte per English letter.
Key points
- Text, pictures and sound all become numbers by agreement: Unicode for characters, RGB for colours.
- A picture is a grid of pixels; each pixel is a few numbers.
- Sizes count bytes: KB, MB, GB, TB, each about 1,000 times the one before.
Practice
3 short exercises: think it through, change something and see what happens, then do one yourself. Answers are checked the moment you submit.
- ThinkMix the light
A pixel is (255, 0, 0). Another pixel is (0, 0, 255). Which colours are they?
- ChangeSpell a word
This machine turns Unicode numbers back into text. Right now it prints
Cat.Change the numbers in the list so it prints **
Dog**. Some codes you'll need:D o g 68 111 103 - Your turnDraw with bits
Here is a 3 × 3 picture.
#is a dark pixel and.is a light one:#.# .#. #.#Write the picture as 9 bits, row by row from the top, with 1 for dark and 0 for light.
Tip: you can type it into the tiny-picture machine on the right to check.
Practise this lesson
Open the interactive lesson to edit and run these examples and solve the exercises with instant feedback. Free to start, no sign-up.
Interactive lessons open in order. If you have not done the earlier ones yet, you start at the course map.
Terms in this lesson
| Term | Chinese | Definition |
|---|---|---|
| Character encoding | 字符编码 | An agreed table that gives every character a number. |
| Unicode | Unicode 统一码 | The character encoding used almost everywhere, covering nearly every writing system and emoji. |
| Pixel | 像素 | One dot of colour on a screen or in a digital image. |
| RGB | RGB 红绿蓝 | A colour written as amounts of red, green and blue light, each 0 to 255. |
| Megabyte (MB) | 兆字节 | About a million bytes; a phone photo is usually a few MB. |
| Compression | 压缩 | Storing data in fewer bytes by encoding it cleverly. |