1 JPEG v JPEG stands for Joint Photographic Experts Group v Superior for continuous tone, photographic color images not good on sharp-edges or flat-colornot good on sharp-edges or flat-color v JPEG is lossy and supports full 24-bit color v Designed to exploit the nature of our eyes – small changes in color are perceived less accurately than small changes in brightness

2 JPEG v JPEG accurately records the brightness of each pixel, but averages out the hues v Usually yields a file that is between times smaller than the original v Converts the image representation into a frequency map using a Discrete Cosine Transform (DCT) function that separates the high and low-end frequencies v Some are discarded depending on the amount of compression desired (encoder can set the level)

3 PNG v Pronounced ‘ping’ v Originally thought to replace GIFs v Relatively new lossless format v The World Wide Web Consortium (W3C) published the final specification in 1996 v Accurately compresses 24 or 32 bit images, and supports indexed images with 256 or fewer colors

4 PNG v Provides an 8-bit alpha channel for transparency or masking v The alpha channel allows for 256 gradations of transparency (GIF only supports 1), allowing for realistic glows, shadows and special effects v Provides automatic gamma correction, allowing for more control over image brightness v Based on wavelet compression

5 PNG v Examples exploiting PNG’s alpha channel:

6 Gamma Correction v The relation between RGB values and the actual color displayed on the screen is rarely linear v For example, a red channel set to 200 should be twice as bright as one set to 100, but it usually isn’t v The actual relation, called gamma, varies from monitor to monitor v This is an important issue for companies wanting to sell products such as cosmetics and paint online v Gamma correction associates a single numeric value with a display system, then compensates the image accordingly

7 Wavelet Compression v Wavelet compression provides better compression ratios than DCT compression v Wavelets are mathematical expressions that describe an image in a continuous stream v A wavelet stream can be uncompressed incrementally, so the same file can be viewed at different resolutions v Wavelets allow downloading of the same image at different resolutions depending upon the available bandwidth

8 Other Image Manipulations v Other manipulations of images include: DitheringDithering AntialiasingAntialiasing v Monitors and image files limited to 256 colors can create the illusion of more colors by dithering the available colors in a scattered pattern, approximating the desired color v Image editors often use dithering to convert truecolor images to indexed color images

9 Dithering TrueColorDithered

10 Antialiasing v Aliasing effects occur when representing curves v Because pixels are rectangular and in a grid, rounded objects and diagonal lines appear jagged (staircase effect) v Antialiasing is the process that eliminates or reduces these effects v Antialiasing make diagonal edges appear smoother by setting pixels near the edge to an intermediate color

11 Vector Graphics v Vector graphics are images encoded descriptively in terms of geometric shapes v That is, rather than assigning colors to pixels, a vector graphic is defined by lines and shapes v Essentially, a vector graphic is a series of commands that describe a line’s direction, thickness, and color v It’s a set of plain text instructions v The files are small because every pixel doesn’t need to be accounted for. The complexity of the image determines file size.

12 Vector Graphics v Raster graphics need to be encoded multiple times for different sizes and proportions v Vector graphics can be resized to any proportion and re-rendered at any point v A vector graphic may be defined once, named, and then reused anywhere in the document, resizing (& rotating) a cached version v JPEGs are superior for representing real world images; vector graphics are good for simple graphics such as line drawings (like GIFs)

13 Vector Graphics v Vector graphics trade the burden of a large file size to the burden on the receiver’s processor v Vector graphics are converted to bitmaps for display on the monitor v Since all displays are raster (pixel) oriented, the difference between raster and vector graphics is where they are rasterized: server side or client side v Vector images are easier to modify because the components can be moved, resized, rotated, or deleted independently, as opposed to modifying individual pixels

14 Vector Graphics v The only W3C supported vector format is Scalable Vector Graphics (SVG) v Flash is currently the most popular vector format v However, Flash is in a binary format that takes a special editor to create v SVG code is plain text and resides within HTML documents – it is written in XML v Other vector programs include Adobe Illustrator and Macromedia Freehand

15 Vector Graphics v SVG defines 6 standard shapes: rect, circle, ellipse, line, polyline, polygon v Unique shapes may be defined as combinations of these shapes v Can also control: fill - the painting of the interior of the shape (you can specify color and transparency)fill - the painting of the interior of the shape (you can specify color and transparency) stroke - the painting along the outline of the shape (you can specify color, width, antialiasing, and opacity)stroke - the painting along the outline of the shape (you can specify color, width, antialiasing, and opacity)

16 Vector Graphics v For example, the following code can be used to create a yellow circle with a red edge: v SVG also provides patterns that may be used to fill any shape with a GIF or JPEG. These can be tiled to fill the shape. v To specify where an object appears on the page, SVG utilizes Cascading Style Sheets (CSS)

17 Ray Tracing v Technique for rendering three-dimensional graphics with complex light interactions v Based on the idea that you can model reflection and refraction by following the path that light takes as it bounces through the environment v In order to save effort, rather than tracing from the light source out when most rays won’t reach the viewer, rays are traced from the viewer back to the light source.

18 Ray Tracing v For each pixel on the display window, a ray is defined that extends into the scene v The ray is traced as it bounces off objects back to the light source v The final color of the ray (pixel) is determined by the colors of the objects hit by that ray

19 Ray Tracing v To simulate reflection, ray tracing takes into account multiple bounces from objects v If an object is defined as reflective, the ray follows a straight line from where it hits v To handle refraction, ray tracing takes into account what happens when a ray passes through a partially or fully-transparent object v Rays may be bent if the objects around the surface have different indices of refraction

20 Ray Tracing

21 Ray Tracing

22 Ray Tracing

23 Ray Tracing

24 Ray Tracing

25 Ray Tracing Example

26 Ray Tracing Example