Module 4- Build a Game

Look at Me

Mod 4 Lesson 3Graphics

Learning Objectives

To understand how images are stored in a computer.

To understand image compression and become familiar with different image file formats.

Images

What computer applications store images?

How do you think the computer stores these?

But the computer can only store numbers.

How can it take numbers and translate them into images?

We will look at a single character.

a

How is information stored on the computer?

Values are stored as numbers.

So how do you think it can store a

picture like the letter a.

How it is Saved

The first line consists of one white pixel, then three black, then one white.

Thus the first line is represented as 1, 3, 1.

Note: The first number always relates to the number of white pixels.

If the first pixel is black the line will begin with a zero.

White pixels, black pixels, white pixels, …

Use these rules to determine the image.

Next Image

Next Image

Draw a Coded Image

Put your name on the top and bottom papers. Draw a picture in the grid and when you have

finished, write the code numbers beside it. Copy the code numbers next to the bottom grid. We will cut the papers along the line, and give the

bottom image to someone else in class and see if they can create your image.

First & Last NameClass Title

PeriodDateTopic

Questions,Subtitles,Headings,Etc.

Class Notes

2 1/2”

3 to 4 sentence summary across the bottom of the last page of the day’s notes

Understanding Pictures

On the back of the picture worksheet.

Notes: Compression

It would be simpler to save a bunch of 1’s and 0’s where the 1’s are for a black pixel and the 0’s are for a white.

But if you have a lot of the same color in an image there are more efficient ways to store the information.

By grouping the pixels that have the same color, it will take less space to store the same information about an image.

Saving space is called “Compression” There are several ways to compress images

Module 4- Build a Game

Understanding Pictures

Compression – Making things smaller

Different Types of Compression

The following 2 images are photos of the same landscape, but one is saved using one form of compression and the other is saved using another form of compression.

Go back and forth to see if you can see a difference between the two images.

Compression Formats

The first image was saved using JPEG

The second image was saved using GIF

JPEG

Best for: Compressing high-quality images

such as photographs and detailed artwork, without sacrificing quality.

Supports 16 million colors. Handling subtle shadings and color

blends more efficiently.

JPEG (pronounced jay-peg) is the acronym for Joint Photographic Experts Group,

the name of the group that developed it. It is an image compression format for full color

(high-quality) images. This image compression method is very suitable for

photos.

How does JPEG Work: (Beyond the scope of this course) DCT - discrete cosine transform. This is a

tricky way to transform our image to another "image" of the same size (8*8), with new "colors" being called DCT-coefficients.

Quantization - replacing DCT-coefficients by "rounded" numbers.

Huffman encoding - a way to store what is obtained after quantization.

That's all the magic. Without details. In summary, the ideas of JPEG compression algorithms are: special transform of the image (DCT), rounding the resulting numbers (quantization of

coefficients) and smart coding of the result (Huffman) spending less info

for more frequent "letters".

GIF

Best for… Images with solid areas of color Line drawings or logos 256 colors Transparency effect Animation

GIF (pronounced with a hard 'g‘) is the acronym for Graphics Interchange Format, an image compression format limited to 256 colors. It is considered best for images with solid areas of color such as logos, or animation and is not as suitable for areas with subtle shadings such as photos.

Name the format for the following pictures.

How does GIF Work (Still beyond, but not by as much)

If we assign values to the pixels where: Blue = x Red = y Green = z, now we can describe this image row by row. The first row is all blue, so five x's would represent the five blue pixels in the first row. The following rows are a little more complicated:

1: x-x-x-x-x2: x-y-y-z-z3: y-z-y-z-y4: z-z-z-y-z5: x-x-x-x-x

When a GIF is compressed, the description could look more like this:

1: 5x2: x-2y-2z3: y-z-y-z-y4: 3z-y-z5: 5x

As you can see, longer stretches of a solid color make the file more compressible (lines 1 and 5 are the most compressed) and speckled images cannot compress (line 3 is not compressed at all). When the color changes with each pixel in a row, there is no shorter way to convey the information.

PNG

Open Source, no licence required by developers, unlike GIFs.

Widely supported by the Web.

Will never completely replace GIF, as it does not support animation.

PNG (pronounced ping) is the acronym for Portable Network Graphics, an image

compression format approved by the World Wide Web Consortium (W3C) as a replacement for GIF. GIFs use a patented data compression algorithm

and PNG is patent- and licence-free.

Summary: (Bottom of the page on notes)

Write all that you recall about.. Compression Pixel JPEG GIF PNG

Scratch - over to you…

Scratch accepts the following file formats for images or photos: JPG, BMP, PNG, and GIF (including animated

GIF). Find some images / photos on your

computer or on the internet and import them as sprites into Scratch.

Save these images to your IntroToProgramming folder.

You can choose backgrounds or characters.

Additions to your game: Include the following

A picture representing you A picture from the internet At the end of class, save it as YourNameMod4Lesson3

Open Notes Quiz on Friday:Sorts, Searches, Algorithms, Graphics, Building a Game, Programming in Scratch, …