Upload
vomien
View
227
Download
0
Embed Size (px)
Citation preview
Kuliah Grafika Komputer -
Teknik Informatika ITS Anny Yuniarti - 2008 1
Transformasi Obyek
(Kasus 2D)
Grafika Komputer
Semester Ganjil 2008
Kuliah Grafika Komputer -
Teknik Informatika ITS 2 Anny Yuniarti - 2008
Kompetensi
1 Mampu membangun tool untuk mentransformasi obyek
2 Mampu memahami konsep transformasi affine yang merupakan kombinasi dari rotasi penskalaan dan translasi
3 Mampu mengimplementasikan konsep transformasi dalam sebuah program OpenGL
Kuliah Grafika Komputer -
Teknik Informatika ITS 3 Anny Yuniarti - 2008
Referensi
Computer Graphics using OpenGL 3rd
Edition by FS Hill Jr and Stephen M Kelley
ndash Chapter 5
Computer Graphics with OpenGL 3rd Edition
by Donald Hearn and MPauline Baker ndash
Chapter 5
httpwwwcsvirginiaedu
Kuliah Grafika Komputer -
Teknik Informatika ITS 4 Anny Yuniarti - 2008
Pokok Bahasan
1 Transformasi 2D Dasar
1 Translasi
2 Rotasi
3 Penskalaan
2 Kombinasi Transformasi
3 Transformasi Affine
Kuliah Grafika Komputer -
Teknik Informatika ITS 5 Anny Yuniarti - 2008
Kegunaan Transformasi
Me-reposisi ataupun me-resize obyek
Pada proses viewing untuk mengubah world-coordinate menjadi display untuk suatu output device
Untuk aplikasi-aplikasi tertentu
CAD mengatur orientasi dan ukuran suatu komponen pada suatu rancangan
Animasi menggerakkan letak kamera atau obyek pada sebuah layar sesuai path tertentu
Kuliah Grafika Komputer -
Teknik Informatika ITS 6 Anny Yuniarti - 2008
Jenis-jenis Transformasi
Transformasi Geometri
Diterapkan pada deskripsi geometri suatu obyek
Gunanya untuk mengubah posisi orientasi atau ukuran suatu obyek
Transformasi modeling Digunakan untuk membentuk sebuah layar atau membuat deskripsi
hierarki suatu obyek kompleks yang terdiri dari beberapa bagian
Contoh pesawat terdiri dari sayap ekor mesin dan lain-lain dimana masing-masing dapat dispesifikasikan dalam komponen-komponen level ke-2 dan seterusnya
Transformasi modeling mendeskripsikan bagaimana setiap komponen disusun untuk rancangan keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 7 Anny Yuniarti - 2008
2D Modeling Transformations
Scale Rotate
Translate
Scale Translate
x
y
World Coordinates
Modeling
Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 8 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
World Coordinates
Modeling
Coordinates
Letrsquos look
at this in
detailhellip
Kuliah Grafika Komputer -
Teknik Informatika ITS 9 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Initial location
at (0 0) with
x- and y-axes
aligned
Kuliah Grafika Komputer -
Teknik Informatika ITS 10 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 11 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 12 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
World Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 13 Anny Yuniarti - 2008
Transformasi Geometri 2D
Translasi 2D
xrsquo = x + tx yrsquo = y + ty
(tx ty) disebut vektor translasi atau pergeseran
Dalam bentuk matriks
Persamaan translasi 2D
Prsquo = P + T
Line polygon translasi titik endpoints render
Untuk menghapus obyek yang asli display it in background color before translating it
Circle ellipse spline curve translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat) render obyek hasil translasi di posisi yang baru
y
x
t
tT
y
xP
y
xP
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 2 Anny Yuniarti - 2008
Kompetensi
1 Mampu membangun tool untuk mentransformasi obyek
2 Mampu memahami konsep transformasi affine yang merupakan kombinasi dari rotasi penskalaan dan translasi
3 Mampu mengimplementasikan konsep transformasi dalam sebuah program OpenGL
Kuliah Grafika Komputer -
Teknik Informatika ITS 3 Anny Yuniarti - 2008
Referensi
Computer Graphics using OpenGL 3rd
Edition by FS Hill Jr and Stephen M Kelley
ndash Chapter 5
Computer Graphics with OpenGL 3rd Edition
by Donald Hearn and MPauline Baker ndash
Chapter 5
httpwwwcsvirginiaedu
Kuliah Grafika Komputer -
Teknik Informatika ITS 4 Anny Yuniarti - 2008
Pokok Bahasan
1 Transformasi 2D Dasar
1 Translasi
2 Rotasi
3 Penskalaan
2 Kombinasi Transformasi
3 Transformasi Affine
Kuliah Grafika Komputer -
Teknik Informatika ITS 5 Anny Yuniarti - 2008
Kegunaan Transformasi
Me-reposisi ataupun me-resize obyek
Pada proses viewing untuk mengubah world-coordinate menjadi display untuk suatu output device
Untuk aplikasi-aplikasi tertentu
CAD mengatur orientasi dan ukuran suatu komponen pada suatu rancangan
Animasi menggerakkan letak kamera atau obyek pada sebuah layar sesuai path tertentu
Kuliah Grafika Komputer -
Teknik Informatika ITS 6 Anny Yuniarti - 2008
Jenis-jenis Transformasi
Transformasi Geometri
Diterapkan pada deskripsi geometri suatu obyek
Gunanya untuk mengubah posisi orientasi atau ukuran suatu obyek
Transformasi modeling Digunakan untuk membentuk sebuah layar atau membuat deskripsi
hierarki suatu obyek kompleks yang terdiri dari beberapa bagian
Contoh pesawat terdiri dari sayap ekor mesin dan lain-lain dimana masing-masing dapat dispesifikasikan dalam komponen-komponen level ke-2 dan seterusnya
Transformasi modeling mendeskripsikan bagaimana setiap komponen disusun untuk rancangan keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 7 Anny Yuniarti - 2008
2D Modeling Transformations
Scale Rotate
Translate
Scale Translate
x
y
World Coordinates
Modeling
Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 8 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
World Coordinates
Modeling
Coordinates
Letrsquos look
at this in
detailhellip
Kuliah Grafika Komputer -
Teknik Informatika ITS 9 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Initial location
at (0 0) with
x- and y-axes
aligned
Kuliah Grafika Komputer -
Teknik Informatika ITS 10 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 11 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 12 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
World Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 13 Anny Yuniarti - 2008
Transformasi Geometri 2D
Translasi 2D
xrsquo = x + tx yrsquo = y + ty
(tx ty) disebut vektor translasi atau pergeseran
Dalam bentuk matriks
Persamaan translasi 2D
Prsquo = P + T
Line polygon translasi titik endpoints render
Untuk menghapus obyek yang asli display it in background color before translating it
Circle ellipse spline curve translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat) render obyek hasil translasi di posisi yang baru
y
x
t
tT
y
xP
y
xP
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 3 Anny Yuniarti - 2008
Referensi
Computer Graphics using OpenGL 3rd
Edition by FS Hill Jr and Stephen M Kelley
ndash Chapter 5
Computer Graphics with OpenGL 3rd Edition
by Donald Hearn and MPauline Baker ndash
Chapter 5
httpwwwcsvirginiaedu
Kuliah Grafika Komputer -
Teknik Informatika ITS 4 Anny Yuniarti - 2008
Pokok Bahasan
1 Transformasi 2D Dasar
1 Translasi
2 Rotasi
3 Penskalaan
2 Kombinasi Transformasi
3 Transformasi Affine
Kuliah Grafika Komputer -
Teknik Informatika ITS 5 Anny Yuniarti - 2008
Kegunaan Transformasi
Me-reposisi ataupun me-resize obyek
Pada proses viewing untuk mengubah world-coordinate menjadi display untuk suatu output device
Untuk aplikasi-aplikasi tertentu
CAD mengatur orientasi dan ukuran suatu komponen pada suatu rancangan
Animasi menggerakkan letak kamera atau obyek pada sebuah layar sesuai path tertentu
Kuliah Grafika Komputer -
Teknik Informatika ITS 6 Anny Yuniarti - 2008
Jenis-jenis Transformasi
Transformasi Geometri
Diterapkan pada deskripsi geometri suatu obyek
Gunanya untuk mengubah posisi orientasi atau ukuran suatu obyek
Transformasi modeling Digunakan untuk membentuk sebuah layar atau membuat deskripsi
hierarki suatu obyek kompleks yang terdiri dari beberapa bagian
Contoh pesawat terdiri dari sayap ekor mesin dan lain-lain dimana masing-masing dapat dispesifikasikan dalam komponen-komponen level ke-2 dan seterusnya
Transformasi modeling mendeskripsikan bagaimana setiap komponen disusun untuk rancangan keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 7 Anny Yuniarti - 2008
2D Modeling Transformations
Scale Rotate
Translate
Scale Translate
x
y
World Coordinates
Modeling
Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 8 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
World Coordinates
Modeling
Coordinates
Letrsquos look
at this in
detailhellip
Kuliah Grafika Komputer -
Teknik Informatika ITS 9 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Initial location
at (0 0) with
x- and y-axes
aligned
Kuliah Grafika Komputer -
Teknik Informatika ITS 10 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 11 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 12 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
World Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 13 Anny Yuniarti - 2008
Transformasi Geometri 2D
Translasi 2D
xrsquo = x + tx yrsquo = y + ty
(tx ty) disebut vektor translasi atau pergeseran
Dalam bentuk matriks
Persamaan translasi 2D
Prsquo = P + T
Line polygon translasi titik endpoints render
Untuk menghapus obyek yang asli display it in background color before translating it
Circle ellipse spline curve translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat) render obyek hasil translasi di posisi yang baru
y
x
t
tT
y
xP
y
xP
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 4 Anny Yuniarti - 2008
Pokok Bahasan
1 Transformasi 2D Dasar
1 Translasi
2 Rotasi
3 Penskalaan
2 Kombinasi Transformasi
3 Transformasi Affine
Kuliah Grafika Komputer -
Teknik Informatika ITS 5 Anny Yuniarti - 2008
Kegunaan Transformasi
Me-reposisi ataupun me-resize obyek
Pada proses viewing untuk mengubah world-coordinate menjadi display untuk suatu output device
Untuk aplikasi-aplikasi tertentu
CAD mengatur orientasi dan ukuran suatu komponen pada suatu rancangan
Animasi menggerakkan letak kamera atau obyek pada sebuah layar sesuai path tertentu
Kuliah Grafika Komputer -
Teknik Informatika ITS 6 Anny Yuniarti - 2008
Jenis-jenis Transformasi
Transformasi Geometri
Diterapkan pada deskripsi geometri suatu obyek
Gunanya untuk mengubah posisi orientasi atau ukuran suatu obyek
Transformasi modeling Digunakan untuk membentuk sebuah layar atau membuat deskripsi
hierarki suatu obyek kompleks yang terdiri dari beberapa bagian
Contoh pesawat terdiri dari sayap ekor mesin dan lain-lain dimana masing-masing dapat dispesifikasikan dalam komponen-komponen level ke-2 dan seterusnya
Transformasi modeling mendeskripsikan bagaimana setiap komponen disusun untuk rancangan keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 7 Anny Yuniarti - 2008
2D Modeling Transformations
Scale Rotate
Translate
Scale Translate
x
y
World Coordinates
Modeling
Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 8 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
World Coordinates
Modeling
Coordinates
Letrsquos look
at this in
detailhellip
Kuliah Grafika Komputer -
Teknik Informatika ITS 9 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Initial location
at (0 0) with
x- and y-axes
aligned
Kuliah Grafika Komputer -
Teknik Informatika ITS 10 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 11 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 12 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
World Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 13 Anny Yuniarti - 2008
Transformasi Geometri 2D
Translasi 2D
xrsquo = x + tx yrsquo = y + ty
(tx ty) disebut vektor translasi atau pergeseran
Dalam bentuk matriks
Persamaan translasi 2D
Prsquo = P + T
Line polygon translasi titik endpoints render
Untuk menghapus obyek yang asli display it in background color before translating it
Circle ellipse spline curve translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat) render obyek hasil translasi di posisi yang baru
y
x
t
tT
y
xP
y
xP
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 5 Anny Yuniarti - 2008
Kegunaan Transformasi
Me-reposisi ataupun me-resize obyek
Pada proses viewing untuk mengubah world-coordinate menjadi display untuk suatu output device
Untuk aplikasi-aplikasi tertentu
CAD mengatur orientasi dan ukuran suatu komponen pada suatu rancangan
Animasi menggerakkan letak kamera atau obyek pada sebuah layar sesuai path tertentu
Kuliah Grafika Komputer -
Teknik Informatika ITS 6 Anny Yuniarti - 2008
Jenis-jenis Transformasi
Transformasi Geometri
Diterapkan pada deskripsi geometri suatu obyek
Gunanya untuk mengubah posisi orientasi atau ukuran suatu obyek
Transformasi modeling Digunakan untuk membentuk sebuah layar atau membuat deskripsi
hierarki suatu obyek kompleks yang terdiri dari beberapa bagian
Contoh pesawat terdiri dari sayap ekor mesin dan lain-lain dimana masing-masing dapat dispesifikasikan dalam komponen-komponen level ke-2 dan seterusnya
Transformasi modeling mendeskripsikan bagaimana setiap komponen disusun untuk rancangan keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 7 Anny Yuniarti - 2008
2D Modeling Transformations
Scale Rotate
Translate
Scale Translate
x
y
World Coordinates
Modeling
Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 8 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
World Coordinates
Modeling
Coordinates
Letrsquos look
at this in
detailhellip
Kuliah Grafika Komputer -
Teknik Informatika ITS 9 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Initial location
at (0 0) with
x- and y-axes
aligned
Kuliah Grafika Komputer -
Teknik Informatika ITS 10 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 11 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 12 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
World Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 13 Anny Yuniarti - 2008
Transformasi Geometri 2D
Translasi 2D
xrsquo = x + tx yrsquo = y + ty
(tx ty) disebut vektor translasi atau pergeseran
Dalam bentuk matriks
Persamaan translasi 2D
Prsquo = P + T
Line polygon translasi titik endpoints render
Untuk menghapus obyek yang asli display it in background color before translating it
Circle ellipse spline curve translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat) render obyek hasil translasi di posisi yang baru
y
x
t
tT
y
xP
y
xP
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 6 Anny Yuniarti - 2008
Jenis-jenis Transformasi
Transformasi Geometri
Diterapkan pada deskripsi geometri suatu obyek
Gunanya untuk mengubah posisi orientasi atau ukuran suatu obyek
Transformasi modeling Digunakan untuk membentuk sebuah layar atau membuat deskripsi
hierarki suatu obyek kompleks yang terdiri dari beberapa bagian
Contoh pesawat terdiri dari sayap ekor mesin dan lain-lain dimana masing-masing dapat dispesifikasikan dalam komponen-komponen level ke-2 dan seterusnya
Transformasi modeling mendeskripsikan bagaimana setiap komponen disusun untuk rancangan keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 7 Anny Yuniarti - 2008
2D Modeling Transformations
Scale Rotate
Translate
Scale Translate
x
y
World Coordinates
Modeling
Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 8 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
World Coordinates
Modeling
Coordinates
Letrsquos look
at this in
detailhellip
Kuliah Grafika Komputer -
Teknik Informatika ITS 9 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Initial location
at (0 0) with
x- and y-axes
aligned
Kuliah Grafika Komputer -
Teknik Informatika ITS 10 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 11 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 12 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
World Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 13 Anny Yuniarti - 2008
Transformasi Geometri 2D
Translasi 2D
xrsquo = x + tx yrsquo = y + ty
(tx ty) disebut vektor translasi atau pergeseran
Dalam bentuk matriks
Persamaan translasi 2D
Prsquo = P + T
Line polygon translasi titik endpoints render
Untuk menghapus obyek yang asli display it in background color before translating it
Circle ellipse spline curve translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat) render obyek hasil translasi di posisi yang baru
y
x
t
tT
y
xP
y
xP
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 7 Anny Yuniarti - 2008
2D Modeling Transformations
Scale Rotate
Translate
Scale Translate
x
y
World Coordinates
Modeling
Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 8 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
World Coordinates
Modeling
Coordinates
Letrsquos look
at this in
detailhellip
Kuliah Grafika Komputer -
Teknik Informatika ITS 9 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Initial location
at (0 0) with
x- and y-axes
aligned
Kuliah Grafika Komputer -
Teknik Informatika ITS 10 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 11 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 12 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
World Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 13 Anny Yuniarti - 2008
Transformasi Geometri 2D
Translasi 2D
xrsquo = x + tx yrsquo = y + ty
(tx ty) disebut vektor translasi atau pergeseran
Dalam bentuk matriks
Persamaan translasi 2D
Prsquo = P + T
Line polygon translasi titik endpoints render
Untuk menghapus obyek yang asli display it in background color before translating it
Circle ellipse spline curve translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat) render obyek hasil translasi di posisi yang baru
y
x
t
tT
y
xP
y
xP
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 8 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
World Coordinates
Modeling
Coordinates
Letrsquos look
at this in
detailhellip
Kuliah Grafika Komputer -
Teknik Informatika ITS 9 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Initial location
at (0 0) with
x- and y-axes
aligned
Kuliah Grafika Komputer -
Teknik Informatika ITS 10 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 11 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 12 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
World Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 13 Anny Yuniarti - 2008
Transformasi Geometri 2D
Translasi 2D
xrsquo = x + tx yrsquo = y + ty
(tx ty) disebut vektor translasi atau pergeseran
Dalam bentuk matriks
Persamaan translasi 2D
Prsquo = P + T
Line polygon translasi titik endpoints render
Untuk menghapus obyek yang asli display it in background color before translating it
Circle ellipse spline curve translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat) render obyek hasil translasi di posisi yang baru
y
x
t
tT
y
xP
y
xP
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 9 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Initial location
at (0 0) with
x- and y-axes
aligned
Kuliah Grafika Komputer -
Teknik Informatika ITS 10 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 11 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 12 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
World Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 13 Anny Yuniarti - 2008
Transformasi Geometri 2D
Translasi 2D
xrsquo = x + tx yrsquo = y + ty
(tx ty) disebut vektor translasi atau pergeseran
Dalam bentuk matriks
Persamaan translasi 2D
Prsquo = P + T
Line polygon translasi titik endpoints render
Untuk menghapus obyek yang asli display it in background color before translating it
Circle ellipse spline curve translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat) render obyek hasil translasi di posisi yang baru
y
x
t
tT
y
xP
y
xP
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 10 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 11 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 12 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
World Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 13 Anny Yuniarti - 2008
Transformasi Geometri 2D
Translasi 2D
xrsquo = x + tx yrsquo = y + ty
(tx ty) disebut vektor translasi atau pergeseran
Dalam bentuk matriks
Persamaan translasi 2D
Prsquo = P + T
Line polygon translasi titik endpoints render
Untuk menghapus obyek yang asli display it in background color before translating it
Circle ellipse spline curve translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat) render obyek hasil translasi di posisi yang baru
y
x
t
tT
y
xP
y
xP
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 11 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
Kuliah Grafika Komputer -
Teknik Informatika ITS 12 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
World Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 13 Anny Yuniarti - 2008
Transformasi Geometri 2D
Translasi 2D
xrsquo = x + tx yrsquo = y + ty
(tx ty) disebut vektor translasi atau pergeseran
Dalam bentuk matriks
Persamaan translasi 2D
Prsquo = P + T
Line polygon translasi titik endpoints render
Untuk menghapus obyek yang asli display it in background color before translating it
Circle ellipse spline curve translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat) render obyek hasil translasi di posisi yang baru
y
x
t
tT
y
xP
y
xP
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 12 Anny Yuniarti - 2008
2D Modeling Transformations
x
y
Modeling
Coordinates
Scale 3 3 Rotate -90
Translate 5 3
World Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 13 Anny Yuniarti - 2008
Transformasi Geometri 2D
Translasi 2D
xrsquo = x + tx yrsquo = y + ty
(tx ty) disebut vektor translasi atau pergeseran
Dalam bentuk matriks
Persamaan translasi 2D
Prsquo = P + T
Line polygon translasi titik endpoints render
Untuk menghapus obyek yang asli display it in background color before translating it
Circle ellipse spline curve translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat) render obyek hasil translasi di posisi yang baru
y
x
t
tT
y
xP
y
xP
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 13 Anny Yuniarti - 2008
Transformasi Geometri 2D
Translasi 2D
xrsquo = x + tx yrsquo = y + ty
(tx ty) disebut vektor translasi atau pergeseran
Dalam bentuk matriks
Persamaan translasi 2D
Prsquo = P + T
Line polygon translasi titik endpoints render
Untuk menghapus obyek yang asli display it in background color before translating it
Circle ellipse spline curve translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat) render obyek hasil translasi di posisi yang baru
y
x
t
tT
y
xP
y
xP
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 14 Anny Yuniarti - 2008
Transformasi Geometri 2D
Scaling 2D
xrsquo = xmiddot sx yrsquo = ymiddot sy
Dalam bentuk matriks
Uniform scaling berarti skalar pengali sama untuk semua komponen
y
x
s
s
y
x
y
x
0
0
2
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 15 Anny Yuniarti - 2008
Non-uniform scaling skalar yang berbeda untuk tiap komponen
Transformasi Geometri 2D
X 2
Y 05
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 16 Anny Yuniarti - 2008
Transformasi Geometri 2D
Rotasi 2D
xrsquo = r cos (Φ + )
yrsquo = r sin (Φ + )
Trig Identityhellip
xrsquo = r cos(f) cos( ) ndash r sin(f) sin( )
yrsquo = r sin(f) cos( ) + r cos(f) sin( )
Original pointhellip
x = r cos (f)
y = r sin (f)
Hasil substitusihellip
xrsquo = x cos( ) - y sin( )
yrsquo = x sin( ) + y cos( )
(x y)
(xrsquo yrsquo)
r r
y
x
y
x
cossin
sincos
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 17 Anny Yuniarti - 2008
Transformasi Geometri 2D
Shear 2D
Shear pada arah x relatif terhadap sumbu x xrsquo = x + shx y yrsquo = y
Parameter shx dapat berupa bilangan real
Dalam bentuk matriks
Shear pada arah y relatif terhadap sumbu y xrsquo = x yrsquo = y + shy x
Dalam bentuk matriks
y
xsh
y
x x
10
1
y
x
shy
x
y 1
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 18 Anny Yuniarti - 2008
Transformasi Geometri 2D
Reflection 2D
Pencerminan terhadap garis y = 0 (sumbu x) xrsquo = x yrsquo = -y
Dalam bentuk matriks
Pencerminan terhadap garis x = 0 (sumbu y) xrsquo = -x yrsquo = y
Dalam bentuk matriks
Pencerminan terhadap titik pusat (0 0) xrsquo = -x yrsquo = -y
Dalam bentuk matriks
y
x
y
x
10
01
y
x
y
x
10
01
y
x
y
x
10
01
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 19 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Transformations can be combined
(with simple algebra)
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 20 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 21 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = xsx
yrsquo = ysy
(xy)
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 22 Anny Yuniarti - 2008
Basic 2D Transformations
xrsquo = (xsx)cos θ) - (ysy)sin(θ)
yrsquo = (xsx)sin(θ) + (ysy)cos(θ)
(xrsquoyrsquo)
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation xrsquo = xcos(θ) -
ysin(θ) yrsquo = xsin(θ) +
ycos(θ)
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 23 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
(xrsquoyrsquo)
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 24 Anny Yuniarti - 2008
Basic 2D Transformations
Translation xrsquo = x + tx
yrsquo = y + ty
Scale xrsquo = x sx
yrsquo = y sy
Rotation
xrsquo = xcos(θ) -
ysin(θ)
yrsquo = xsin(θ) +
ycos(θ)
xrsquo = ((xsx)cos(θ) - (ysy)sin(θ)) + tx
yrsquo = ((xsx)sin(θ) + (ysy)cos(θ)) + ty
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 25 Anny Yuniarti - 2008
Matrix Representation
Represent 2D transformation by a matrix
Multiply matrix by column vector
apply transformation to point
yx
dcba
yx
dcba
dycxy
byaxx
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 26 Anny Yuniarti - 2008
Matrix Representation
Transformations combined by multiplication
yx
lk
ji
hg
fedcba
yx
Matrices are a convenient and efficient way
to represent a sequence of transformations
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 27 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Identity
yyxx
yx
yx
1001
2D Scale around (00)
ysy
xsx
y
x
y
x
s
s
y
x
y
x
0
0
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 28 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Rotate around (00)
yxy
yxx
cossin
sincos
y
x
y
x
cossin
sincos
2D Shear
yxshy
yshxx
y
x
y
x
sh
sh
y
x
y
x
1
1
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 29 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Mirror about Y axis
yyxx
yx
yx
1001
2D Mirror over (00)
yyxx
yx
yx
1001
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 30 Anny Yuniarti - 2008
2x2 Matrices
What types of transformations can be
represented with a 2x2 matrix
2D Translation
y
x
tyy
txx
Only linear 2D transformations
can be represented with a 2x2 matrix
NO
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 31 Anny Yuniarti - 2008
Linear Transformations
Linear transformations are combinations of hellip Scale
Rotation
Shear and
Mirror
Properties of linear transformations Satisfies
Origin maps to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
)()()( 22112211 pppp TsTsssT
y
x
dc
ba
y
x
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 32 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a
3x3 matrix
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 33 Anny Yuniarti - 2008
Homogeneous Coordinates
Homogeneous coordinates
represent coordinates in 2
dimensions with a 3-
vector
1
coords shomogeneou y
x
y
x
Homogeneous coordinates seem unintuitive but
they make graphics operations much easier
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 34 Anny Yuniarti - 2008
Homogeneous Coordinates
Q How can we represent translation as a 3x3
matrix
A Using the rightmost column
100
10
01
y
x
t
t
ranslationT
y
x
tyy
txx
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 35 Anny Yuniarti - 2008
Translation
Example of translation
11100
10
01
1
y
x
y
x
ty
tx
y
x
t
t
y
x
tx = 2
ty = 1
Homogeneous Coordinates
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 36 Anny Yuniarti - 2008
Homogeneous Coordinates
Add a 3rd coordinate to every 2D point
(x y w) represents a point at location (xw yw)
(x y 0) represents a point at infinity
(0 0 0) is not allowed
Convenient
coordinate system to
represent many
useful
transformations
1 2
1
2 (211) or (422) or (633)
x
y
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 37 Anny Yuniarti - 2008
Basic 2D Transformations
Basic 2D transformations as 3x3 matrices
1100
0cossin
0sincos
1
y
x
y
x
1100
10
01
1
y
x
t
t
y
x
y
x
1100
01
01
1
y
x
sh
sh
y
x
y
x
Translate
Rotate Shear
1100
00
00
1
y
x
s
s
y
x
y
x
Scale
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 38 Anny Yuniarti - 2008
Affine Transformations
Affine transformations are combinations of hellip
Linear transformations and
Translations
Properties of affine transformations
Origin does not necessarily map to origin
Lines map to lines
Parallel lines remain parallel
Ratios are preserved
w
yx
fedcba
w
yx
100
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 39 Anny Yuniarti - 2008
Matrix Composition
Transformations can be combined by
matrix multiplication
w
yx
sysx
tytx
w
yx
100
0000
1000cossin0sincos
100
1001
prsquo = T(txty) R( ) S(sxsy) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 40 Anny Yuniarti - 2008
Matrix Composition
Matrices are a convenient and efficient way to
represent a sequence of transformations
General purpose representation
Hardware matrix multiply
prsquo = (T (R (Sp) ) )
prsquo = (TRS) p
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 41 Anny Yuniarti - 2008
Matrix Composition
Be aware order of transformations matters
Matrix multiplication is not commutative
prsquo = T R S p
ldquoGlobalrdquo ldquoLocalrdquo
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 42 Anny Yuniarti - 2008
Matrix Composition
What if we want to rotate and translate
Ex Rotate line segment by 45 degrees about
endpoint a and lengthen
a a
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 43 Anny Yuniarti - 2008
Multiplication Order ndash Wrong
Way Our line is defined by two endpoints
Applying a rotation of 45 degrees R(45) affects both points
We could try to translate both endpoints to return endpoint a
to its original position but by how much
Wrong Correct
T(-3) R(45) T(3) R(45)
a a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 44 Anny Yuniarti - 2008
Multiplication Order - Correct
Isolate endpoint a from rotation effects
First translate line so a is at origin T (-3)
Then rotate line 45 degrees R(45)
Then translate back so a is where it was T(3)
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 45 Anny Yuniarti - 2008
Will this sequence of operations work
Matrix Composition
1
1100
010
301
100
0)45cos()45sin(
0)45sin()45cos(
100
010
301
y
x
y
x
a
a
a
a
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 46 Anny Yuniarti - 2008
Matrix Composition
After correctly ordering the matrices
Multiply matrices together
What results is one matrix ndash store it (on stack)
Multiply this matrix by the vector of each vertex
All vertices easily transformed with one matrix
multiply
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 47 Anny Yuniarti - 2008
Reverse Rotations
Q How do you undo a rotation of R( )
A Apply the inverse of the rotationhellip R-1( ) = R(- )
How to construct R-1( ) = R(- )
Inside the rotation matrix cos( ) = cos(- )
The cosine elements of the inverse rotation matrix are unchanged
The sign of the sine elements will flip
Thereforehellip R-1( ) = R(- ) = RT( )
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 48 Anny Yuniarti - 2008
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
include ltwindowshgt
include ltGLgluthgt
include ltstdlibhgt
include ltmathhgt
GLsizei winWidth=600 winHeight=600 set initial display window size
GLfloat xwcMin=00xwcMax=2250 set range for world coordinates
GLfloat ywcMin=00ywcMax=2250
class wcPt2D
public GLfloat xy
typedef GLfloat Matrix3x3 [3][3]
Matrix3x3 matComposite
const GLdouble pi=314159
void init(void)
glClearColor(10101000) set color of display window to white
Construct the 3 by 3 identity matrix
void matrix3x3SetIdentity (Matrix3x3 matIdent3x3)
GLint row col
for(row=0rowlt3row++)
for(col=0collt3col++)
matIdent3x3[row][col]=(row==col)
Premultiply matrix m1 times matrix m2 store result in m2
void matrix3x3PreMultiply (Matrix3x3 m1 Matrix3x3 m2)
GLint row col
Matrix3x3 matTemp
for(row=0rowlt3row++)
for(col=0collt3col++) matTemp[row][col]=m1[row][0]m2[0][col]+m1[row][1]m2[1][col]+m1[row][2]m2[2][col]
for(row=0rowlt3row++)
for(col=0collt3col++)
m2[row][col]=matTemp[row][col]
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
void translate2D(GLfloat tx GLfloat ty)
Matrix3x3 matTrans1
matrix3x3SetIdentity(matTrans1) initialize translation matrix to identity
matTrans1[0][2]=tx
matTrans1[1][2]=ty
matrix3x3PreMultiply(matTrans1matComposite)concatenate matTrans1 with composite matrix
void rotate2D(wcPt2D pivotPt GLfloat theta)
Matrix3x3 matRot
matrix3x3SetIdentity(matRot) initialize rotation matrix to identity
matRot[0][0]=cos(theta)
matRot[0][1]=-sin(theta)
matRot[0][2]=pivotPtx (1-cos(theta))+pivotPty sin(theta)
matRot[1][0]=sin(theta)
matRot[1][1]=cos(theta)
matRot[1][2]=pivotPty (1-cos(theta))-pivotPtx sin(theta)
matrix3x3PreMultiply(matRotmatComposite)concatenate matRot with the composite matrix
void scale2D(GLfloat sx GLfloat sy wcPt2D fixedPt)
Matrix3x3 matScale
matrix3x3SetIdentity(matScale) initialize scaling matrix to identity
matScale[0][0]=sx
matScale[0][2]=(1-sx)fixedPtx
matScale[1][1]=sy
matScale[1][2]=(1-sy)fixedPty
matrix3x3PreMultiply(matScalematComposite)concatenate matScale with the composite matrix
using the composite matrix calculate transformed coordinates
void transformVerts2D(GLint nVerts wcPt2D verts)
GLint k
GLfloat temp
for(k=0kltnVertsk++)
temp=matComposite[0][0]verts[k]x+matComposite[0][1]verts[k]y+matComposite[0][2] verts[k]y=matComposite[1][0]verts[k]x+matComposite[1][1]verts[k]y+matComposite[1][2]
verts[k]x=temp
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
void triangle(wcPt2D verts)
GLint k
glBegin(GL_TRIANGLES)
for(k=0klt3k++)
glVertex2f(verts[k]xverts[k]y)
glEnd()
void displayFcn(void)
GLint nVerts=3 define initial position for triangle
wcPt2D verts[3]=500250150025010001000
wcPt2D centroidPt calculate position of triangle centroid
GLint k xSum=0 ySum=0
for(k=0kltnVertsk++)
xSum+=verts[k]x
ySum+=verts[k]y
centroidPtx=GLfloat(xSum)GLfloat(nVerts)
centroidPty=GLfloat(ySum)GLfloat(nVerts)
wcPt2D pivPtfixedPt set geometric transformation parameters
pivPt=centroidPt
fixedPt=centroidPt
GLfloat tx=00 ty=1000
GLfloat sx=05 sy=05
GLdouble theta=pi20
glClear(GL_COLOR_BUFFER_BIT) clear display window
glColor3f(000010) set initial fill color to blue
triangle(verts) display blue triangle
matrix3x3SetIdentity(matComposite)initialize composite matrix to identity
construct composite matrix for transformation sequence
scale2D(sxsyfixedPt) first transformation Scale
rotate2D(pivPttheta) second transformation Rotate
translate2D(txty) final transformation Translate
transformVerts2D(nVertsverts)apply composite matrix to triangle vertices
glColor3f(100000) set color for transformed triangle
triangle(verts) display red transformed triangle
glFlush()
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
void winReshapeFcn(GLint newWidth GLint newHeight)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(xwcMinxwcMaxywcMinywcMax)
glClear(GL_COLOR_BUFFER_BIT)
void main(int argc char argv)
glutInit(ampargcargv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowPosition(5050)
glutInitWindowSize(winWidthwinHeight)
glutCreateWindow(Geometric Transformation Sequence)
init()
glutDisplayFunc(displayFcn)
glutReshapeFunc(winReshapeFcn)
glutMainLoop()
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 53 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 54 Anny Yuniarti - 2008
Some Interesting Images
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 55 Anny Yuniarti - 2008
Tugas Kelas C
Tulis sebuah program animasi yang
mengimplementasikan prosedur rotasi 2D
Inputnya sebuah polygon yang dirotasi terhadap sebuah
pivot point menggunakan sudut yang kecil
Untuk meningkatkan kecepatan gunakan aproksimasi
dari fungsi sin dan cos dan untuk menghindari
akumulasi error yang berlebihan reset nilai koordinat
awal pada setiap putaran baru
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 56 Anny Yuniarti - 2008
Tugas Kelas X
Modifikasi contoh program sebelumnya supaya
Parameter transformasi dapat dispesifikasikan
sebagai input dari user
Dapat diaplikasikan pada semua polygon dengan
verteks-verteksnya dispesikasikan oleh input dari
user
Urutan transformasi geometrik ditentukan oleh input
dari user
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 57 Anny Yuniarti - 2008
Tugas Kelas A
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang)
Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan
Kuliah Grafika Komputer -
Teknik Informatika ITS 58 Anny Yuniarti - 2008
Tugas Kelas B
Implementasi program untuk membuat gambar
Untuk membuatnya buat sebuah fungsi yang menggambar sebuah motif (gambar kiri)
Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh lalu rotasi untuk menggambar snowflake secara keseluruhan