SlideShare a Scribd company logo
Drawing and Coordinate Systems
Coordinate Systems






Screen Coordinate system
World Coordinate system
World window
Viewport
Window to viewport mapping
Screen Coordinate System
Glut

OpenGL
(0,0)
Screen Coordinate System
- 2D Regular Cartesian Grid
- Origin (0,0) at lower left
corner (OpenGL convention)
- Horizontal axis – x
Vertical axis – y
- Pixels are defined at the grid
intersections
- This coordinate system is defined
(0,0)
relative to the display window origin
(OpenGL: the lower left corner
of the window)

y

x

(2,2)
World Coordinate System


Screen coordinate system is not easy to
use

10 feet
20 feet
World Coordinate System


Another example:
plot a sinc function:
sinc(x) = sin(PI*x)/PI*x
x = -4 .. +4
World Coordinate System


It would be nice if we can use
application specific coordinates –
world coordinate system
glBegin(GL_LINE_STRIP);
for (x = -4.0; x <4.0; x+=0.1){
Glfloat y = sin(3.14 * x) / (3.14 * x);
glVertex2f (x,y);
}
glEnd();
Define a world window
World Window


World window – a rectangular region in
the world that limits our view
Define by

W_T

W_L, W_R, W_B, W_T

W_B

Use OpenGL command:
W_L

W_R

gluOrtho2D(left, right, bottom,
top)
Viewport




The rectangular region in the screen that
maps to our world window
Defined in the window’s (or control’s)
coordinate system
glViewport(int left, int bottom,
int (right-left),
int (top-bottom));

V_T

V_B
V_L

V_R
To draw in world coordinate system
Two tasks need to be done








Define a rectangular world window
(call an OpenGL function)
Define a viewport (call an OpenGL
function)
Perform window to viewport mapping
(OpenGL internals will do this for you)
A simple example
DrawQuad()
(300,200)
{
glViewport(0,0,300,200);
glMatrixMode(GL_PROJECTION);
glLoadIndentity();
glOrtho2D(-1,1,-1,1);
glBegin(GL_QUADS);
glColor3f(1,1,0);
glVertex2i(-0.5,-0.5);
(0,0)
glVertex2i(+0.5,-0.5);
viewport
glVertex2i(+0.5,+0.5);
glVertex2i(-0.5,+0.5);
How big is the quad?
glEnd();
}
Window to viewport mapping


The objects in the world window will
then be drawn onto the viewport
(x,y)

World window

viewport
(Sx, Sy)
Window to viewport mapping


How to calculate (sx, sy) from (x,y)?

(x,y)
(Sx, Sy)
Window to viewport mapping


First thing to remember – you don’t
need to do it by yourself. OpenGL will
do it for you




You just need to define the viewport (with
glViewport()), and the world window (with
gluOrtho2D())

But we will look ‘under the hood’
Also, one thing to remember …


A practical OpenGL issue


Before calling gluOrtho2D(), you need to
have the following two lines of code –

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(Left, Right, Bottom, Top);
Window to viewport mapping


Things that are given:






The world window (W_L, W_R, W_B, W_T)
The viewport (V_L, V_R, V_B, V_T)
A point (x,y) in the world coordinate system

Calculate the corresponding point (sx,
sy) in the screen coordinate system
Window to viewport mapping


Basic principle: the mapping should be
proportional
(sx,sy)

(x,y)

(x – W_L) / (W_R – W_L)

=

(sx – V_L) / (V_R – V_L)

(y - W_B) / (W_T – W_B)

=

(sy – V_B) / (V_T – V_B)
Window to viewport mapping
(sx,sy)

(x,y)

(x – W_L) / (W_R – W_L)

=

(sx – V_L) / (V_R – V_L)

(y - W_B) / (W_T – W_B)

=

(sy – V_B) / (V_T – V_B)

sx = (x - W_L) * (V_R-V_L)/(W_R-W_L) + V_L
sy = (y - W_B) * (V_T-V_B)/(W_T-W_B) + V_B
Some practical issues





