GRAFIKA KOMPUTER ~ M. Ali Fauzi. Drawing 2 D Graphics.

Slides:



Advertisements
Similar presentations
Computer Graphics - Viewing -
Advertisements

COMPUTER GRAPHICS 2D TRANSFORMATIONS.
MAT 594CM S2010Fundamentals of Spatial ComputingAngus Forbes Overview Goals of the course: 1. to introduce real-time 3D graphics programming with openGL.
GRAFIKA KOMPUTER ~ M. Ali Fauzi.
2D TRANSFORMATIONS. 2D Transformations What is transformations? –The geometrical changes of an object from a current state to modified state. Why the.
25 May May May 2015Week 5-2D Transformations1 2D Transformations By: KanwarjeetSingh.
2D TRANSFORMATIONS.
CMPE 466 COMPUTER GRAPHICS
Computer Graphics using OpenGL, 3 rd Edition F. S. Hill, Jr. and S. Kelley Chapter 3 Additional Drawing Tools Ureerat Suksawatchon Department of Computer.
Informationsteknologi Monday, November 12, 2007Computer Graphics - Class 71 Today’s class Viewing transformation Menus Mandelbrot set and pixel drawing.
Based on slides created by Edward Angel
Viewing and Transformation
1 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Computer Viewing Ed Angel Professor of Computer Science, Electrical and Computer Engineering,
Foundations of Computer Graphics (Spring 2010) CS 184, Lecture 5: Viewing
OpenGL (II). How to Draw a 3-D object on Screen?
CS 4731: Computer Graphics Lecture 11: 3D Viewing Emmanuel Agu.
Introduction to OpenGL Pipeline From Programmer View Tong-Yee Lee.
2D Transformations x y x y x y. 2D Transformation Given a 2D object, transformation is to change the object’s Position (translation) Size (scaling) Orientation.
CAP4730: Computational Structures in Computer Graphics
Introduction to 3D viewing 3D is just like taking a photograph!
Mathematical Fundamentals
UniS CS297 Graphics with Java and OpenGL Viewing, the model view matrix.
Geometric Transformation. So far…. We have been discussing the basic elements of geometric programming. We have discussed points, vectors and their operations.
OpenGL Matrices and Transformations Angel, Chapter 3 slides from AW, Red Book, etc. CSCI 6360.
TWO DIMENSIONAL GEOMETRIC TRANSFORMATIONS CA 302 Computer Graphics and Visual Programming Aydın Öztürk
The Viewing Pipeline (Chapter 4) 5/26/ Overview OpenGL viewing pipeline: OpenGL viewing pipeline: – Modelview matrix – Projection matrix Parallel.
Geometric transformations The Pipeline
 2D Transformations 2D Transformations  Translation Translation  Rotation Rotation  Scaling Scaling.
