CS29 : Painting Pictures


https://docs.google.com/presentation/d/1v2kZ8v2zbftnwT-pIRRsJH-foaYhLRPffiAMoWA3Seo/preview
A detailed treatment of the storage and representation of images including encoding and decoding methods. It is not covered in iGCSE.

We are learning ...
  • How images are represented using bitmaps
So that we can ...
  • Describe the use of pixels in a bitmap
  • Understand the relationship between the number of bits per pixel and the number of colours
  • State metadata commonly included with bitmap images
  • Describe the effect of colour depth and resolution on file size
  • Convert a black and white image in to binary data and vice versa

CGP The Revision GuidePage 73
CGP Exam Practice WorkbookPage 82

# Get Ready.png

Activity 1
What are bitmap images?

Images are very efficient ways of representing and communicating information. Human beings are very good at seeing patterns in visual displays. Images include photographs and drawing or paintings and graphics such as graphs and charts. Images can be altered and manipulated, particularly if in digital form. In this first activity, you will ...


Task 1.1 Tiny points of light
Where we learn what images on a computer screen are made from

Reading

Read the following information, carefully, to your shoulder partner.

Pixels : A digital images consists of a rectangular array or grid of "pixture elements", called pixels.  VDUs (Visual display units) display pictures by dividing the display screen into thousands (or millions) of pixels, arranged into rows and columns. A million or more pixels makes up a typical image. You can see individual pixels by looking at a computer screen with a magnifying glass. A bitmap image is also made up from individual pixels. These are visible when you zoom in on the image.  A pixel is a single point in a graphical image.

Monster image originally from IconArchive


On the web

Use Google advanced image search to choose a bitmap image of a flower which is 100 pixels wide by 100 pixel high. Save the image on your computer and open it in Windows Image Viewer (Right click > Preview). Zoom in as far as you can and discuss with a partner what you see. 

In your notebook / folders

Take a screen shot of the Image Viewer window and print it out to stick in your notebooks / folders.


Task 1.2 Inspecting your screen
Where we learn that computer screens use pixels to display images

Using a good magnifying glass or a short focus webcam, look carefully at your computer screen. What do you see? Try moving the mouse in front of the magnifying glass. If you do not have a magnifying glass, click here to view an image. Discuss with a partner what you see. No need to write anything :)

How a TV Works in Slow Motion - The Slow Mo Guys (11:38)

Activity 2
Encoding images as bitmaps

https://www.piskelapp.com/
Click to load PiskelApp and make a bitmap!

Task 2.1 Encode two simple images as bitmaps
Where we learn how to encode an image into a bitmap

On the worksheet

If your teacher has not already given you a copy, download the Bitmap Encoding Exercise and print yourself a copy. Follow the instructions on the worksheet.

Calculating filesize

In these two images, each pixel is encoded with a single bit of data. If the pixel was white, we encoded it with a 0 and if it was black, we encoded it with a 1. To calculate the raw data storage required for such an image, we can use this formula ...


 BEWARE : bits per pixel is often written as bit depth or colour depth 

Make a note of this equation in your notebooks and then answer the following questions showing your working.
  1. The first image you encoded was 8 pixel wide by 8 pixels high and you represented each pixel using just one bit. Calculate the filesize of this image in bytes using the formula above.

  2. The second image was 16 pixels wide by 16 pixels high. Again, you used one bit per pixel. Calculate the filesize of this image in bytes using the formula above.

  3. Even though these simple images only use two colours, you can still get some nice effects. The image of the spacecraft is 1920 pixels wide by 1080 pixels high but only uses one bit per pixel (click to enlarge it). Calculate the filesize of this image in bytes using the formula above.

    https://drive.google.com/file/d/0B83yXMOilskaNGpqcHN0WGR6WUE/preview


Activity 3
Decoding bitmaps

In order to decode a bitmap, we need to know two things. First the width and height of the grid of pixels and also the number of bits per pixel we have used to encode it.

Task 3.1 Drawing bitmaps
Where we learn how to decode a bitmap into an image

On squared paper

Get some squared paper from your teacher (or download some here) and decode the following bitmaps. They are all 16 pixels wide by 16 pixels high and are encoded using 1 bit per pixel. To make it harder, I've not written them out in a grid the right size (but I have broken them up into bytes to make it easier!)

Can you figure out a quick way to draw them?