How to set up an appropriate world
window automatically?
How to zoom into the picture?
How to set up an appropriate viewport,
so that the picture is not going to be
distorted?
World window setup


The basic idea is to see all the objects
in the world




This can just be your initial view, and the
user can change it later

How to achieve it?
World window set up


Find the world coordinates extent that will
cover the entire scene (the bounding box )
max Y

min Y
min X

max X
Zoom into the picture
Shrink your world window – call gluOrtho2D() with a new range

Viewport
Non-distorted viewport setup






Distortion happens when …
World window and display window have
different aspect ratios
Aspect ratio?
R=W/H
Fixing the aspect ratio


Method I – Fixed camera view







Limit the viewport to a portion of the
window. (covered next)
Constrain the user’s resizing ability.
Adjust the window (or control) size.

Method II – Adjusting the scale to
compensate for a non-square window.


We will cover this when we look at 3D.
Compare aspect ratios
H

W

World window

Display window

Aspect Ratio = R

Aspect Ratio = W / H

R> W/H
Match aspect ratios
H

R

?
W

World window

Display window

Aspect Ratio = R

Aspect Ratio = W / H

R> W/H
Match aspect ratios
H

R
World window
Aspect Ratio = R

R> W/H

W/R
W

Display window
Aspect Ratio = W / H

glViewport(0, 0, W, W/R)
Compare aspect ratios
H

W

World window

Display window

Aspect Ratio = R

Aspect Ratio = W / H

R< W/H
Match aspect ratios
?
H

W

World window

Display window

Aspect Ratio = R

Aspect Ratio = W / H

R< W/H
Match aspect ratios
H*R
H

World window
Aspect Ratio = R

R< W/H

W
Display window
Aspect Ratio = W / H

glViewport(0, 0, H*R, H)
When to call glViewport() ?





Initialization
When the user resizes the display
window.
New type of camera? 35mm, 70mm, …

Note: Resize event is actually called on
initialization, but your callback may not have
been connected at this time.
Resize event
Void resize(int W, int H)
{
glViewport(0,0,W, H);
}
You can provide your own to make sure the
aspect ratio is fixed.
Put it all together
DrawQuad()
(300,200)
{
glViewport(0,0,300,200);
glMatrixMode(GL_PROJECTION);
glLoadIndentity();
glOrtho2D(-1,1,-1,1);
glBegin(GL_QUADS);
glColor3f(1,1,0);
glVertex2i(-0.5,-0.5);
(0,0)
glVertex2i(+0.5,-0.5);
viewport
glVertex2i(+0.5,+0.5);
glVertex2i(-0.5,+0.5);
How big is the quad?
glEnd();
}
More Viewports


Viewports can also be thought of as clip
windows. This can be useful for:






User interaction
Static camera – small moving object
Limited field-of-view
Occlusion culling
Selection (picking)

More Related Content

PPTX
Mid point circle algorithm
Mani Kanth
 
PPT
Visible surface detection in computer graphic
anku2266
 
PPTX
illumination model in Computer Graphics by irru pychukar
syedArr
 
PPT
Window to viewport transformation
Ankit Garg
 
PPTX
Bresenham's line algorithm
Pooja Dixit
 
PPTX
Cohen-Sutherland Line Clipping Algorithm
Maruf Abdullah (Rion)
 
PPT
Clipping
Udayan Gupta
 
PPTX
3 d display methods
Shami Al Rahad
 
Mid point circle algorithm
Mani Kanth
 
Visible surface detection in computer graphic
anku2266
 
illumination model in Computer Graphics by irru pychukar
syedArr
 
Window to viewport transformation
Ankit Garg
 
Bresenham's line algorithm
Pooja Dixit
 
Cohen-Sutherland Line Clipping Algorithm
Maruf Abdullah (Rion)
 
Clipping
Udayan Gupta
 
