1A

BITMAP COMPUTER GRAPHICS

Vocabulary:
Bitmap: A map that stores information about many pixels (for example, the color and
position of each pixel). The map is used on a computer to generate a picture.

Pixel: A single point in a bitmap-based computer graphic.

Bitmaps are one type of graphic that a computer can store and display. Vectors are another type of computer graphic. We'll
talk about those later. Let's talk about bitmaps!

DID YOU KNOW?

Does your parent or teacher have a digital camera? Did you know
that when a digital camera takes photos, it uses bitmaps to do it?

If you look very, very closely at a photo on a computer, you can see
the individual pixels that make it up. Take for example,this photo of a
tomato. Look what happens when we zoom in on it:

These squares are called pixels!

HOW BITMAPS WORK

Here's an example of a smiley face graphic you might see on a computer. How does the computer store
and display this graphic? We give the computer instructions on how to build the graphic, pixel by pixel, kind of
like a patchwork quilt. We call this patchwork quilt a bitmap. To see how we might instruct a computer to draw
this smiley face, see the grid and pixel instructions below:

A B C D E F
In a bitmap graphic, the 1 B1 E1 SMILEY FACE BITMAP
computer doesn't understand
that the face has two blue 2 B2 E2
eyes and a red mouth. It only
Blue pixels:
3
understands that the B1, B2, B1, B2, E1, E2
E1, and E2 pixels are blue, and 4 A4 F4
that the A4, B5, C6, D6, E5, and
F4 pixels are red.
5 B5 E5 Red pixels:
6 C6 D6 A4, B5, C6, D6, E5, F4

CREATE YOUR OWN BITMAPS!

Using your graph paper and colored pencils, create your own bitmaps using a 6 x 6 grid! Then, think about how you would
instruct a computer to re-create your bitmaps. Which pixels would you tell the computer to make red? Which ones would you
tell the computer to make blue?
Here's some examples to give you some ideas! We'll tell you how to make these on the next page.

This resource sheet is provided to you by Red Hat under a Creative Commons Attribution 3.0 license.
Please feel free to copy, distribute, and share this with your friends!.
1B
BITMAP COMPUTER GRAPHICS
Here's the instructions to create the bitmap examples we gave you on
page 1A!

Give these characters a try on your own!

Label the the squares on your graph paper with letters on the top, and numbers along the
left side, inside of the boxes, like on the graph paper below. Next, fill in the squares for each color
as indicated below on your graph paper. We show you an example of how to do one of the characters
below!

Bitmap instructions:

Blue pixels: Blue pixels: Green pixels: Blue pixels:

A2, F2 A2, A3, B3, E2, E3, F3 B3, E3 A1, A2, B1, B2,
Green pixels: Red pixels: Red pixels: C1, D1, E1, E2,
B2, E2 D5, D6, E5, E6 B6, C6, D6, E6 F1, F2
Red pixels: Yellow pixels: Blue pixels: Red pixels:
B5, C4, C6, D4, A1, A4, A5, A6, B1, B4, A1, A2, A3, A4, A5, A6, A4, B5, C6, D6,
D6, E5 B5, B6, C1, C2, C3, C4, B4, B5, C1, C2, C3, C4, E5, F4
C5, C6, D1, D2, D3, D4, C5, D1, D2, D3, D4, D5,
E1, E4, F1, F4, F5, F6 E4, E5, F1, F2, F3, F4,
F5, F6

This resource sheet is provided to you by Red Hat under a Creative Commons Attribution 3.0 license.
Please feel free to copy, distribute, and share this with your friends!.
2A
VECTOR COMPUTER GRAPHICS
Vocabulary:
Vector: A type of computer graphic that defines a graphic based on points, lines,
curves, and shapes.
Node: A point in a vector file. If you connect two nodes together, you get a line!

Vectors are another type of computer graphic that we can use to create computer graphics. Unlike bitmaps, vectors do not
store information about individual pixels in a graphic. Let's learn more about vectors!

DID YOU KNOW?

When you zoom in on a bitmap graphic, the image will start turning into large blocks - pixels. If you keep zooming
and zooming, the graphic won't look smooth and clear anymore. With vectors, you can keep zooming and the graphic
does not lose any quality. To see how this works, compare the bitmap monkey and the vector monkey below. It's the
same image, but one is created using bitmap, the other using vector:

Bitmap Monkey Vector Monkey

32x32 pixels

This is a pixel!

HOW VECTORS WORK

Here's another example of a smiley face graphic you might see on a computer. How does the computer
store and display this graphic? We give the computer instructions on how to build the graphic based on
points, lines, and shapes. It's a little bit like connect-the-dots - we call the dots nodes. We tell the
computer where the nodes should be. Then we tell it to connect the nodes with lines or shapes. To see
we might tell computer to draw this smiley face, see the grid and pixel instructions below:

A B C D E F
In a vector graphic, the computer doesn't know
about pixels. We don't tell the computer how SMILEY FACE VECTOR
1
to fill in a grid of pixels like we do with a bitmap.
Nodes:
2
Instead, with vector graphics we tell the
3
A3, B2, B5, D3, D5, E3
computer about important nodes. We tell it
where those nodes are. Then we tell it what 4 Circles:
lines or shapes to draw at the nodes.
5 Draw blue circles at B2 and D3.
In this smiley face picture, the computer
understands that there are two circles and
6 Lines:
three lines. Draw a red line from A3 to B5.
These green dots Draw a red line from B5 to D5.
are nodes!
Draw a red line from D5 to E3.

This resource sheet is provided to you by Red Hat under a Creative Commons Attribution 3.0 license.
Please feel free to copy, distribute, and share this with your friends!.
2B
VECTOR COMPUTER GRAPHICS
Create your own vector graphics on this worksheet!

Draw your own vector graphics!

Label the your graph paper with letters on the top, and numbers along the left side, but this time put the labels on the lines,
not on the square, like on the graph paper below. Next, follow the instructions below to create a vector drawing. Use your
ruler if you need it to connect nodes with a line! We did an example for you below.

Vector instructions:

Nodes: Nodes: Nodes:

A4, B4, B6, D2, F4, F6, A7, C1, C4, C5, C7, D2, B3, C5, D5, E5, F3,
G4 E1, E4, E5, E7, G7
Eyes:
Roof: Outer shape: Draw a yellow circle that is 2
Draw a red line from A4 to D2. Draw a red line from A7 to C1. pixels wide, centered at node B3.
Draw a red line from D2 to G4. Draw a red line from C1 to E1. Draw a yellow circle that is 2
Draw a red line from A4 to G4. Draw a red line from E1 to G7. pixels wide, centered at node E3.
Fill shape in red. Draw a red line from A7 to C7. Draw a blue circle that is 1
Draw a red line from E7 to G7. pixel wide, centered at node B3.
House:
Draw a red line from C7 to C5. Draw a blue circle that is 1
Draw a blue line from B4 to F4.
Draw a red line from C5 to E5. pixel wide, centered at node E3.
Draw a blue line from F4 to F6.
Draw a red line from E5 to E7.
Draw a blue line from B6 to F6. Face:
Draw a blue line from B4 to B6. Inner shape: Draw a green circle that is 4
Fill shape in blue. Draw a red line from C4 to D2. pixels wide, centered at node D5.
Draw a red line from D2 to E4.
Mouth:
Draw a red line from C4 to E4.
Draw a red line from C5 to E5.

This resource sheet is provided to you by Red Hat under a Creative Commons Attribution 3.0 license.
Please feel free to copy, distribute, and share this with your friends!.