Image 1
It's scary!

(01-04) 00000111 11100000 00011111 11111000 00111000 00011100 01110000 00001110
(05-08) 01100000 00000110 11001000 00010011 11011100 00111011 11011110 01111011
(09-12) 11001110 01110011 11000110 01100011 11000000 00000011 01111001 10011110
(13-16) 00111101 10111100 00001100 00110000 00001100 00110000 00001111 11110000


Image 2
What's that in the sky?

(01-04) 00000000 00000000 00100000 00000100 00010000 00001000 00001000 00010000
(05-08) 00011111 11111000 00110011 11001100 01100111 11100110 11111111 11111111
(09-12) 10111111 11111101 10111111 11111101 10010111 11101001 00010011 11001000
(13-16) 00010000 00001000 00001000 00010000 00000100 00100000 00000000 00000000

Image 3
That looks nice and cosy

(01-04) 00000000 00011000 00000001 10011000 00000110 01111000 00011001 10011000
(05-08) 01100111 11100110 10011111 11111001 00111111 11111100 00110001 10001100
(09-12) 00110001 10001100 00111111 11111100 00111111 11111100 00110001 00000100
(13-16) 00110001 00000100 00110001 00000100 00110001 11111100 00110001 11111100



Activity 4
Colour depth and palettes

All the bitmaps that we have looked at use one bit to represent each pixel. This means that the bitmap can only have two colours because one bit can either be 0 or 1. The two colours don't have to be black and white however ...


Task 4.1 Can I make a bitmap with more than 2 colours?
Where we learn how increasing the number of bits per pixel increases the number of colours

16 colour bitmap canvas editor

Download my wonderful Bitmap Canvas Editor. It is an Excel spreadsheet so you will need Microsoft Excel in order to open it (obviously). Because you have downloaded it from the web, you will need to click the  Enable Editing  button on the yellow toolbar and because it also contains 'macros' (special code which helps the spreadsheet to work), you will need to click the  Enable Content  button to make the editor work!


You could try making one of these! (originally from PhotonStorm, creators of Phaser Gaming Engine)

How many colours?

You should now have seen that if we use 4 bits to represent each pixel, we can have up to 16 different colours - there are 16 unique combinations of 4 bits and each one can be used to represent a colour! So, if we want more than 2 colours, we simply use more bits per pixel - think binary before you answer these questions.
  1. How many colours could you have with 2 bits per pixel?
  2. How many colours could you have with 3 bits per pixel?
  3. How many colours could you have with 4 bits per pixel?
  4. How many colours could you have with 5 bits per pixel?
  5. How many colours could you have with 8 bits per pixel?
  6. How many colours could you have with 16 bits per pixel?
  7. How many colours could you have with 24 bits per pixel? (This is called 'true colour')
  8. How many colours could you have with 32 bits per pixel? (This is far more than the human eye can decipher)

ADD STEP ABOUT COLOURS - RGB (24 BITS) AND HEX CODES



Altering the colour palette

When you created your own 16 colour bitmap, you might have altered the colour palette. Watch the video and try the skills out yourself either on the Turkey image which you can download or on one of your own. If you choose an image of your own, you will probably need to change the file type to gif.

Yes, I know I called it a chicken rather than a turkey ...


Task 4.2 Calculating the file size of an image with a larger colour palette.
Where we learn to calculate file sizes for images with larger colour depth

How to calculate filesize

You can calculate the filesize of an image which uses more than 1 bit per pixel in the same way as we did before - using this equation :


 BEWARE : bits per pixel is often written as bit depth or colour depth 

In general, you should also add 10% extra to the file size for metadata, colour palette information, pixel dimensions and other extra information (see later in the topic). Make a note of this equation in your notebooks / on paper.

Practical calculations

Answer the following questions in full sentences. Calculate the filesize in bytes of the following images. Remember to add an extra 10% on top to account for metadata.
  1. 480 x 320 pixel, 1 bit per pixel image
  2. 1024 x 768 pixel, 2 bit per pixel image
  3. 768 x 1024, 8 bit per pixel image
  4. 468 x 960, 256 colour image (HINT : How many bits would you need for 256 colours?)
  5. 1920 x 1080, 65536 colour image (HINT : How many bits would you need for 65536 colours?)



Activity 5
Image resolution