2 COEN Computer Graphics I Evening’s Goals n Discuss the mathematical transformations that are utilized for computer graphics projection viewing.
Computer Graphics 2D Transformations. 2 of 74 Contents In today’s lecture we’ll cover the following: –Why transformations –Transformations Translation.
Computer Graphics Bing-Yu Chen National Taiwan University.
Computer Graphics I, Fall 2010 Computer Viewing.
OpenGL: Introduction Yanci Zhang Game Programming Practice.
10/7/04© University of Wisconsin, CS559 Fall 2004 Last Time Transformations Homogeneous coordinates Directions Rotation Geometry 101 – Points, edges, triangles/polygons.
OpenGL The Viewing Pipeline: Definition: a series of operations that are applied to the OpenGL matrices, in order to create a 2D representation from 3D.
OpenGL Viewing and Modeling Transformation Geb Thomas Adapted from the OpenGL Programming Guidethe OpenGL Programming Guide.
2 COEN Computer Graphics I Evening’s Goals n Discuss viewing and modeling transformations n Describe matrix stacks and their uses n Show basic geometric.
Viewing and Transformation. Pixel pipeline Vertex pipeline Course Map Transformation & Lighting Primitive assembly Viewport culling & clipping Texture.
Review on Graphics Basics. Outline Polygon rendering pipeline Affine transformations Projective transformations Lighting and shading From vertices to.
The Camera Analogy ► Set up your tripod and point the camera at the scene (viewing transformation) ► Arrange the scene to be photographed into the desired.
Chapters 5 2 March Classical & Computer Viewing Same elements –objects –viewer –projectors –projection plane.
CGGM Lab. Tan-Chi Ho 2001 Viewing and Transformation.
Taxonomy of Projections FVFHP Figure Taxonomy of Projections.
CS552: Computer Graphics Lecture 4: 2D Graphics. Recap 2D Graphics Coordinate systems 2D Transformations o Translation o Scaling o Rotation Combining.
Chap 3 Viewing and Transformation
Learning Objectives Affine transformations Affine transformations Translation Translation Rotation Rotation Scaling Scaling Reflection Reflection Shear.
CS 551 / 645: Introductory Computer Graphics Viewing Transforms.
CS5500 Computer Graphics March 20, Computer Viewing Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts.
1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Computer Viewing Isaac Gang University of Mary Hardin-Baylor.
Geometric Transformations Ceng 477 Introduction to Computer Graphics Computer Engineering METU.
2D Transformations What is transformations? The geometrical changes of an object from a current state to modified state. Why the transformations is needed?
OpenGL LAB III.
Viewing. Classical Viewing Viewing requires three basic elements - One or more objects - A viewer with a projection surface - Projectors that go from.
Computer Graphics Lecture 41 Viewing Using OpenGL Taqdees A. Siddiqi
Introduction to 3-D Viewing Glenn G. Chappell U. of Alaska Fairbanks CS 381 Lecture Notes Monday, October 27, 2003.
OpenGL Matrices and Transformations Angel, Chapter 3 slides from AW, Red Book, etc. CSCI 6360/4360.
Forward Projection Pipeline and Transformations CENG 477 Introduction to Computer Graphics.
Computer Viewing.
Courtesy of Drs. Carol O’Sullivan / Yann Morvan Trinity College Dublin
2D TRANSFORMATIONS.
2D Transformations By: KanwarjeetSingh
3D Computer Graphics (3080/GV10) Week 5-6 Tutorial 3
CSCE 441 Computer Graphics 3-D Viewing
Modeling 101 For the moment assume that all geometry consists of points, lines and faces Line: A segment between two endpoints Face: A planar area bounded.
© 2008, Fayyaz A. Afsar, DCIS, PIEAS.
Advanced Graphics Algorithms Ying Zhu Georgia State University
Computer Graphics (Spring 2003)
Projection in 3-D Glenn G. Chappell
Last Time Canonical view pipeline Projection Local Coordinate Space
Computer Graphics 3Practical Lesson
Presentation transcript:

GRAFIKA KOMPUTER ~ M. Ali Fauzi

Drawing 2 D Graphics

VIEWPORT TRANSFORMATION