3 d display methods
Shami Al Rahad
 

What's hot (20)

PPTX
Bresenham circle
Taher Barodawala
 
PDF
Unit 3
ypnrao
 
PDF
2D Transformation in Computer Graphics
A. S. M. Shafi
 
PPT
Hidden surfaces
Mohd Arif
 
PPTX
Window to Viewport Transformation in Computer Graphics with.pptx
Dolchandra
 
PDF
Unit-IV Windowing and Clipping.pdf
Amol Gaikwad
 
PPT
Polygon clipping
Ankit Garg
 
PPTX
Random scan displays and raster scan displays
Somya Bagai
 
PPT
Windows and viewport
Technology & Education
 
PPT
Z buffer
AmitBiswas99
 
PDF
4. THREE DIMENSIONAL DISPLAY METHODS
SanthiNivas
 
PPT
Seed filling algorithm
Mani Kanth
 
PPTX
KEY FRAME SYSTEM-Ruby Stella mary.pptx
ComputerScienceDepar6
 
PPTX
Composite transformation
Pooja Dixit
 
PDF
3D Transformation
SwatiHans10
 
PPTX
Computer graphics basic transformation
Selvakumar Gna
 
PPTX
Curve and text clipping
Arvind Kumar
 
PPTX
Computer graphics
Nanhen Verma
 
Bresenham circle
Taher Barodawala
 
Unit 3
ypnrao
 
2D Transformation in Computer Graphics
A. S. M. Shafi
 
Hidden surfaces
Mohd Arif
 
Window to Viewport Transformation in Computer Graphics with.pptx
Dolchandra
 
Unit-IV Windowing and Clipping.pdf
Amol Gaikwad
 
Polygon clipping
Ankit Garg
 
Random scan displays and raster scan displays
Somya Bagai
 
Windows and viewport
Technology & Education
 
Z buffer
AmitBiswas99
 
4. THREE DIMENSIONAL DISPLAY METHODS
SanthiNivas
 
Seed filling algorithm
Mani Kanth
 
KEY FRAME SYSTEM-Ruby Stella mary.pptx
ComputerScienceDepar6
 
Composite transformation
Pooja Dixit
 
3D Transformation
SwatiHans10
 
Computer graphics basic transformation
Selvakumar Gna
 
Curve and text clipping
Arvind Kumar
 
Computer graphics
Nanhen Verma
 
Ad

Similar to computer graphics (20)

PDF
Lesson 2 - Drawing Objects
Mark Daniel Dacer
 
PDF
3 projection computer graphics
cairo university
 
PPTX
CHAPTER - 4 for software engineering (1).pptx
lcon22
 
PPTX
3 d graphics with opengl part 2
Sardar Alam
 
PPT
Lec4
Sahil Dahiya
 
PDF
CG3_ch3+ch4computergraphicsbreesenhan.pdf
VikramBhathal
 
PDF
Games 3 dl4-example
enrique_arguello
 
PPTX
Trident International Graphics Workshop 2014 1/5
Takao Wada
 
PPT
Java Graphics
Shraddha
 
DOCX
computer graphics slides by Talha shah
Syed Talha
 
PPT
Drawing Tools
Ghaffar Khan
 
PPT
CS 354 Object Viewing and Representation
Mark Kilgard
 
PPT
CS 354 Transformation, Clipping, and Culling
Mark Kilgard
 
PPTX
UNIT_3-Two-Dimensional-Geometric-Transformations.pptx
Anil Yadav
 
PPT
Computer Graphics involves technology to access. The Process transforms and p...
ErNandiniDharne
 
