Look at Me Mod 4 Lesson 3 Graphics Module 4- Build a Game

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.

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.

White pixels, black pixels, white pixels, … 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.

Summarize In your notes write a brief summary on coded images. How the

Open note test on Thursday. Learning Objectives Get out your notes. Open note test on Thursday. Understand two different methods of image compression Be able to import an image into your project Understand different sound formats. Be able to incorporate sounds into your project

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

Understanding Pictures Compression – Making things smaller Introduce Topic Graphics files take up a lot of space on computers. We are going to talk about compression, which decreases the file size of images so they can be stored and transmitted more efficiently. Compression involves minimizing the size in bytes of a graphics file or image file. Module 4- Build a Game

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.

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. This is the first image (It is a JPEG). Look at this picture and the following picture and see if you notice anything different about the quality of the picture.

This is the second picture (GIF) and is saved using a different form of compression. Look at the picture and see if you notice anything different as I move from one picture to the other.

Compression Formats The first image was saved using JPEG The second image was saved using GIF

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. 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. Let’s introduce the first file format for compressing images: JPEG. 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 colour (high-quality) images. This image compression method is very suitable for photos. It is good at dealing with subtle shadings that are commonly found in photos. You can see an example of a photo saved using the JPEG file format.

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) 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 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. GIF Best for… Images with solid areas of color Line drawings or logos 256 colors Transparency effect Animation The second type of file format used for compressing images is called GIF. GIF (pronounced with a hard 'g‘) is the acronym for Graphics Interchange Format, an image compression format limited to 256 colours. It is considered best for images with solid areas of colour such as logos, or animation and is not as suitable for areas with subtle shadings such as photos. You can see an example of a GIF here, with this picture having large blocks of colour.

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-x 2: x-y-y-z-z 3: y-z-y-z-y 4: z-z-z-y-z 5: x-x-x-x-x When a GIF is compressed, the description could look more like this: 1: 5x 2: x-2y-2z 3: y-z-y-z-y 4: 3z-y-z 5: 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. Name the format for the following pictures.

Now you have an understanding of JPEG and GIF formats. What format do you think this image is stored in?

What format do you think this image is stored in? This image (Slides 3 & 7) is a GIF and the previous image (on slides 2 & 6) is a JPEG. You can notice that the sky especially in the second image, the GIF image, is more pixelated and not as smooth as the first JPEG image. As discussed previously, JPEG is more suitable for photos.

PNG Open Source, no licence required by developers, unlike GIFs. 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. 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. The third file format we will discuss is PNG. 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. Unlike GIFs the PNG format does not support animation. You can see an example of a PNG here. The format supports transparency effects. PNG was created to replace the GIF format as it does not require a licence to develop. We say PNG is Open Source. Open Source software is free and is available to everyone to inspect, change, download, and explore as they wish. PNG is widely supported by the Web. It will never fully replace GIF however, as it does not support animation.

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. Scratch will allow you to use the following file formats for images or photos: JPEG (with the file extension .jpg), Bitmap (with the file extension .bmp), PNG (with the file extension .png) and GIF (with the file extension .gif). You can now find some images on your computer or on the Internet in the formats mentioned and import them into Scratch. Choose new backgrounds or new character images.

Importing a Picture 1) Click on ‘Costumes’ 2) Click on the folder ‘Upload costume from file’ 3) Navigate and find your picture. 4) Open

Importing a Background 2) Same process as with costumes. Click on ‘upload…’ folder Navigate to find the image Click on Open. 1) Select Stage

Additions to your game: Include the following A picture representing you Two pictures from the internet Add movement to the sprites. Random or user controlled. At the end of class, save it as YourNameMod4Lesson3