Task 5.1 Researching resolution
Where we learn about the different meanings of the term 'resolution' ...

For this activity, create a word processed document with a suitable header, footer and title and use this make notes.

Reading

Read the information in the notebox and take a screen clipping and past it into your word document.

There are two commonly used definitions of the term resolution ...
  • pixel dimensions (width x height)
  • pixel density
    - Pixels Per Inch (PPI) for displays (like monitors / phones)
    - Dots Per Inch (DPI) for scanners and printers



Research online

Visit the Auction Repair website and read about the difference between these two types of 'resolution'.

Make some notes

Use the information from the Auction repair website to write some notes about the different meanings of the term resolution.

Complete these sentences

Complete these sentences in your word document. Underline the missing words or write them in a different colour to make it easier to see if you have got the answers correct!
  1. The term resolution can mean  _ _ _ _ _    _ _ _ _ _ _ _ _ _ _  or  _ _ _ _ _    _ _ _ _ _ _ _.
  2. Pixel density for displays is measured in  _ _ _ _ _ _    _ _ _    _ _ _ _  ( _ _ _ ).
  3. Pixel density for scanners and printers is measured in  _ _ _ _    _ _ _    _ _ _ _  ( _ _ _ ).
  4. An image with a bit depth of 24 can use up to  _ _ , _ _ _ , _ _ _  colours.
  5. It is  _ _ _ _ _ _ _ _ _ _  to state the size of a pixel without knowledge of the pixel density.
  6. If I increase the pixel density of an image, it will get  _ _ _ _ _ _ _.
  7. If I increase the pixel dimensions of an image at the same pixel density, it will get  _ _ _ _ _ _.
  8. If I increase the pixel density of an image but maintain the physical size, it will become  _ _ _ _ _ _ _.



Activity 6
Metadata

When a bitmap is stored, other information needs to be stored with it to describe what it's like. For instance, the width and height, file type, colour palette and other stuff. This stuff is called metadata - literally, 'data about data'. It accounts for a small part of the filesize of an image.


Task 6.1 Revealing secrets
Where we learn how to interrogate images to find metadata

Download my holiday snap to your computer

Download the following image to your computer ... 

Be careful who you send your photo to - it might contain information which reveals where it was taken.
"Downpatrick Head"

Upload my holiday snap to a metadata extractor

Upload it to Jeffrey's Image Metadata Viewer (or Metapicz if it's not available) and look very carefully at the information that the website gives you about the image ...

Not all of them - social media sites tend to strip it from the photos to protect you.

In your notebook

Using the information you have found, you should be able to answer these questions ...
  1. When was my Birthday?
  2. What phone did I have at the time it was taken?
  3. Where is 'Downpatrick Head'?
  4. Did I use a flash when I took the photo?
  5. What time of day did I take the photo?
  6. What is the pixel width and height of the image?
  7. Can you find a useful tip to protect yourself? (I've added this metadata myself - shhh!)



Assessment Task (Homework)

What's the question? Come up with questions for these answers! Make the questions are hard as possible (but not too hard that no one can work out what they are!)
  1. bitmap
  2. pixel
  3. resolution
  4. colour depth
  5. file size
  6. metadata
Grading rubric

MASTER : 
You have come up with some tricky questions but I can still work out the answers!
APPRENTICE : 
You have come up with some sticky questions and I can't really work out the answers!
NOVICE : 
You have come up with some bricky questions and I have no idea what the answers are because the questions are completely unrelated to computer science.

# Flash cards.png
Click to load key word list to help you make your own flash cards 


Hungry for more?

https://voxeltiles.files.wordpress.com/2015/04/fabricas-4k.png

Enough about flat pixels, how about 3D ones? Technically, they are called voxels - meaning volumetric (x) element, made famous in 3D voxel games like Minecraft and Crossy Road.
  • Use this simple voxel editor to make your own 3D bitmap.
  • Create your own voxel shape to 3D print using the Voxel Builder website.
  • Check out some samples of voxel development for browser games at VoxelJS. My particular favourite is Voxel Oculus but it makes my eyes hurt.
EYES

Finally, here is a slightly more complex bitmap image generator written in Python. I've commented the code significantly so it should be pretty easy to change. The bitmap is generated in the same folder as the script. If you want a bigger screen, click 'Open in repl.it' ...

Image drawer


Frequently Asked Questions (FAQ)