PPT
Csc406 lecture7 device independence and normalization in Computer graphics(Co...
Daroko blog(www.professionalbloggertricks.com)
 
DOCX
Lab Practices and Works Documentation / Report on Computer Graphics
Rup Chowdhury
 
PDF
UNIT_3-Two-Dimensional-Geometric-Transformations.pdf
VivekKumar148171
 
PPT
Trytten computergraphics(1)
nriaz469
 
Lesson 2 - Drawing Objects
Mark Daniel Dacer
 
3 projection computer graphics
cairo university
 
CHAPTER - 4 for software engineering (1).pptx
lcon22
 
3 d graphics with opengl part 2
Sardar Alam
 
CG3_ch3+ch4computergraphicsbreesenhan.pdf
VikramBhathal
 
Games 3 dl4-example
enrique_arguello
 
Trident International Graphics Workshop 2014 1/5
Takao Wada
 
Java Graphics
Shraddha
 
computer graphics slides by Talha shah
Syed Talha
 
Drawing Tools
Ghaffar Khan
 
CS 354 Object Viewing and Representation
Mark Kilgard
 
CS 354 Transformation, Clipping, and Culling
Mark Kilgard
 
UNIT_3-Two-Dimensional-Geometric-Transformations.pptx
Anil Yadav
 
Computer Graphics involves technology to access. The Process transforms and p...
ErNandiniDharne
 
Csc406 lecture7 device independence and normalization in Computer graphics(Co...
Daroko blog(www.professionalbloggertricks.com)
 
Lab Practices and Works Documentation / Report on Computer Graphics
Rup Chowdhury
 
UNIT_3-Two-Dimensional-Geometric-Transformations.pdf
VivekKumar148171
 
Trytten computergraphics(1)
nriaz469
 
Ad

Recently uploaded (20)

PPTX
20250924 Navigating the Future: How to tell the difference between an emergen...
McGuinness Institute
 
PPTX
Dakar Framework Education For All- 2000(Act)
santoshmohalik1
 
PDF
Biological Classification Class 11th NCERT CBSE NEET.pdf
NehaRohtagi1
 
PPTX
CONCEPT OF CHILD CARE. pptx
AneetaSharma15
 
PPTX
Introduction to pediatric nursing in 5th Sem..pptx
AneetaSharma15
 
PPTX
How to Apply for a Job From Odoo 18 Website
Celine George
 
PPTX
HISTORY COLLECTION FOR PSYCHIATRIC PATIENTS.pptx
PoojaSen20
 
PPTX
CDH. pptx
AneetaSharma15
 
PPTX
CARE OF UNCONSCIOUS PATIENTS .pptx
AneetaSharma15
 
PPTX
Sonnet 130_ My Mistress’ Eyes Are Nothing Like the Sun By William Shakespear...
DhatriParmar
 
PDF
The Minister of Tourism, Culture and Creative Arts, Abla Dzifa Gomashie has e...
nservice241
 
PPTX
How to Close Subscription in Odoo 18 - Odoo Slides
Celine George
 
PDF
The-Invisible-Living-World-Beyond-Our-Naked-Eye chapter 2.pdf/8th science cur...
Sandeep Swamy
 
PPTX
An introduction to Prepositions for beginners.pptx
drsiddhantnagine
 
PPTX
Virus sequence retrieval from NCBI database
yamunaK13
 
PPTX
Information Texts_Infographic on Forgetting Curve.pptx
Tata Sevilla
 
PPTX
Kanban Cards _ Mass Action in Odoo 18.2 - Odoo Slides
Celine George
 
PPTX
Python-Application-in-Drug-Design by R D Jawarkar.pptx
Rahul Jawarkar
 
PPTX
family health care settings home visit - unit 6 - chn 1 - gnm 1st year.pptx
Priyanshu Anand
 
PDF
BÀI TẬP TEST BỔ TRỢ THEO TỪNG CHỦ ĐỀ CỦA TỪNG UNIT KÈM BÀI TẬP NGHE - TIẾNG A...
Nguyen Thanh Tu Collection
 
20250924 Navigating the Future: How to tell the difference between an emergen...
McGuinness Institute
 
Dakar Framework Education For All- 2000(Act)
santoshmohalik1
 
Biological Classification Class 11th NCERT CBSE NEET.pdf
NehaRohtagi1
 
CONCEPT OF CHILD CARE. pptx
AneetaSharma15
 
Introduction to pediatric nursing in 5th Sem..pptx
AneetaSharma15
 
How to Apply for a Job From Odoo 18 Website
Celine George
 
HISTORY COLLECTION FOR PSYCHIATRIC PATIENTS.pptx
PoojaSen20
 
CDH. pptx
AneetaSharma15
 
CARE OF UNCONSCIOUS PATIENTS .pptx
AneetaSharma15
 
Sonnet 130_ My Mistress’ Eyes Are Nothing Like the Sun By William Shakespear...
DhatriParmar
 
The Minister of Tourism, Culture and Creative Arts, Abla Dzifa Gomashie has e...
nservice241
 
How to Close Subscription in Odoo 18 - Odoo Slides
Celine George
 
The-Invisible-Living-World-Beyond-Our-Naked-Eye chapter 2.pdf/8th science cur...
Sandeep Swamy
 
An introduction to Prepositions for beginners.pptx
drsiddhantnagine
 
Virus sequence retrieval from NCBI database
yamunaK13
 
Information Texts_Infographic on Forgetting Curve.pptx
Tata Sevilla
 
Kanban Cards _ Mass Action in Odoo 18.2 - Odoo Slides
Celine George
 
Python-Application-in-Drug-Design by R D Jawarkar.pptx
Rahul Jawarkar
 
family health care settings home visit - unit 6 - chn 1 - gnm 1st year.pptx
Priyanshu Anand
 
BÀI TẬP TEST BỔ TRỢ THEO TỪNG CHỦ ĐỀ CỦA TỪNG UNIT KÈM BÀI TẬP NGHE - TIẾNG A...
Nguyen Thanh Tu Collection
 

computer graphics

  • 2. Coordinate Systems      Screen Coordinate system World Coordinate system World window Viewport Window to viewport mapping
  • 4. Screen Coordinate System - 2D Regular Cartesian Grid - Origin (0,0) at lower left corner (OpenGL convention) - Horizontal axis – x Vertical axis – y - Pixels are defined at the grid intersections - This coordinate system is defined (0,0) relative to the display window origin (OpenGL: the lower left corner of the window) y x (2,2)
  • 5. World Coordinate System  Screen coordinate system is not easy to use 10 feet 20 feet
  • 6. World Coordinate System  Another example: plot a sinc function: sinc(x) = sin(PI*x)/PI*x x = -4 .. +4
  • 7. World Coordinate System  It would be nice if we can use application specific coordinates – world coordinate system glBegin(GL_LINE_STRIP); for (x = -4.0; x <4.0; x+=0.1){ Glfloat y = sin(3.14 * x) / (3.14 * x); glVertex2f (x,y); } glEnd();
  • 8. Define a world window
  • 9. World Window  World window – a rectangular region in the world that limits our view Define by W_T W_L, W_R, W_B, W_T W_B Use OpenGL command: W_L W_R gluOrtho2D(left, right, bottom, top)
  • 10. Viewport   The rectangular region in the screen that maps to our world window Defined in the window’s (or control’s) coordinate system glViewport(int left, int bottom, int (right-left), int (top-bottom)); V_T V_B V_L V_R
  • 11. To draw in world coordinate system Two tasks need to be done     Define a rectangular world window (call an OpenGL function) Define a viewport (call an OpenGL function) Perform window to viewport mapping (OpenGL internals will do this for you)
  • 13. Window to viewport mapping  The objects in the world window will then be drawn onto the viewport (x,y) World window viewport (Sx, Sy)
  • 14. Window to viewport mapping  How to calculate (sx, sy) from (x,y)? (x,y) (Sx, Sy)
  • 15. Window to viewport mapping  First thing to remember – you don’t need to do it by yourself. OpenGL will do it for you   You just need to define the viewport (with glViewport()), and the world window (with gluOrtho2D()) But we will look ‘under the hood’
  • 16. Also, one thing to remember …  A practical OpenGL issue  Before calling gluOrtho2D(), you need to have the following two lines of code – glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(Left, Right, Bottom, Top);
  • 17. Window to viewport mapping  Things that are given:     The world window (W_L, W_R, W_B, W_T) The viewport (V_L, V_R, V_B, V_T) A point (x,y) in the world coordinate system Calculate the corresponding point (sx, sy) in the screen coordinate system
  • 18. Window to viewport mapping  Basic principle: the mapping should be proportional (sx,sy) (x,y) (x – W_L) / (W_R – W_L) = (sx – V_L) / (V_R – V_L) (y - W_B) / (W_T – W_B) = (sy – V_B) / (V_T – V_B)
  • 19. Window to viewport mapping (sx,sy) (x,y) (x – W_L) / (W_R – W_L) = (sx – V_L) / (V_R – V_L) (y - W_B) / (W_T – W_B) = (sy – V_B) / (V_T – V_B) sx = (x - W_L) * (V_R-V_L)/(W_R-W_L) + V_L sy = (y - W_B) * (V_T-V_B)/(W_T-W_B) + V_B
  • 20. Some practical issues    How to set up an appropriate world window automatically? How to zoom into the picture? How to set up an appropriate viewport, so that the picture is not going to be distorted?
  • 21. World window setup  The basic idea is to see all the objects in the world   This can just be your initial view, and the user can change it later How to achieve it?
  • 22. World window set up  Find the world coordinates extent that will cover the entire scene (the bounding box ) max Y min Y min X max X
  • 23. Zoom into the picture Shrink your world window – call gluOrtho2D() with a new range Viewport
  • 24. Non-distorted viewport setup     Distortion happens when … World window and display window have different aspect ratios Aspect ratio? R=W/H
  • 25. Fixing the aspect ratio  Method I – Fixed camera view     Limit the viewport to a portion of the window. (covered next) Constrain the user’s resizing ability. Adjust the window (or control) size. Method II – Adjusting the scale to compensate for a non-square window.  We will cover this when we look at 3D.
  • 26. Compare aspect ratios H W World window Display window Aspect Ratio = R Aspect Ratio = W / H R> W/H
  • 27. Match aspect ratios H R ? W World window Display window Aspect Ratio = R Aspect Ratio = W / H R> W/H
  • 28. Match aspect ratios H R World window Aspect Ratio = R R> W/H W/R W Display window Aspect Ratio = W / H glViewport(0, 0, W, W/R)
  • 29. Compare aspect ratios H W World window Display window Aspect Ratio = R Aspect Ratio = W / H R< W/H
  • 30. Match aspect ratios ? H W World window Display window Aspect Ratio = R Aspect Ratio = W / H R< W/H
  • 31. Match aspect ratios H*R H World window Aspect Ratio = R R< W/H W Display window Aspect Ratio = W / H glViewport(0, 0, H*R, H)
  • 32. When to call glViewport() ?    Initialization When the user resizes the display window. New type of camera? 35mm, 70mm, … Note: Resize event is actually called on initialization, but your callback may not have been connected at this time.
  • 33. Resize event Void resize(int W, int H) { glViewport(0,0,W, H); } You can provide your own to make sure the aspect ratio is fixed.
  • 34. Put it all together DrawQuad() (300,200) { glViewport(0,0,300,200); glMatrixMode(GL_PROJECTION); glLoadIndentity(); glOrtho2D(-1,1,-1,1); glBegin(GL_QUADS); glColor3f(1,1,0); glVertex2i(-0.5,-0.5); (0,0) glVertex2i(+0.5,-0.5); viewport glVertex2i(+0.5,+0.5); glVertex2i(-0.5,+0.5); How big is the quad? glEnd(); }
  • 35. More Viewports  Viewports can also be thought of as clip windows. This can be useful for:      User interaction Static camera – small moving object Limited field-of-view Occlusion culling Selection (picking)