grafika komputermalifauzi.lecture.ub.ac.id/files/2016/02/drawing-2d-graphics-v2.pdf ·...
TRANSCRIPT
GRAFIKA KOMPUTER~ M. Ali Fauzi
Drawing
2D Graphics
VIEWPORTTRANSFORMATION
Recall :Coordinate SystemglutReshapeFunc(reshape);
void reshape(int w, int h)
{
glViewport(0,0,(GLsizei) w, (GLsizei) h);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-1.0, 1.0, -1.0, 1.0);
}
World Coordinate System
World Coordinate System
00 1 2-2 -1
1
2
-1
World Coordinate System
~ The representation of anobject is measured in somephysical or abstract units.~ Space in which the objectgeometry is defined.
World Window
0 1 2-2 -1
1
2
-1
World Window
0 1 2-2 -1
1
2
-1
World Window
~ Rectangle defining the part of the world we wish to display.~ Area that can be seen (what is captured by the camera), measured in OpenGL coordinates.
World Window
~ Known as clipping-area
void reshape(int w, int h)
{
glViewport(0,0,(GLsizei) w, (GLsizei) h);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-1.0, 1.0, -1.0, 1.0);
}
The Default
The default OpenGL 2Dclipping-area is anorthographic view with x
and y in the range of -1.0and 1.0, i.e., a 2x2 square
with centered at the origin.
World Window
~ Reset to the default
void reshape(int w, int h)
{
glViewport(0,0,(GLsizei) w, (GLsizei) h);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-1.0, 1.0, -1.0, 1.0);
}
Viewport
Screen
Screenwindow
InterfaceWindow
Viewport
Screen Coordinate System
~ Space in which the image is displayed
~ For example : 800x600pixels
Interface Window
~ Visual representation of thescreen coordinate system forwindowed displays
glutInitWindowSize(320, 320);
glutInitWindowPosition(50, 50);
Vewport
~ A rectangle on the interfacewindow defining where theimage will appear,~ The default is the entirescreen or interface window.
Viewport
Interface Window
~ Set the viewport to theentire screen / windowvoid reshape(int w, int h)
{
glViewport(0,0,(GLsizei) w, (GLsizei) h);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-1.0, 1.0, -1.0, 1.0);
}
Interface Window
~ Set the viewport to half ofthe screen / window
glutInitWindowSize(320, 320);
glutInitWindowPosition(50, 50);
--------------------------------
glViewport(0,0,160,160);
Viewport
Screen
Screenwindow
InterfaceWindow
Viewport
Viewport
Viewport Transformation
~ The Process called viewporttransformation
THE ASPECT RATIOPROBLEM
The distortion
Screen
Screenwindow
InterfaceWindow
Viewport
The distortion
Screen
Screenwindow
InterfaceWindow
Viewport
Ratio
~ R = Aspect Ratio of World
Ratio
Keeping the Ratio
Screen
Screenwindow
InterfaceWindow
Viewport
Keeping the Ratio
Screen
Screenwindow
InterfaceWindow
Viewport
The Startegy
~ To avoid distortion, we mustchange the size of the worldwindow accordingly.~ For that, we assume that theinitial world window is asquare with side length L
The Startegy
~ DefaultglOrtho2D (-L, L, -L, L);
~ For example L=1,glOrtho2D (-1, 1, -1, 1);
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
glOrtho2D(-1 * w/h, 1 * w/h, -1, L);
The Startegy
The Startegy
~ A possible solution is to changethe world window whenever theviewport of the interfacewindow were changed.~ So, the callback Glvoidreshape(GLsizei w, GLsizei h)must include the following code :
void reshape(GLsizei width, GLsizei height)
{
if (height == 0) height = 1;
GLfloat aspect = (GLfloat)width/(GLfloat)height;
glViewport(0, 0, width, height);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
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);
}
}
/* 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);
}
}
2D
TRANSFORMATION
Transformation
Is The geometrical changesof an object from a currentstate to modified state.
Why Needed?
To manipulate the initiallycreated object and todisplay the modified objectwithout having to redraw it
Transformation Pipeline
Vertex ModelviewMatrix
ProjectionMatrix
PerspectiveDivision
ViewportTransformation
ObjectCoordinates
EyeCoordinates
ClipCoordinates
Normalizeddevice
Coordinates
WindowCoordinates
GL_MODELVIEW mode
glTranslate()
glRotate()
glScale()
glLoadMatrix()
glMultMatrix()
gluLookAt()
GL_PROJECTION mode
glOrtho()
gluOrtho2D()
glFrustum()
gluPerspective()
glViewport()
Types of Transformation
~ Modeling.In 3D graphics, handles movingobjects around the scene.
~ Viewing.In 3D graphics, specifies thelocation of the camera.
Types of Transformation
~ Projection.Defines the viewing volume andclipping planes from eyecoordinate to clip coordinates.
Types of Transformation
~ Viewport.Maps the projection of the sceneinto the rendering window.
~ Modelview.Combination of the viewing andmodeling transformations.
Transformation Matrix
Transformations in OpenGL using matrix concept
Matrix Modes
~ ModelView Matrix(GL_MODELVIEW)
These concern model-related operations such as translation, rotation, and scaling, as well as viewing transformations.
Matrix Modes
~ Projection Matrix (GL_PROJECTION)
Setup camera projection and cliiping-area
Transformation Pipeline
Vertex ModelviewMatrix
ProjectionMatrix
PerspectiveDivision
ViewportTransformation
ObjectCoordinates
EyeCoordinates
ClipCoordinates
Normalizeddevice
Coordinates
WindowCoordinates
GL_MODELVIEW mode
glTranslate()
glRotate()
glScale()
glLoadMatrix()
glMultMatrix()
gluLookAt()
GL_PROJECTION mode
glOrtho()
gluOrtho2D()
glFrustum()
gluPerspective()
glViewport()
Why do we use matrix?
~ More convenient organization of data.~ More efficient processing~ Enable the combination of various concatenations
THE MATRIX
Matrix addition and subtraction
a
b
c
da c
b d=
Matrix addition and subtraction
1-3
56+ =
Matrix addition and subtraction
1-3
56+ =
63
Matrix addition and subtraction
1-3
+ =3 1-1 4
Matrix addition and subtraction
1-3
+ =3 1-1 4
Tak boleh
Matrix Multiplication
a bc d
e fg h. =
a.e + b.g a.f + b.hc.e + d.g c.f + d.h
Matrix Multiplication
a be fg h. = a.e + b.g a.f + b.h
Matrix Multiplication
1 2 1 23 1. =
Matrix Multiplication
1 2 1 23 1. = 6 6
Matrix Multiplication
12
1 23 1. =
Matrix Multiplication
12
1 23 1. = Tak boleh
Matrix Types
efe f
Row Vector Column Vector
Matrix Multiplication
a bc d
ef. =
e fa bc d. =
e fa cb d. =
Matrix Multiplication
a bc d
ef. =
a.e + b.fc.e + d.f
e fa bc d. = a.e + c.f b.e + d.f
e fa cb d. = a.e + b.f c.e + d.f
Matrix Math
We’ll use the column-vector representation for a point.
Matrix Math
Which implies that we use pre-multiplication of the transformation – it appears before the point to be transformed in the equation.
THETRANSFORMATION
Translation
A translation moves all points in an object along the same straight-line path to new positions.
Translation
The path is represented by a vector, called the translation or shift vector.
x’y’
xy
tx
ty= +
New Position Current Position Translation Vector
P' = P + T
Translation
x’y’
xy
tx
ty= +
(2, 2) tx= 6
ty=4
?
x’y’
22
6
4= +
Translation
x’y’
xy
tx
ty= +
(2, 2) tx= 6
ty=4
?
86
22
6
4= +
Rotation
A rotation repositions all points in an object along a circular path in the plane centered at the pivot point.
Rotation
P
P’
p'x = px cos – py sin
p'y = px sin + py cos
Rotation
The transformation using Rotation Matrix
New Position Rotation Matrix Current Position
P' = R . P
Rotation
The transformation using Rotation Matrix
New Position Rotation Matrix Current Position
P' = R . P
Rotation
Find the transformed point, P’,
caused by rotating P= (5, 1) about the
origin through an angle of 90.
Rotation
Scaling
Scaling changes the size of an object and involves two scale factors, Sxand Sy for the x- and y- coordinates respectively.
Scaling
Scales are about the origin.
P
P’
p'x = sx • pxp'y = sy • py
Scaling
The transformation using Scale Matrix
New Position Scale Matrix Current Position
P' = S • P
Scaling
The transformation using Scale Matrix
New Position Scale Matrix Current Position
P' = S • P
Scaling
If the scale factors are in between 0 and 1 the points will be moved closer to the origin the object will be smaller.
Scaling
P(2, 5), Sx = 0.5, Sy = 0.5Find P’ ?
p'x = sx • pxp'y = sy • py
P(2, 5)
P’
Scaling
If the scale factors are larger than 1 the points will be moved away from the origin the object will be larger.
Scaling
P(2, 5), Sx = 2, Sy = 2Find P’ ?
p'x = sx • pxp'y = sy • py
P(2, 5)
P’
Scaling
If the scale factors are not the same, Sx Sy differential scalingChange in size and shape
Scaling
If the scale factors are the same, Sx = Sy uniform scaling
Scaling
P(1, 3), Sx = 2, Sy = 5square rectangle
p'x = sx • pxp'y = sy • py
P(1, 2)
P’
Scaling
What does scaling by 1 do?
Sx=1 , Sy=1
Scaling
What does scaling by 1 do?
Sx=1 , Sy=1 Nothing changedWhat is that matrix called?
Scaling
What does scaling by 1 do?
Sx=1 , Sy=1 Nothing changedWhat is that matrix called?Identity Matrix
Scaling
What does scaling by a negative value do? Sx=-2 , Sy=-2
Scaling
What does scaling by a negative value do? Sx=-2 , Sy=-2 Moved to Different Quadran
COMBINING TRANSFORMATIONS
Combining Transf
For example, we want to rotate/scale then we want to do translation
P' = M • P + A
Combining Transf
For example, we want to translate, then we want to rotate and sclae
P' = S • R • (A + P)
Combining Transf
P (Px,Py)=(4 , 6) : Translate(6 , -3) ->
Rotation(60˚) -> Scaling (0.5 , 2.0)
P' = S • R • (A + P)
Combining Transf
Combining Transf
To combine multiple transformations, we must explicitly compute each transformed point.
P' = S • R • (A + P)
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.
P' = S • R • (A + P)
Combining Transf
Let’s move our problem into one dimension higher
HOMOGENOUS COORDINATES
Homogenous Coord
Let point (x, y) in 2D be represented by point (x, y, 1) in the new space.
y y
x
x
w
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.~ (2, 4) ----------- > (2, 4, 1) or (8, 16, 4) or (6, 12, 3) or (2, 4, 1) or etc.
Homogenous Coord
We can always map back to the original 2D point by dividing by the last coordinate
(15, 6, 3) (5, 2).(60, 40, 10) ?.
Homogenous Coord
The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name –homogeneous coordinates.
Homogenous Coord
With homogeneous coordinates, we can combine multiplication and addition into a single operation.
Homogenous Coord
Point in column-vector:
Our point now has threecoordinates. So our matrix is needs to be 3x3.
Homogenous Coord
Translation:
x’y’
xy
tx
ty= +
Homogenous Coord
Rotation:
Homogenous Coord
Scaling:
Homogenous Coord
P (Px,Py)=(4 , 6) : Translate(6 , -3) ->
Rotation(60˚) -> Scaling (0.5 , 2.0)
Homogenous Coord
We can represent any sequence of transformations as a single matrix
Homogenous Coord
Does the order of operations matter?
Homogenous Coord
Yes, the order does matter!
1. Translate2. Rotate
1. Rotate2. Translate
Homogenous Coord
Yes, the order does matter!A . B = B . A?
Homogenous Coord
Yes, the order does matter!A . B B . A
Homogenous Coord
Yes, the order does matter!(A.B).C = A.(B.C)?
Homogenous CoordYes, the order does matter!(A.B).C = A.(B.C)
++++++
++++++=
++
++=
dhlcfldgjcejdhkcfkdgicei
bhlaflbgjaejbhkafkbgiaei
lk
ji
dhcfdgce
bhafbgae
lk
ji
hg
fe
dc
ba
++++++
++++++=
++
++
=
dhldgjcflcejdhkdgicfkcei
bhlbgjaflaejbhkbgiafkaei
hlgjhkgi
flejfkei
dc
ba
lk
ji
hg
fe
dc
ba
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 origin3. Translate (pivot point is returned to original
position)
T(pivot) • R() • T(–pivot)
T(pivot) • R() • T(–pivot)
1 0 -tx
0 1 -ty
0 0 1
cos -sin 0sin cos 0
0 0 1
1 0 tx
0 1 ty
0 0 1 . .
cos -sin -tx cos+ ty sin + tx
sin cos -tx sin - ty cos + ty
0 0 1
cos -sin -tx cos+ ty sinsin cos -tx sin - ty cos
0 0 1
1 0 tx
0 1 ty
0 0 1 .
Composite Transformation Matrix
Reflection:
x-axis y-axis
100
010
001
100
010
001
Other Transf
Reflection:
origin line x=y
100
010
001
100
001
010
Other Transf
• Shearing-x
• Shearing-y
Sebelum Sesudah
Sebelum Sesudah
Shearing