Graphics-1

Gentle Introduction to Computer Graphics (1)

• Based on:– David Brogan’s “Introduction to Computer

Graphics” Course Slides, University of Virginia

– Jack van Wijk’s “Computer Graphics” Course Slides, University of Eindhoven.

Graphics-2

Outline

• Graphics Applications

• What is Computer Graphics

• Representations in Graphics

• Supporting Disciplines

Graphics-3

Graphics Applications

• Entertainment: Cinema

Pixar: Monster’s Inc.

A Bug’s Life (Pixar)

Graphics-4

Graphics Applications

• Medical Visualization

MIT: Image-Guided Surgery Project

Th

e V

isib

le H

um

an

Pro

jec

t

Graphics-5

Graphics Applications

• Scientific Visualization

Graphics-6

Graphics Applications

• Computer Aided Design (CAD)

Graphics-7

Graphics Applications

• Training

Designing Effective Step-By-Step Assembly Instructions (Maneesh Agrawala et. al)

Graphics-8

Graphics Applications

• Games

GT Racer 3

Polyphony Digital: Gran Turismo 3, A Spec

Graphics-9

Graphics Applications

• Games

Circus Atari (Atari)

Graphics-10

Graphics Applications

• The major application that we will be dealing with extensively in the next coming lectures is that of developing graphical user interfaces– Windows– Menus– Buttons– Textboxes– ...

Graphics-11

What is Computer Graphics?

• Computer graphics: generating 2D images of a 3D world represented in a computer.

• Main tasks:– modeling: (shape) creating and representing

the geometry of objects in the 3D world– rendering: (light, perspective) generating 2D

images of the objects– animation: (movement) describing how

objects change in time

Graphics-12

Representations in graphics

Vector Graphics• Image is represented by continuous

geometric objects: lines, curves, etc.

Raster Graphics• Image is represented as a rectangular

grid of colored pixels– PIXEL = PIcture ELement

X

Graphics-13

Raster graphics

• Generic

• Image processing techniques

• Geometric Transformation: loss of information

• Relatively high processing time– in terms of the number of pixels

• Realistic images, textures, ...

• Examples: Paint, PhotoShop, ...

Graphics-14

Sample Image Processing Techniques

• Edge Detection

• Image Denoising

Graphics-15

Vector graphics

• Graphics objects: geometry + color• Relatively low processing time

– in terms of the number of graphic objects

• Geometric transformation possible without loss of information (zoom, rotate, …)

• Examples: PowerPoint, CorelDraw, SVG, ...

Graphics-16

Scalable Vector Graphics (SVG)<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example polygon01 - star and hexagon</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <polygon fill="red" stroke="blue" stroke-width="10" points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" /> <polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" /></svg>

Graphics-17

In Summary

ImageMath. ModelImage Analysis(pattern recognition)

Image Synthesis(Rendering)

Modeling Image processing

Graphics-18

Supporting Disciplines

• Computer science (algorithms, data structures, software engineering, …)

• Mathematics (geometry, numerical, …)

• Physics (Optics, mechanics, …)

• Psychology (Colour, perception)

• Art and design