CMPT 165 Graphics – Part 2

Nov 3rd, 2015

Key concepts of Unit 5-Part 1

2

Image resolution

Pixel, bits and bytes

Colour info (intensity) vs. coordinates

Colour-depth

Color Dithering

Compression

Transparency

Colour-depth

3

24-bit “True colour”

Example from https://en.wikipedia.org/wiki/List_of_monochrome_and_RGB_palettes

8-bit

Colour-depth

4

Example from https://en.wikipedia.org/wiki/List_of_monochrome_and_RGB_palettes

Key concepts of Unit 5-Part 1

5

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

24-bit: Dithering illustrated (1-bit):

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 ©

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?

7

GIF JPEG PNG

Compression Lossless compression Lossy compression Lossless compression

You may choose compression ratio (% of original file size)

Key concepts of Unit 5

8

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, alpha channel

24-bit: Dithering illustrated (1-bit):

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

9

GIF JPEG PNG

Transparency 1-bit None 8-bit

Animation “Motion picture”

• Motion is achieved by playing a series of static images (frames)

• Storing animation in graphics store all frames in single file

Creating animated graphics file:

• Online GIF-creators:

– https://imgflip.com/images-to-gif

– http://gifmaker.me/

– …

• PNG animation: use PhotoShop

10

GIF JPEG PNG

Supports animation? Yes No Yes

Summary 3 file formats discussed so far:

11

GIF JPEG PNG

Colour depth

8-bit 24-bit or 8-bit 24-bit

Compression

Lossless Lossy Lossless

Support for transparency

1-bit No 8-bit

Support for Animation?

Yes No Yes image/png

File extension .gif .jpg .png

File extension .gif .jpg .png

Comparison of file formats

TIFF

8-bit or 16-bit

Both available

8-bit

No

.tif or .tiff

12

GIF JPEG PNG

Colour depth

8-bit 24-bit or 8-bit 24-bit

Compression

Lossless compression

Lossy compression

Lossless compression

Support for transparency?

1-bit N/A 8-bit

Support for animation?

Yes N/A Yes (https://en.wikipedia.org/wiki/APNG)

More comparisons at: https://en.wikipedia.org/wiki/Comparison_of_graphics_file_formats

<map> <map> creates an image-map with clickable areas

1) Create the map:

<map>

Required attribute:

name="planetmap"

<area>

Possible attributes:

shape="rect" coords="x1,y1,x2,y2"

shape="circle" coords="x,y,r"

2) Refer to the map in the calling image <img>:

<img src="an_image.png" usemap="name_of_map" />

13

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

(0,0)

(0,50)

(100,100)

(75,25)

Inverse coordinate system!

File extension .gif .jpg .png

File extension .gif .jpg .png

File formats covered so far… TIFF

8-bit or 16-bit

Both available

8-bit

No

.tif or .tiff

14

GIF JPEG PNG

Colour depth

8-bit 24-bit or 8-bit 24-bit

Compression

Lossless compression

Lossy compression

Lossless compression

Support for transparency?

1-bit N/A 8-bit

Support for animation?

Yes N/A Yes

These are known as bitmap: mapping from integers to bits

Grid of pixels arrangement of (x,y,colour)

File extension .gif .jpg .png

File extension .gif .jpg .png

File formats covered so far… TIFF

8-bit or 16-bit

Both available

8-bit

No

.tif or .tiff

15

GIF JPEG PNG

Colour-depth

8-bit 24-bit or 8-bit 24-bit

Compression

Lossless compression

Lossy compression

Lossless compression

Support for transparency?

1-bit N/A 8-bit

Support for animation?

Yes N/A Yes

Today:

SVG SVG = Scalable Vector Graphics

What is a vector?

16

Vector

17

V=(0,1) V=(1,1) V=(-1,1)

V=(-2,2)

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

coordinates

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?

18

Possible data to store in SVG: (-1,1) #F0F (-1,1)x2 #FF0

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

Example SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<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,200 200,200 200,100" stroke="red" stroke-width="4" fill="none"

/>

<line

x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4"

/>

</svg>

20

Just like XHTML, SVG uses XML (similar syntax)

SVG editors

Open-source software:

• Inkscape (Mac, Windows, and Linux)

Proprietary software:

• Adobe Illustrator (Mac and Windows)

• OmniGraffle (Mac)

Online: http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html

21

Questions?

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

File formats for storing graphics

• GIF

• JPEG

• PNG

• TIF

• BMP

• SVG

Each format uses different strategies to store image data

24

• What is stored • How is stored • What strategies employed?

Image editing software

• Popular editing:

– MS Paint (Windows)

– Adobe Photoshop (Mac and Windows)

– Pixelmator (Mac)

– GIMP (Mac, Windows, and Linux)

25

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? http://www.tineye.com/

• Don’t forget to caption your figures!

26

Suppl. Links

Colour schemes

• www.colorschemedesigner.com

• kuler.adobe.com

Online tool to create comics:

• http://www.pixton.com/

27

Questions?