SlideShare a Scribd company logo
1 of 26
Windowing I
• A scene is made up of a collection of objects specified in world
coordinates
World Coordinates
Windowing II
• When we display a scene only those objects within a particular
window are displayed
wymax
wymin
wxmin wxmax
Window
World Coordinates
Windowing III
• Because drawing things to a display takes time, we clip
everything outside the window
wymax
wymin
wxmin wxmax
World Coordinates
Window
Clipping Window
• We could design our own clipping window with any shape,
size and orientation.
• But clipping a scene using nonlinear boundaries requires more
processing than clipping against a rectangle.
• Therefore, graphics packages commonly allow only
rectangular clipping windows aligned with the x and y axes.
Window & Viewport
 Window/clipping window
 a world-coordinate area selected for display
 define what is to be viewed
 view port
 an area on a display device to which a window is
mapped
 define where it is to be displayed
Clipping Window
• clipping window: what to display
• viewport: where to be viewed
• translation, rotation, scaling, clipping,...
The viewing pipeline
The clipping window
xwmin xwmax
ywmin
ywmax
xvmin
xvmax
yvmin
yvmax
xvmin
xvmax
yvmin
yvmax
x0
y0
xview
yview
xworld
yworld
xview
yview
Rectangular
Window
Rotated
Window
Viewing Coord. Reference Frame
(a) translate the viewing origin to the world origin
(b) rotate to align the axes of the two systems.
World-coordinates to Viewing Coordinates
• Mwc,vc= R·T
x0
y0
xview
yview
xworld
yworld
xview
yview
xview
yview
xworld
yworld
yview
)
,
( 0
0 y
x 

T )
(
R

Mwc,vc= R·T
Window - Viewport Transform
• point (xw,yw) in a designated window is
mapped to viewport coordinates (xv,yv) so
that relative positions in the two areas are the
same.
Clipping Window -> Normalized Viewport
• To transform the world-coordinate point into the same relative
position within the viewport, we require that
min
max
min
min
max
min
min
max
min
min
max
min
yw
yw
yw
yw
yv
yv
yv
yv
xw
xw
xw
xw
xv
xv
xv
xv










For any point:
should hold.
  
  
min
max
min
max
min
min
min
max
min
max
min
min
yw
yw
yv
yv
yw
yw
+
yv
=
yv
xw
xw
xv
xv
xw
xw
+
xv
=
xv






• Solving these expressions for the viewport position (xv,yv) we
have:
where
)
(
)
(
min
min
min
min
yw
yw
s
yv
yv
xw
xw
s
xv
xv
y
x






min
max
min
max
min
max
min
max
yw
yw
yv
yv
s
xw
xw
xv
xv
s y
x






C
xw
s
xv
xw
s
xv
xw
s
xv
xw
s
xw
s
xv
xv
xw
xw
s
xv
xv
x
x
x
x
x
x











min)
min
min
min
min
min
(
)
(

































1
1
0
0
2
0
1
0
1
y
x
c
Sy
c
Sx
y
x
So The window to viewport transformation in matrix form can be
written as follows
When we solve it further we get…
)
(
)
(
min
min
min
min
yw
yw
s
yv
yv
xw
xw
s
xv
xv
y
x






• Note, if Sx = Sy then the relative proportions
of objects are maintained else the world
object will be stretched or contracted in either
x or y direction when displayed on output
device.
The complete window to viewport Transformation is a
compound transformation
That consists of the following 3 transformation.
• Translation on the window, to the origin i,e Tw
• Scaling i,e Sview
• Translation of scaled image to the place of the
Viewport, Tv
Clipping Window -> Normalized Viewport
• We could obtain the transformation from world coordinates to
viewport coordinates with the sequence (in reverse order):
1. Translate
2. Scale
3. translate










1
0
0
1
0
0
1
min
min
yv
xv










1
0
0
0
0
0
0
y
x
S
S












1
0
0
1
0
0
1
min
min
yw
xw
Clipping Window -> Normalized Viewport
• So VT = Tv * S view * T w
VT =










1
0
0
1
0
0
1
min
min
yv
xv










1
0
0
0
0
0
0
y
x
S
S












1
0
0
1
0
0
1
min
min
yw
xw

































1
1
0
0
2
0
1
0
1
y
x
c
Sy
c
Sx
y
x
Example Find the normalisation transformation N which uses the
rectangle W (1, 1), X (5, 3), Y (4, 5) and Z (0, 3) as a window and the
normalised device screen as the viewport.
• Here, we see that the window edges are not parallel to the
coordinate axes. So we will first rotate the window about W
so that it is aligned with the axes.
Here, we are rotating the rectangle in clockwise direction. So α is ( – )ve i.e., – α
The rotation matrix about W (1, 1) is,
2D viewing.ppt
2D viewing.ppt
2D viewing.ppt
2D viewing.ppt

More Related Content

Similar to 2D viewing.ppt

Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
bernice-chan
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 

Similar to 2D viewing.ppt (17)

Windows and viewport
Windows and viewportWindows and viewport
Windows and viewport
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
 
Intro to Canva
Intro to CanvaIntro to Canva
Intro to Canva
 
Iagc2
Iagc2Iagc2
Iagc2
 
Sutherlands Cohen and Hodgeman algorithms
Sutherlands Cohen and Hodgeman algorithmsSutherlands Cohen and Hodgeman algorithms
Sutherlands Cohen and Hodgeman algorithms
 
Lop1
Lop1Lop1
Lop1
 
Unit 3
Unit 3Unit 3
Unit 3
 
UNIT-III
UNIT-IIIUNIT-III
UNIT-III
 
Three dimensional concepts - Computer Graphics
Three dimensional concepts - Computer GraphicsThree dimensional concepts - Computer Graphics
Three dimensional concepts - Computer Graphics
 
canvas_1.pptx
canvas_1.pptxcanvas_1.pptx
canvas_1.pptx
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
2D viewing & clipping
2D viewing & clipping2D viewing & clipping
2D viewing & clipping
 

Recently uploaded

Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
fonyou31
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
PECB
 

Recently uploaded (20)

Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfDisha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdf
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room service
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 

2D viewing.ppt

  • 1. Windowing I • A scene is made up of a collection of objects specified in world coordinates World Coordinates
  • 2. Windowing II • When we display a scene only those objects within a particular window are displayed wymax wymin wxmin wxmax Window World Coordinates
  • 3. Windowing III • Because drawing things to a display takes time, we clip everything outside the window wymax wymin wxmin wxmax World Coordinates Window
  • 4. Clipping Window • We could design our own clipping window with any shape, size and orientation. • But clipping a scene using nonlinear boundaries requires more processing than clipping against a rectangle. • Therefore, graphics packages commonly allow only rectangular clipping windows aligned with the x and y axes.
  • 5. Window & Viewport  Window/clipping window  a world-coordinate area selected for display  define what is to be viewed  view port  an area on a display device to which a window is mapped  define where it is to be displayed
  • 6. Clipping Window • clipping window: what to display • viewport: where to be viewed • translation, rotation, scaling, clipping,...
  • 8. The clipping window xwmin xwmax ywmin ywmax xvmin xvmax yvmin yvmax xvmin xvmax yvmin yvmax x0 y0 xview yview xworld yworld xview yview Rectangular Window Rotated Window
  • 9.
  • 10. Viewing Coord. Reference Frame (a) translate the viewing origin to the world origin (b) rotate to align the axes of the two systems.
  • 11. World-coordinates to Viewing Coordinates • Mwc,vc= R·T x0 y0 xview yview xworld yworld xview yview xview yview xworld yworld yview ) , ( 0 0 y x   T ) ( R  Mwc,vc= R·T
  • 12. Window - Viewport Transform • point (xw,yw) in a designated window is mapped to viewport coordinates (xv,yv) so that relative positions in the two areas are the same.
  • 13. Clipping Window -> Normalized Viewport • To transform the world-coordinate point into the same relative position within the viewport, we require that min max min min max min min max min min max min yw yw yw yw yv yv yv yv xw xw xw xw xv xv xv xv           For any point: should hold.
  • 14.       min max min max min min min max min max min min yw yw yv yv yw yw + yv = yv xw xw xv xv xw xw + xv = xv       • Solving these expressions for the viewport position (xv,yv) we have: where ) ( ) ( min min min min yw yw s yv yv xw xw s xv xv y x       min max min max min max min max yw yw yv yv s xw xw xv xv s y x      
  • 16. • Note, if Sx = Sy then the relative proportions of objects are maintained else the world object will be stretched or contracted in either x or y direction when displayed on output device.
  • 17. The complete window to viewport Transformation is a compound transformation That consists of the following 3 transformation. • Translation on the window, to the origin i,e Tw • Scaling i,e Sview • Translation of scaled image to the place of the Viewport, Tv
  • 18. Clipping Window -> Normalized Viewport • We could obtain the transformation from world coordinates to viewport coordinates with the sequence (in reverse order): 1. Translate 2. Scale 3. translate           1 0 0 1 0 0 1 min min yv xv           1 0 0 0 0 0 0 y x S S             1 0 0 1 0 0 1 min min yw xw
  • 19. Clipping Window -> Normalized Viewport • So VT = Tv * S view * T w VT =           1 0 0 1 0 0 1 min min yv xv           1 0 0 0 0 0 0 y x S S             1 0 0 1 0 0 1 min min yw xw                                  1 1 0 0 2 0 1 0 1 y x c Sy c Sx y x
  • 20.
  • 21. Example Find the normalisation transformation N which uses the rectangle W (1, 1), X (5, 3), Y (4, 5) and Z (0, 3) as a window and the normalised device screen as the viewport.
  • 22. • Here, we see that the window edges are not parallel to the coordinate axes. So we will first rotate the window about W so that it is aligned with the axes. Here, we are rotating the rectangle in clockwise direction. So α is ( – )ve i.e., – α The rotation matrix about W (1, 1) is,