Drawing 2D Graphics v2

(1)

GRAFIKA

KOMPUTER

(2)

Drawing

(3)

VIEWPORT

(4)

Recall :Coordinate

System

glutReshapeFunc(reshape);

void reshape(int w, int h) {

glViewport(0,0,(GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION);

glLoadIdentity();

(5)

(6)

World Coordinate System

0

0 1 2

-2 -1

1 2

(7)

World Coordinate System

~ The representation of an

object is

measured

in some

physical or abstract

units

.

~

Space in which the

object

(8)

World Window

0 1 2

-2 -1

1 2

(9)

World Window

0 1 2

-2 -1

1 2

(10)

World Window

~

Rectangle

defining the part

of the world we wish to

display

.

~ Area that

can be seen

(what

is

captured

by the camera),

(11)

World Window

~ Known as

clipping-area

glViewport(0,0,(GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluOrtho2D(-1.0, 1.0, -1.0, 1.0);

(12)

The Default

The

default

OpenGL 2D

clipping-area is an

orthographic view with x

and y in the range of

-1.0

(13)

World Window

~ Reset to the default

glViewport(0,0,(GLsizei) w, (GLsizei) h);

glMatrixMode(GL_PROJECTION); glLoadIdentity();

(14)

Viewport

Screen

Screen window

Interface Window

(15)

Screen Coordinate System

~ Space in which the image is

displayed

(16)

Interface Window

~ Visual representation of the

screen coordinate system for

windowed displays

(17)

Vewport

~ A rectangle on the interface

window defining

where the

image will appear

,

~ The default is

the entire

(18)

(19)

Interface Window

~ Set the viewport to the

entire screen / window

glViewport(0,0,(GLsizei) w, (GLsizei) h);

(20)

Interface Window

~ Set the viewport to half of

the screen / window

glutInitWindowSize(320, 320); glutInitWindowPosition(50, 50);

(21)

Viewport

Screen

Screen window

Interface Window

(22)

(23)

Viewport Transformation

(24)

(25)

The distortion

Screen

Screen window

Interface Window

(26)

The distortion

Screen

Screen window

Interface Window

(27)

Ratio

(28)

(29)

Keeping the Ratio

Screen

Screen window

Interface Window

(30)

Keeping the Ratio

Screen

Screen window

Interface Window

(31)

The Startegy

~ To avoid distortion, we must

change the size of the world

window accordingly.

(32)

The Startegy

~ Default

glOrtho2D (-L, L, -L, L);

~

For example L=1,

(33)

The Startegy

if (w <= h)

glOrtho2D(-L, L, -L * h/w, L * h/w); else

glOrtho2D(-L * w/h, L * w/h, -L, L);

if (w <= h)

glOrtho2D(-1, 1, -1 * h/w, 1 * h/w); else

(34)

(35)

The Startegy

~ A possible solution is to change

the world window whenever the

viewport

of

the

interface

window were changed.

~

So,

the

callback

Glvoid

reshape(GLsizei

w,

GLsizei

h)

(36)

void reshape(GLsizei width, GLsizei height) {

if (height == 0) height = 1;

GLfloat aspect = (GLfloat)width/(GLfloat)height; glViewport(0, 0, width, height);

if (width >= height) {

gluOrtho2D(-1.0 * aspect, 1.0 * aspect, -1.0, 1.0);

}

else {

gluOrtho2D(-1.0, 1.0, -1.0 / aspect, 1.0 / aspect);

(37)

/* Handler for window re-size event. Called back when the window first appears and whenever the window is re-sized with its new width and height */

void reshape(GLsizei width, GLsizei height) {

// GLsizei for non-negative integer // Compute aspect ratio of the new window

if (height == 0) height = 1; // To prevent divide by 0

GLfloat aspect = (GLfloat)width / (GLfloat)height;

// Set the viewport to cover the new window

glViewport(0, 0, width, height);

// Set the aspect ratio of the clipping area to match the viewport

glMatrixMode(GL_PROJECTION);

glLoadIdentity(); // Reset the projection matrix

if (width >= height) {

// aspect >= 1, set the height from -1 to 1, with larger width

gluOrtho2D(-1.0 * aspect, 1.0 * aspect, -1.0, 1.0); }

else {

// aspect < 1, set the width to -1 to 1, with larger height

gluOrtho2D(-1.0, 1.0, -1.0 / aspect, 1.0 / aspect); }

(38)

2

D

(39)

Transformation

(40)

Why Needed?

(41)

Transformation Pipeline

Vertex Modelview Matrix

GL_MODELVIEW mode

glTranslate()

GL_PROJECTION mode

glOrtho() gluOrtho2D() glFrustum()

gluPerspective()

(42)

Types of Transformation

~ Modeling.

In 3D graphics, handles moving

objects

around the scene.

~ Viewing.

In

3D

graphics,

specifies

the

(43)

Types of Transformation

~ Projection.

Defines the

viewing volume and

clipping

planes

from

eye

(44)

Types of Transformation

~ Viewport.

Maps the

projection

of the scene

into the rendering

window.

~ Modelview.

Combination of the

viewing and

(45)

Transformation Matrix

(46)

Matrix Modes

~ ModelView Matrix

(GL_MODELVIEW)

These concern model-related

(47)

Matrix Modes

~ Projection Matrix

(GL_PROJECTION)

(48)

Transformation Pipeline

Vertex Modelview Matrix

GL_MODELVIEW mode

glTranslate()

GL_PROJECTION mode

glOrtho() gluOrtho2D() glFrustum()

1

-3 + =

3 1

(55)

Matrix addition

and subtraction

1

-3 + =

3 1

(56)

Matrix Multiplication

a b c d

e f g h

(57)

(67)

THE

(68)

Translation

A translation moves all points in an

object along the same straight-line

(69)

Translation

The path is represented by a vector,

called the translation or shift vector.

x’

New Position Current Position Translation Vector

(70)

(71)

(72)

Rotation

A rotation repositions all points in an

object along a circular path in the

(73)

Rotation



P

P’

p'_x = _p

x cos  – py sin 

p'_y = _p

(74)

Rotation

The transformation using Rotation

Matrix

New Position Rotation Matrix Current Position

(75)

Rotation

The transformation using Rotation

Matrix

New Position Rotation Matrix Current Position

(76)

Rotation

Find the transformed point, P’,

caused by rotating P= (

5, 1

) about the

(77)

(78)

Scaling

Scaling changes the size of an object

and involves two scale factors, Sx

(79)

Scaling

Scales are about the origin.

P

P’

p'

x = sx • px

(80)

Scaling

The transformation using Scale

Matrix

New Position Scale Matrix Current Position

(81)

Scaling

The transformation using Scale

Matrix

New Position Scale Matrix Current Position

(82)

Scaling

If the scale factors are in between 0

and 1  _{the points will be moved}

closer to the origin  _{the object will}

(83)

Scaling

P(2, 5), Sx = 0.5, Sy = 0.5

Find P’ ?

p'

x = sx • px

p'_y = s_y • p_y

P(2, 5)

(84)

Scaling

If the scale factors are larger than 1

 _{the points will be moved}_away

from the origin  _{the object will be}

(85)

Scaling

P(2, 5), Sx = 2, Sy = 2

Find P’ ?

p'

x = sx • px

p'_y = s_y • p_y

P(2, 5)

(86)

Scaling

If the scale factors are not the same,

Sx  Sy  _{differential scaling}

(87)

Scaling

If the scale factors are the same,

(88)

Scaling

P(1, 3), Sx = 2, Sy = 5

square  _rectangle

p'

x = sx • px

p'_y = s_y • p_y

P(1, 2)

(89)

Scaling

What does scaling by

1

(93)

Scaling

What does scaling by a negative value do?

Sx=-2 , Sy=-2  _{Moved to}_Different

(94)

COMBINING

(95)

Combining Transf

For example, we want to

rotate/scale then we want to do translation

(96)

Combining Transf

For example, we want to translate, then we want to rotate and sclae

(97)

Combining Transf

P (Px,Py)=(

4 , 6

) : Translate(

6 , -3

) -> Rotation(

60 ˚

) -> Scaling (

0.5 , 2.0

)

(98)

(99)

Combining Transf

To combine multiple transformations,

we must explicitly compute each

transformed point.

(100)

Combining Transf

It’d be nicer if we could use the same

matrix operation all the time.

But we’d have to combine

multiplication and addition into a

single operation.

(101)

Combining Transf

Let’s move our problem into one

(102)

(103)

Homogenous Coord

Let point (x, y) in 2D be represented by point (x, y, 1) in the new space.

y y

x

w

(104)

Homogenous Coord

~ Scaling our new point by any

value a puts us somewhere along a particular line: (ax, ay, a).

~ A point in 2D can be represented in many ways in the new space.

(105)

Homogenous Coord

We can always map back to the

original 2D point by dividing by the last coordinate

(15, 6, 3)

Homogenous Coord

Translation:

x’ y’

x y

t_x t_y

(110)

Homogenous Coord

(111)

Homogenous Coord

(112)

Homogenous Coord

(113)

Homogenous Coord

We can represent any sequence of

(119)

(120)

Composite Transformation Matrix

• Arrange the transformation matrices in order from

right to left.

• General Pivot- Point Rotation

• Operation

:-1. Translate (pivot point is moved to origin) 2. Rotate about origin

3. Translate (pivot point is returned to original

position)

(121)

T(pivot) • R() • T(–pivot)

(122)

Reflection:

x-axis y-axis



(123)

Reflection:

origin line x=y



(124)

• Shearing-x

• Shearing-y

Sebelum Sesudah