CMPT 165 Graphics Part 2. Nov 3 rd, 2015

Transcription

1 CMPT 165 Graphics Part 2 Nov 3 rd, 2015

2 Key concepts of Unit 5-Part 1 Image resolution Pixel, bits and bytes Colour info (intensity) vs. coordinates Colour-depth Color Dithering Compression Transparency 2

3 24-bit True colour Colour-depth Example from 3

4 8-bit Colour-depth Example from 4

5 Key concepts of Unit 5-Part 1 Image resolution Pixel, bits, unit of bytes Intensity vs. coordinates Colour-depth Monochrome, 8-, 16-, 24-bit, etc. Dithering How & Why Compression Lossy vs lossless Transparency Opacity, transparency, alpha channel Dithering illustrated (1-bit): 24-bit: 5

6 Compression A method to reduce file size Many compression algorithms for this They exploit some properties of the image E.g. leverage redundancies in pixels: Rather than store X-bit of data for every pixel, save this info instead: Ten 1 s in first 2 rows L. Tang L. Tang

7 Compression Compression ratio: FILESIZE_BEFORE FILESIZE_AFTER Higher generally preferred more compact 2 categories: 1. Lossless: no loss of data Uncompressing: recover original data as it was 2. Lossy: involves loss of data Achieves higher compression ratio At expense of lower image quality Why? GIF JPEG PNG Compression Lossless compression Lossy compression Lossless compression You may choose compression ratio (% of original file size) 7

8 Image resolution Pixel, bits, unit of bytes Intensity vs. coordinates Key concepts of Unit 5 Dithering illustrated (1-bit): 24-bit: Colour-depth Monochrome, 8-, 16-, 24-bit, etc. Dithering How & Why Compression Lossy vs lossless Transparency Opacity, alpha channel 8

9 Transparency Transparency? - Ability for light to pass through a medium Opacity? - Amount of light absorbed by a medium High opacity Low transparency Three ways to handle transparency info: 1. Don t store at all 2. 1-bit for each pixel (on or off) 3. As an additional channel (8-bit for each pixel) Known as alpha channel Gives various levels of opacity GIF JPEG PNG Transparency 1-bit None 8-bit 9

10 Animation Motion picture Motion is achieved by playing a series of static images (frames) Storing animation in graphics store all frames in single file GIF JPEG PNG Supports animation? Yes No Yes Creating animated graphics file: Online GIF-creators: PNG animation: use PhotoShop 10

11 Summary 3 file formats discussed so far: GIF JPEG PNG Colour depth 8-bit 24-bit or 8-bit 24-bit Compression Lossless Lossy Lossless Support for transparency Support for Animation? 1-bit No 8-bit Yes No Yes 11

12 Comparison of file formats GIF JPEG PNG Colour depth 8-bit 24-bit or 8-bit 24-bit Compression Support for transparency? Lossless compression Lossy compression 1-bit N/A 8-bit Lossless compression Support for Yes N/A Yes File animation? extension.gif.jpg.png ( File extension.gif.jpg.png dia.org/wiki/apn G) TIFF 8-bit or 16-bit Both available 8-bit No.tif or.tiff More comparisons at: 12

13 <map> <map> creates an image-map with clickable areas 1) Create the map: <map> <area> Required attribute: name="planetmap" Possible attributes: shape="rect" coords="x1,y1,x2,y2" shape="circle" coords="x,y,r" (0,0) (0,50) 2) Refer to the map in the calling image <img>: <img src="an_image.png" usemap="name_of_map" /> Inverse coordinate system! (75,25) (100,100) <img src="smile.gif" alt="smiley" height="100" width="100" usemap="#smile"> <map id="smile"> <area shape="rect" coords="0,50,100,100" href="mouth.html" alt="mouth"> <area shape="circle" coords="25,25,10" href="leye.pdf" alt="left eye"> <area shape="circle" coords="75,25,10" href="#reye" alt="right eye"> </map> 13

14 File formats covered so far GIF JPEG PNG Colour depth 8-bit 24-bit or 8-bit 24-bit Compression Support for transparency? Lossless compression Lossy compression 1-bit N/A 8-bit Support for Yes N/A Yes File animation? extension.gif.jpg.png File extension.gif.jpg.png Lossless compression TIFF 8-bit or 16-bit Both available 8-bit No.tif or.tiff These are known as bitmap: mapping from integers to bits Grid of pixels arrangement of (x,y,colour) 14

15 File formats covered so far GIF JPEG PNG Colour-depth 8-bit 24-bit or 8-bit 24-bit Compression Support for transparency? Lossless compression Lossy compression 1-bit N/A 8-bit Support for Yes N/A Yes File animation? extension.gif.jpg.png File extension.gif.jpg.png Lossless compression TIFF 8-bit or 16-bit Both available 8-bit No.tif or.tiff Today: SVG SVG = Scalable Vector Graphics 15

16 What is a vector? 16

17 Vector V=(-2,2) Q: V=(-1,1) x 2? Multiplication Scale (e.g. scale factor) coordinates V=(-1,1) V=(0,1) V=(1,1) 17

18 Scalable Vector Graphics Scalability of a system: ability to handle a growing amount of work in a well-behaved manner Scalable: remains doable despite of increased demands; example: 1. Draw a purple line (-1,1) 2. Draw a yellow line as vectors graphics: (-1,1) x 2? 3. Same lines drawn in a bitmap? How many more data? Possible data to store in SVG: (-1,1) #F0F (-1,1)x2 #FF0 18

19 Scalable Vector Graphics Text-based Represent graphics with mathematical constructs Shapes represented with lines Colour changes within shapes can also be compactly described mathematically Pro s: Highly compact file format Scalable: no concerns for image resolution Transformations will create no artifacts (e.g. zooming-in or rotating images, etc.) Con s: not rendered same way in all browsers (just like XHTML markup) 19

20 Example SVG Just like XHTML, SVG uses XML (similar syntax) <svg xmlns=" version="1.1"> </svg> <circle cx="125" cy="125" r="75" fill="orange" /> <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" /> <polyline points="50,150 50, , ,100" stroke="red" stroke-width="4" fill="none" /> <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" /> 20

21 SVG editors Open-source software: Inkscape (Mac, Windows, and Linux) Proprietary software: Adobe Illustrator (Mac and Windows) OmniGraffle (Mac) Online: 21

22 Questions?

23 Brief summary for Unit 5 Image resolution Pixel, bits, unit of bytes Intensity vs. coordinates Colour-depth Monochrome, 8-, 16-, 24-bit, etc. Opacity, transparency, alpha channel Colour dithering Compression Lossy vs lossless Scalable vector graphics Rasterization (There are more terms not listed here) 23

24 File formats for storing graphics GIF JPEG PNG TIF BMP SVG What is stored How is stored What strategies employed? Each format uses different strategies to store image data 24

25 Image editing software Popular editing: MS Paint (Windows) Adobe Photoshop (Mac and Windows) Pixelmator (Mac) GIMP (Mac, Windows, and Linux) 25

26 Finding images Paid picture services: no need to cite, pay $1-2 E.g. Stock Xchange, Fotolia, Shutterstock, Dreamstime Google Image Free to use or share Free to use or share, even commercially Websites where you don t need any permissions for using images in blog posts: Flickr, freeimages, morguefile, FreeFoto, FreeDigitalPhotos, Creative Commons, Pixabay Who owns it? Don t forget to caption your figures! 26

27 Suppl. Links Colour schemes kuler.adobe.com Online tool to create comics: 27

28 Questions?