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.

9. Next Image

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

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

15. Learning Objectives  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 Get out your notes. Open note test on Thursday.

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

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

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

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

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

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

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

25. 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 Name the format for the following pictures.

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

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

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

31. Importing a Picture

32. Importing a Background

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