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

2. Learning Objectives  To understand how images are stored in a computer.  To understand image compression and become familiar with different image file formats.

3. 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?

4. We will look at a single character. a

5. 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.

6. 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, …

7. Use these rules to determine the image.

8. Next Image

10. 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.

11. First & Last Name Class Title Period Date Topic 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.

12. 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

13. Module 4- Build a Game Understanding Pictures Compression – Making things smaller

14. 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.

17. Compression Formats  The first image was saved using JPEG  The second image was saved using GIF

18. JPEG Best for: CCompressing high-quality images such as photographs and detailed artwork, without sacrificing quality. SSupports 16 million colors. H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.

19. 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".

20. 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.

21. 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.file

24. 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.

25. Summary: (Bottom of the page on notes)  Write all that you recall about..  Compression  Pixel  JPEG  GIF  PNG

26. 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.

27. 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, …