Recall :Coordinate System glutReshapeFunc(reshape); void reshape(int w, int h) { glViewport(0,0,(GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-1.0, 1.0, -1.0, 1.0); }

World Coordinate System

World Coordinate System ~ The representation of an object is measured in some physical or abstract units. ~ Space in which the object geometry is defined.

World Window

World Window

World Window ~ Rectangle defining the part of the world we wish to display. ~ Area that can be seen (what is captured by the camera), measured in OpenGL coordinates.

World Window ~ Known as clipping-area void reshape(int w, int h) { glViewport(0,0,(GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-1.0, 1.0, -1.0, 1.0); }

The Default The default OpenGL 2D clipping-area is an orthographic view with x and y in the range of -1.0 and 1.0, i.e., a 2x2 square with centered at the origin.

World Window ~ Reset to the default void reshape(int w, int h) { glViewport(0,0,(GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-1.0, 1.0, -1.0, 1.0); }

Viewport Screen window Interface Window Viewport

Screen Coordinate System ~ Space in which the image is displayed ~ For example : 800 x 600 pixels

Interface Window ~ Visual representation of the screen coordinate system for windowed displays glutInitWindowSize(320, 320); glutInitWindowPosition(50, 50);

Vewport ~ A rectangle on the interface window defining where the image will appear, ~ The default is the entire screen or interface window.

Viewport

Interface Window ~ Set the viewport to the entire screen / window void reshape(int w, int h) { glViewport(0,0,(GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-1.0, 1.0, -1.0, 1.0); }

Interface Window ~ Set the viewport to half of the screen / window glutInitWindowSize(320, 320); glutInitWindowPosition(50, 50); glViewport(0,0,160,160);

Viewport Screen window Interface Window Viewport

Viewport Transformation ~ The Process called viewport transformation

THE ASPECT RATIO PROBLEM

The distortion Screen window Interface Window Viewport

The distortion Screen window Interface Window Viewport

Ratio ~ R = Aspect Ratio of World

Ratio

Keeping the Ratio Screen window Interface Window Viewport

Keeping the Ratio Screen window Interface Window Viewport

The Startegy ~ To avoid distortion, we must change the size of the world window accordingly. ~ For that, we assume that the initial world window is a square with side length L

The Startegy ~ Default glOrtho2D (-L, L, -L, L); ~ For example L=1, glOrtho2D (-1, 1, -1, 1);

The Startegy if (w <= h) glOrtho2D(-L, L, -L * h/w, L * h/w); else glOrtho2D(-L * w/h, L * w/h, -L, L); if (w <= h) glOrtho2D(-1, 1, -1 * h/w, 1 * h/w); else glOrtho2D(-1 * w/h, 1 * w/h, -1, L);

The Startegy

~ A possible solution is to change the world window whenever the viewport of the interface window were changed. ~ So, the callback Glvoid reshape(GLsizei w, GLsizei h) must include the following code :

void reshape(GLsizei width, GLsizei height) { if (height == 0) height = 1; GLfloat aspect = (GLfloat)width/(GLfloat)height; glViewport(0, 0, width, height); glMatrixMode(GL_PROJECTION); glLoadIdentity(); if (width >= height) { gluOrtho2D(-1.0 * aspect, 1.0 * aspect, -1.0, 1.0); } else { gluOrtho2D(-1.0, 1.0, -1.0 / aspect, 1.0 / aspect); }

/* Handler for window re-size event. Called back when the window first appears and whenever the window is re-sized with its new width and height */ void reshape(GLsizei width, GLsizei height) { // GLsizei for non-negative integer // Compute aspect ratio of the new window if (height == 0) height = 1; // To prevent divide by 0 GLfloat aspect = (GLfloat)width / (GLfloat)height; // Set the viewport to cover the new window glViewport(0, 0, width, height); // Set the aspect ratio of the clipping area to match the viewport glMatrixMode(GL_PROJECTION); glLoadIdentity(); // Reset the projection matrix if (width >= height) { // aspect >= 1, set the height from -1 to 1, with larger width gluOrtho2D(-1.0 * aspect, 1.0 * aspect, -1.0, 1.0); } else { // aspect < 1, set the width to -1 to 1, with larger height gluOrtho2D(-1.0, 1.0, -1.0 / aspect, 1.0 / aspect); }

2 D TRANSFORMATION

Transformation Is The geometrical changes of an object from a current state to modified state.

Why Needed? To manipulate the initially created object and to display the modified object without having to redraw it

Transformation Pipeline Vertex Modelview Matrix Modelview Matrix Projection Matrix Projection Matrix Perspective Division Perspective Division Viewport Transformation Viewport Transformation Object Coordinates Object Coordinates Eye Coordinates Eye Coordinates Clip Coordinates Clip Coordinates Normalized device Coordinates Normalized device Coordinates Window Coordinates Window Coordinates GL_MODELVIEW mode glTranslate() glRotate() glScale() glLoadMatrix() glMultMatrix() gluLookAt() GL_PROJECTION mode glOrtho() gluOrtho2D() glFrustum() gluPerspective() glViewport()

Types of Transformation ~ Modeling. In 3D graphics, handles moving objects around the scene. ~ Viewing. In 3D graphics, specifies the location of the camera.

Types of Transformation ~ Projection. Defines the viewing volume and clipping planes from eye coordinate to clip coordinates.

Types of Transformation ~ Viewport. Maps the projection of the scene into the rendering window. ~ Modelview. Combination of the viewing and modeling transformations.

Transformation Matrix Transformations in OpenGL using matrix concept

Matrix Modes ~ ModelView Matrix (GL_MODELVIEW) These concern model-related operations such as translation, rotation, and scaling, as well as viewing transformations.

Matrix Modes ~ Projection Matrix (GL_PROJECTION) Setup camera projection and cliiping-area

Transformation Pipeline Vertex Modelview Matrix Modelview Matrix Projection Matrix Projection Matrix Perspective Division Perspective Division Viewport Transformation Viewport Transformation Object Coordinates Object Coordinates Eye Coordinates Eye Coordinates Clip Coordinates Clip Coordinates Normalized device Coordinates Normalized device Coordinates Window Coordinates Window Coordinates GL_MODELVIEW mode glTranslate() glRotate() glScale() glLoadMatrix() glMultMatrix() gluLookAt() GL_PROJECTION mode glOrtho() gluOrtho2D() glFrustum() gluPerspective() glViewport()

Why do we use matrix? ~ More convenient organization of data. ~ More efficient processing ~ Enable the combination of various concatenations

THE MATRIX

Matrix addition and subtraction a b c d  a  c b  d =

Matrix addition and subtraction =

Matrix addition and subtraction = 6 3

Matrix addition and subtraction =

Matrix addition and subtraction = Tak boleh

Matrix Multiplication abcdabcd efghefgh. = a.e + b.g a.f + b.h c.e + d.g c.f + d.h

Matrix Multiplication abab efghefgh. = a.e + b.g a.f + b.h

Matrix Multiplication =

= 6

=

= Tak boleh

Matrix Types efef efef Row VectorColumn Vector

Matrix Multiplication abcdabcd efef. = efef abcdabcd. = efef acbdacbd. =

abcdabcd efef. = a.e + b.f c.e + d.f efef abcdabcd. = a.e + c.f b.e + d.f efef acbdacbd. = a.e + b.f c.e + d.f

Matrix Math We’ll use the column-vector representation for a point.

Matrix Math Which implies that we use pre- multiplication of the transformation – it appears before the point to be transformed in the equation.

THE TRANSFORMATION

Translation A translation moves all points in an object along the same straight-line path to new positions.

Translation The path is represented by a vector, called the translation or shift vector. x’ y’ xyxy txtytxty = + New Position Current Position Translation Vector P' = P + T

Translation x’ y’ xyxy txtytxty = + (2, 2) t x = 6 t y =4 ? x’ y’ = +

Translation x’ y’ xyxy txtytxty = + (2, 2) t x = 6 t y =4 ? = +

Rotation A rotation repositions all points in an object along a circular path in the plane centered at the pivot point.

Rotation  P P’ p ' x = p x cos  – p y sin  p ' x = p x cos  – p y sin  p ' y = p x sin  + p y cos  p ' y = p x sin  + p y cos 

Rotation The transformation using Rotation Matrix New Position Rotation Matrix Current Position P' = R. P

Rotation The transformation using Rotation Matrix New Position Rotation Matrix Current Position P' = R. P

Rotation Find the transformed point, P’, caused by rotating P= ( 5, 1 ) about the origin through an angle of 90 .

Rotation

Scaling Scaling changes the size of an object and involves two scale factors, Sx and Sy for the x- and y- coordinates respectively.

Scaling Scales are about the origin. P P’ p' x = s x p x p' y = s y p y

Scaling The transformation using Scale Matrix New Position Scale Matrix Current Position P' = S P

Scaling The transformation using Scale Matrix New Position Scale Matrix Current Position P' = S P

Scaling If the scale factors are in between 0 and 1  the points will be moved closer to the origin  the object will be smaller.

Scaling P(2, 5), Sx = 0.5, Sy = 0.5 Find P’ ? p' x = s x p x p' y = s y p y P(2, 5) P’

Scaling If the scale factors are larger than 1  the points will be moved away from the origin  the object will be larger.

Scaling P(2, 5), Sx = 2, Sy = 2 Find P’ ? p' x = s x p x p' y = s y p y P(2, 5) P’

Scaling If the scale factors are not the same, Sx  Sy  differential scaling Change in size and shape

Scaling If the scale factors are the same, Sx = Sy  uniform scaling

Scaling P(1, 3), Sx = 2, Sy = 5 square  rectangle p' x = s x p x p' y = s y p y P(1, 2) P’

Scaling What does scaling by 1 do? Sx=1, Sy=1

Scaling What does scaling by 1 do? Sx=1, Sy=1  Nothing changed What is that matrix called?

Scaling What does scaling by 1 do? Sx=1, Sy=1  Nothing changed What is that matrix called? Identity Matrix

Scaling What does scaling by a negative value do? Sx=-2, Sy=-2

Scaling What does scaling by a negative value do? Sx=-2, Sy=-2  Moved to Different Quadran

COMBINING TRANSFORMATIONS

Combining Transf For example, we want to rotate/scale then we want to do translation P' = M P + A

Combining Transf For example, we want to translate, then we want to rotate and sclae P' = S R (A + P)

Combining Transf P (Px,Py)=( 4, 6 ) : Translate( 6, -3 ) - > Rotation( 60˚ ) -> Scaling ( 0.5, 2.0 ) P' = S R (A + P)

Combining Transf

To combine multiple transformations, we must explicitly compute each transformed point. P' = S R (A + P)

Combining Transf It’d be nicer if we could use the same matrix operation all the time. But we’d have to combine multiplication and addition into a single operation. P' = S R (A + P)

Combining Transf Let’s move our problem into one dimension higher

HOMOGENOUS COORDINATES

Homogenous Coord Let point (x, y) in 2D be represented by point (x, y, 1) in the new space. yy x x w 

Homogenous Coord ~ Scaling our new point by any value a puts us somewhere along a particular line: (ax, ay, a). ~ A point in 2D can be represented in many ways in the new space. ~ (2, 4) > (2, 4, 1) or (8, 16, 4) or (6, 12, 3) or (2, 4, 1) or etc.

Homogenous Coord We can always map back to the original 2D point by dividing by the last coordinate (15, 6, 3)  (5, 2). (60, 40, 10)  ?.

Homogenous Coord The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name – homogeneous coordinates.

Homogenous Coord With homogeneous coordinates, we can combine multiplication and addition into a single operation.

Homogenous Coord Point in column-vector: Our point now has three coordinates. So our matrix is needs to be 3x3.

Homogenous Coord Translation: x’ y’ xyxy txtytxty = +

Homogenous Coord Rotation:

Homogenous Coord Scaling:

Homogenous Coord P (Px,Py)=( 4, 6 ) : Translate( 6, -3 ) - > Rotation( 60˚ ) -> Scaling ( 0.5, 2.0 )

Homogenous Coord We can represent any sequence of transformations as a single matrix

Homogenous Coord Does the order of operations matter?

Homogenous Coord Yes, the order does matter! 1.Translate 2.Rotate 1.Rotate 2.Translate

Homogenous Coord Yes, the order does matter! A. B = B. A?

Homogenous Coord Yes, the order does matter! A. B  B. A

Homogenous Coord Yes, the order does matter! (A.B).C = A.(B.C)?

Homogenous Coord Yes, the order does matter! (A.B).C = A.(B.C)                          dhlcfldgjcejdhkcfkdgicei bhlaflbgjaejbhkafkbgiaei lk ji dhcfdgce bhafbgae                             lk ji hg fe dc ba                          dhldgjcflcejdhkdgicfkcei bhlbgjaflaejbhkbgiafkaei hlgjhkgi flejfkei dc ba                             lk ji hg fe dc ba

Composite Transformation Matrix Arrange the transformation matrices in order from right to left. General Pivot- Point Rotation Operation :- 1.Translate (pivot point is moved to origin) 2.Rotate about origin 3.Translate (pivot point is returned to original position ) T(pivot) R(  ) T(–pivot)

1 0 -t x 0 1 -t y cos  -sin  0 sin  cos  t x 0 1 t y cos  -sin  -t x cos  + t y sin  + t x sin  cos  -t x sin  - t y cos  + t y cos  -sin  -t x cos  + t y sin  sin  cos  -t x sin  - t y cos  t x 0 1 t y Composite Transformation Matrix

Reflection: x-axisy-axis Other Transf

Reflection: origin line x=y Other Transf

Shearing-x Shearing-y SebelumSesudah SebelumSesudah Shearing