paint by pixels. - digital schoolhouse...digital schoolhouse, 18a blackbull yard, 24-28 hatton wall,...

D D M M M Y Y Y Y

Digital Schoolhouse, 18a Blackbull Yard, 24-28 Hatton Wall, London EC1N 8JH.Copyright © 2019 Digital Schoolhouse. All rights reserved.

Paint by Pixels.Understanding Graphics


Step 1Using a blank 8 x 8

grid shade in specific

squares to create an

image.


Step 2For each cell write a 1 or 0 where:

1 = shaded cell

0 = blank cell

For example:

0 0 1 1 1 1 1 0

0 1 0 0 0 0 0 1

0 1 0 0 0 0 0 1

0 0 1 1 1 1 1 0

0 0 0 0 1 0 0 0

0 0 0 0 1 0 0 0

0 0 0 0 1 0 0 0

0 0 0 0 1 0 0 0


Step 3

Pass along your 1’s and 0’s to a friend (without the original image)

When you receive your friends sheet of 1’s and 0’s take another blank grid and shade in the corresponding cells.

What’s the picture?


TAKING THIS FURTHERUsing the power of Spreadsheets


Setting up the Spreadsheet1. Open a spreadsheet

2. Format the spreadsheet to:

3. Row Height : 25

4. Column Width: 4

Or whatever setting thatresults in squares


Conditional Formatting1. Select Conditional Formatting

2. Change the settings so that the cells turn black when you

enter ‘1’


Let’s digitise this

Repeat the previous activity, but this time using a spreadsheet

1. Draw your own pixelated picture

2. Can your friend recreate your picture?

Without showing them the picture, what other information could you

give them to enable them to create an exact copy of your picture?


Just a little bit

You can give your friend all the information they need to

create your picture, just by telling them the 1’s and 0’s and

the combination you used.

It’s a bit like paint by numbers0 0 1 0 0 0 1 0 0

0 1 1 1 0 1 1 1 0

1 1 0 1 1 1 0 1 1

0 1 1 1 1 1 1 1 0

0 0 1 1 0 1 1 0 0

0 0 0 1 1 1 0 0 0

0 0 0 0 1 0 0 0 0

That’s what computers do when they send/transfer images…they just send the binary to each other


That’s how the computers do it

Computers are electrical machines

Fundamentally, everything on a computer has to get

converted into electrical pulses in order for the computer to

process it.

Modern computers contain lots and lots of switches


Lot’s of Switches

This type of light switch is

either on or off

It has only two states

This is why everything in

binary can be stored in 1’s

and 0’s

This is called binary


Lot’s of Switches

Computers contain lots of these switches

It’s the combination of switching them on and off that gives

them meaning


Binary DigitsBits

So a single 1 or 0 is a…


Some terminology

8 Bits= 1 byte

4 bits= half a byte = a nibble


…some more terminology

1024 bytes = 1 kilobyte

1024 kilobytes = 1 megabyte

1024 megabytes = 1 gigabyte

1024 gigabytes = 1 terabyte

Why isn’t a kilobyte 1000 bytes? 1024 seems a

strange number. How does it relate to binary?


So, how large is that file?

So for our black and white image:

1 pixel = 1 bit

Therefore, the file size for this image would be:

8 pixels across = 8 bits

8 pixels down = 8 bits

8 x 8 = 64 pixels

64 pixels = 64 bits


What about colour?Most of the images we see are colourful

So, how does the computer represent colour, using this same

technique?

In your pairs/groups, use your spreadsheets to see if you can find

out the answer to the question above

Remember, computers only understand binary which contains only

1’s and 0’s


Representing Colour

The answer?

Increase the number of bits per pixel

2 bits per pixel gives you four different combinations,

therefore 4 colours


Which Pokémon is this?


Your Turn

1. Choose the 4 colours that you want to represent

2. Change the conditional formatting

3. Create a colourful image

4. Send the code to your friend

5. Can they recreate your image?


What happens if we increase the bits per pixel?

We can represent more colours

But…

We also increase the file size


Bits per pixel?

Number of bits per pixel Number of colours possible

1 2

2 4

3 8

8 (1 byte) 256

16 (2 bytes) also known as High Colour 65, 536

24 (3 bytes) also known as True Colour 16, 777, 216

Usually, true colour is defined to mean at least 256 shades of red, green, and blue (one byte each). The human eye can discriminate up to ten million colours


24 bits

8 bits

4 bits

2 bits

1 bitColour DepthThe number of bits used for each pixel (or dot). The more bits used = the more colours that can be represented.

http://en.wikipedia.org/wiki/File:Truecolor.png

http://en.wikipedia.org/wiki/File:8_bit.png


http://en.wikipedia.org/wiki/File:2_bit.PNG


paint by pixels. - digital schoolhouse...digital schoolhouse, 18a blackbull yard, 24-28 hatton wall,...

Documents