SlideShare a Scribd company logo
Line & Area
  Chen Jing-Fung (2006/10/24)
   Assistant Research Fellow,
      Digital Media Center,
National Taiwan Normal University



             Video Processing Lab
                   臺灣師範大學數位媒體中心視訊處理研究室

                      National Taiwan Normal University
Coordinate
                    representations
                           Viewing & Projection
                               Coordinates

                                  1       1
    Modeling                                     1             Video Monitor
(local or master)
   Coordinates
                                                                 Plotter
                      World           Normalized
                    (Cartesian)       Coordinates
                    Coordinates
                                                              Other Output


                                                                 Device
                                                               Coordinates
                                              Video Processing Lab             2
                                                 臺灣師範大學數位媒體中心視訊處理研究室
Reshape function




          Video Processing Lab   3
             臺灣師範大學數位媒體中心視訊處理研究室
Monitor

                                        monitor




                              Video Processing Lab            4
http://groups.csail.mit.edu/graphics/classes/6.837/F04/calendar.html
                                  臺灣師範大學數位媒體中心視訊處理研究室
2D graph
• Plot figure in 2D coordinate
  – X-coordinate indicated horizontal
  – Y-coordinate indicated vertical
  – Z-coordinate indicated depth

                  simple




                                       nonsimple


                           Video Processing Lab    5
                              臺灣師範大學數位媒體中心視訊處理研究室
Coordinate Reference
• A set of coordinate extents                         y
   – Bounding box (3D), bounding rectangle (2D)
                                              5
   – Max & Min (x, y, z), (x, y)              4
• Screen coordinates                              3
                                                  2
   – Scan line number: y                          1
   – Column number: x                             0
                                                                        x
                                                          01 2345
• A low-level procedure of the pixel position
   – setPixel(x, y);
• Retrieve the current frame-buffer setting for a
  pixel location
   – getPixel(x, y, color);
                         Combine RGB bit codes

                                  Video Processing Lab              6
                                     臺灣師範大學數位媒體中心視訊處理研究室
Coordinate specifications
• Absolute coordinate & Relative
  coordinate
  – Last position (current position): (3, 8)
  – => Some graph packages is used relative
    coordinate: (2, -1) -> Absolute position:
    (5, 7)




                        Video Processing Lab    7
                           臺灣師範大學數位媒體中心視訊處理研究室
2D world-coordinate in
           OpenGL
• An orthogonal projection function
  – gluOrtho2D
   glMatrixMode (GL_PROJECTION);
   glLoadIdentity ();   Assign the identity matrix
   gluOrtho2D (xmin, xmax, ymin, ymax); World coordinate range



                                                                 ymax

                Display window

                                                                 ymin
                                    xmin
                                                     xmax
                                    Video Processing Lab           8
                                       臺灣師範大學數位媒體中心視訊處理研究室
How to a parameter
  drawing line?


        Video Processing Lab
            臺灣師範大學數位媒體中心視訊處理研究室

              National Taiwan Normal University
Bresenham’s line algorithm
• Bresenham’s line is an accurate and
  efficient raster line-generating algorithm
• Use only incremental integer calculations.
• Determine at next sample point whether
  to plot.
  – The positive-slope line:
    if start point (50, 50), next point?
     • (51, 50) or (51, 51)



                              Video Processing Lab   10
                                 臺灣師範大學數位媒體中心視訊處理研究室
Parallel Bresenham line algorithm
 • Drawing parallel processing
   – Two different line on the same plane and
     along a line path simultaneously.



           yk+1

            yk

                   xk+1




                                                    11
                          P. 99-101
                             Video Processing Lab
                               臺灣師範大學數位媒體中心視訊處理研究室
How to buffer value by
   the structure?


          Video Processing Lab
              臺灣師範大學數位媒體中心視訊處理研究室

                National Taiwan Normal University
Setting frame-buffer values
 • Since scan-conversion algorithms generate
   pixel positions which are labeled from (0, 0)
   to (xmax, ymax), the frame-buffer bit
   address is calculated as
   – (x, y)                                                       Screen
       • addr(x, y) = addr(0, 0) + y(xmax + 1)+x           yend
   – (x+1, y)
       • addr(x+1, y) = addr(x, y) + 1
                                                                                (x, y)
   – (x+1, y+1)                                             y0
       • addr(x+1, y+1) = addr(x, y) + xmax + 2
                                                                  x0                  xend
         Frame buffer:
      (0, 0) (1, 0) (2, 0)          (0, 1)        (x, y)
                             (xmax, 0)                                 (xmax, ymax)
     addr(0, 0)                                addr(x, y)
                                      Video Processing Lab                            13
                                             臺灣師範大學數位媒體中心視訊處理研究室
Another drawing line
     method
     Use Midpoint


         Video Processing Lab
             臺灣師範大學數位媒體中心視訊處理研究室

               National Taiwan Normal University
Circle-generating algorithms



 • A circle is defined as the set of points
   – Radius = r, center position (xc, yc)
            (x-xc)2+(y-yc)2=r2
   – X axis in unit steps from xc- r to xc+ r and
     calculating the corresponding y values at each
     position as
                  y  y c  r 2  ( xc  x )2
   – using polar coordinates r and θ
                              Video Processing Lab    15
            p.103-104            臺灣師範大學數位媒體中心視訊處理研究室
Symmetry of a circle
• Eight octants
  – Calculation if a circle point (x, y) in one octant
    yields the circle points shown for the other
    seven octants
• More efficient circle algorithm are based
  on incremental calculation of decision
  parameters, which involves only simple
  integer operations. (as in the Bresenham
  line algorithm)


                             Video Processing Lab        16
                                臺灣師範大學數位媒體中心視訊處理研究室
Midpoint circle algorithm (1)
• The basic idea is to test the halfway
  position between two pixels
  – Determine inside or outside the circle
    boundary.
• Midpoint method = Bresenham line
  algorithm
  – Integer circle radius
  – A straight-line segment



                           Video Processing Lab   17
                              臺灣師範大學數位媒體中心視訊處理研究室
Midpoint circle algorithm (2)
    • To apply the midpoint method, we define a
      circle function as:
         – fcirc(x, y) = x2+y2-r2                                        x 2 + y2 - r 2 = 0
                                                             yk
             <0, if (x,y) is inside the circle boundary    yk-1   Midpoint
fcirc(x,y)   =0, if (x,y) is on the circle boundary        yk-2
             >0, if (x,y) is outside the circle boundary          xk xk+1 xk+2
         – Decision parameter (each xk, k=0 & pk<0)
             • pk= fcirc(xk+1, yk-1/2)
             • pk+1=pk+2(xk+1) + (yk+12-yk2) - (yk+1-yk)+1
         – Increment?
                      What is different between midpoint and line-
                      based?          Video Processing Lab        18
                                   p.105-109 臺灣師範大學數位媒體中心視訊處理研究室
Other curves
• Various curve functions are useful in object
  modeling, animation path specification and other
  graphics applications.

• Commonly encountered curves include conics,
  general polynomials and spline functions.
   – Conic sections: Ax2+ By2+Cxy+Dx+Ey+F=0                       v0
                                                                              g
   – Parabolic                                          y0
      • trajectory: y=y0+a(x-x0)2+b(x-x0)
      • Projection point: x=x0+vx0t; y=y0+vy0t-1/2gt2
   – Hyperbola: (x/rx)2-(y/ry)2=1                                      x0

        Spline curve formed with individual                  ry
        cubic polynomial sections between
        specified coordinate positions                                  rx



                                    Video Processing Lab                     19
                                       臺灣師範大學數位媒體中心視訊處理研究室
Fill-Area


   Video Processing Lab
       臺灣師範大學數位媒體中心視訊處理研究室

         National Taiwan Normal University
Fill-Area Primitives
• Polygon area (solid-color, patterned)
  – scan-line to fill polygon
    •   Intersection points located and sorted
    •   Consecutive pairs define interior span
    •   Attention with vertex intersections
    •   Exploit coherence (incremental calculations)
  – flood fill algorithm



                            Video Processing Lab       21
                               臺灣師範大學數位媒體中心視訊處理研究室
Fill-area primitives
• Describing components of a picture is
  an area that is filled with some solid
  color
  – Polygon is a plane figure specified by
    • Vertices: three or more coordinate positions
    • Edges or sides: straight-line segments

           concave                 convey
                     <1800
                                       >1800
    • Area….
                             Video Processing Lab    22
                                臺灣師範大學數位媒體中心視訊處理研究室
Concave polygons
• The direction of surface is “z’’ axle
• Given two consecutive vertex (V)
  positions, Vk and Vk+1, we define the
  edge vector (E) as Ek = Vk+1 - Vk (Cross product)
              y
                   V6             V5              (E1 x E2)z > 0
                             E4                   (E2 x E3)z > 0
                                   V4
   Where is “z”                                   (E3 x E4)z < 0    convex
                                  E3
                                        E2 V3
                  V1                    V2
                        E1                   x                     concave
                                                 Test!!
                                        Video Processing Lab             23
                                             臺灣師範大學數位媒體中心視訊處理研究室
Splitting concave polygons
• Vector method
  – All vector cross products have the same
    sign => convex
• Rotational method
  – rotate polygon-edges onto x-axis, always
    same direction => convex
  – Each vertex vk                    Area 1
                                        V1
    • Origin: translate Vk                             V3
                                                 V2
    • Rotate clockwise Vk+1 on x-axis
    • If vertex below x-axis => split             Area 2
                                                            V4

                          Video Processing Lab               24
                             臺灣師範大學數位媒體中心視訊處理研究室
Inside-Outside Tests
• Testing interior vs. exterior object
  boundaries
  – Odd-even (parity) rule or nonzero winding
    parity rule
• Odd-even rule
  – number of segments crossed by the line drawn
    from P to distant point outside the coordinate
    extents
     • bounding rectangle or box is odd it is interior point
     • else it is exterior point
  – use the rule for color filling of rings, 2
    concentric polygons

                                Video Processing Lab           25
                                   臺灣師範大學數位媒體中心視訊處理研究室
Nonzero winding parity
         rule
• Nonzero winding parity rule may yield
  different interior and exterior regions
  – Setup vectors along object edges and the
    reference line.
  – Compute cross product of vector u along the
    line from P to a distant point, with object
    vector E for each edge that crosses the line.
  – With 2 D object in XY plane direction of cross
    product will be + z direction or –z direction.
     • if z component for a crossing is +ve that segment
       crosses from left to right, add 1 to winding number
     • else if it is left to right subtract 1 from winding
       number simpler


                                Video Processing Lab         26
                                   臺灣師範大學數位媒體中心視訊處理研究室
3D inside-outside
     • Consider a sphere, x2 + y2 + z2 = 1.
        – Interior: the set of all points that
          satisfy x2 + y2 + z2 < 1
        – The solid's surface: x2 + y2 + z2 <= 1.
        – Exterior: x2 + y2 + z2 > 1.
                        Interior point A                       boundary




                                   Boundary point C



                Exterior point B
                                        Video Processing Lab              27
http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/model/closure.html
                                         臺灣師範大學數位媒體中心視訊處理研究室
Polygon Surfaces (1)
• Set of surface polygons enclose
  object interior = Boundary
  Representation (“B-rep”)


                  wireframe representation
                  of a cylinder with back
                  (hidden) lines removed


                    Video Processing Lab     28
                       臺灣師範大學數位媒體中心視訊處理研究室
Polygon Surfaces (2)
• Polygon tables (B-rep lists)
  – Geometric and attribute tables
  – Vertex, edge, polygon tables
  – Consistency, completeness checks




                      Video Processing Lab   29
                         臺灣師範大學數位媒體中心視訊處理研究室
Two polygon surfaces
     • Geometric data-table representation for
       two adjacent polygon surface facets,
       formed with six edges and five vertices
                                         VERTEX TABLE        EDGE TABLE
                           V1                                 E1: V1, V2
                                         V1: x1, y1, z1
                                                              E2: V2, V3
                                         V2: x2, y2, z2
           E1        E3        E6                             E3
                                         V3
                S1                                            E4
                                         V4
                          S2        V5                        E5
                                         V5
         E2 V                                                 E6
              3 E
                 4             E5           SURFACE-FACET TABLE
V2
                                               S1: E1, E2,E3
                      V4                       S2: E3, E4, E5, E6

                                            Video Processing Lab           30
                                                臺灣師範大學數位媒體中心視訊處理研究室
Video Processing Lab      31
http://www.icg.tu-graz.ac.at/courses/bacgvis/slides
                                              臺灣師範大學數位媒體中心視訊處理研究室
Plane equations

 • Ax+By+Cz+D=0
     – Plane parameter: A, B, C and D
 • Normal vector (N)                         the plane equation:
                                             x − 1 = 0.
The normal vector:
N=( A, B, C )
Plane equation
Ax + By + Cz + D = 0




                          Video Processing Lab            32
                             臺灣師範大學數位媒體中心視訊處理研究室
3D cartesian coordinate

          y axis
                                       y axis
                                                           z axis




                             x axis                           x axis
 z axis
                                           Left-handed cartesian
    Right-handed cartesian




                                      Video Processing Lab             33
                                         臺灣師範大學數位媒體中心視訊處理研究室
Front and Back Polygon
         Faces (1)
• Back face = polygon side that faces into
  the object interior
• Front face = polygon side that faces
  outward
• Behind a polygon plane = visible to the
  polygon back face
• In front of a polygon plane = visible to the
  polygon front face


                         Video Processing Lab    34
                            臺灣師範大學數位媒體中心視訊處理研究室
Front and Back Polygon
         Faces (2)
• Ax + By + Cz + D = 0 for points on the
  surface
                   < 0 for points behind
                   > 0 for points in front
  – right-handed coordinate system
  – polygon points in counterclockwise order
• V1, V2, V3 counterclockwise => normal
  vector N = (V2 - V1) x (V3 - V1)


                           Video Processing Lab   35
                              臺灣師範大學數位媒體中心視訊處理研究室
What is Cross product (x) ?
 • A mathematical joke asks,
   – "What do you get when you cross a
     mountain-climber with a mosquito? "

 • On the television sitcom, Head of
   the Class asks,
   – "What do you get when you cross an
     elephant and a grape?"


                         Video Processing Lab         36
              http://mathworld.wolfram.com/CrossProduct.html
                            臺灣師範大學數位媒體中心視訊處理研究室
Cross product (x)
• The orientation determined by the
  right-hand rule




                        Video Processing Lab         37
             http://mathworld.wolfram.com/CrossProduct.html
                          臺灣師範大學數位媒體中心視訊處理研究室
OpenGL polygon fill-area
      functions
• OpenGL provides a special rectangle function
   – glRect*(x1, y1, x2, y2);
      • *: i (integer), s (short), f (float), d (double) and v (vector)
      • plRectiv(vertex1, vertex2);
• Fill rectangle use “glVertex”
      • glBegin (GL_POLYGON);
          –   glVertex2iv   (p1);
          –   glVertex2iv   (p2);                 p6       p5
          –   glVertex2iv   (p3);
          –   glVertex2iv   (p4);
          –   glVertex2iv   (p5);            p1                 p4
          –   glVertex2iv   (p6);
      • glEnd ();                                 p2      p3


                                      Video Processing Lab                38
                                         臺灣師範大學數位媒體中心視訊處理研究室
How to design “font”?
A complete set of type of one size
            and face.

               Video Processing Lab
                   臺灣師範大學數位媒體中心視訊處理研究室

                     National Taiwan Normal University
South China Morning Post, 13
       Sep., 2005




Video Processing Lab           40
   臺灣師範大學數位媒體中心視訊處理研究室
Texture

• Graphics displays often include
  textural information :
  – labels on graphs and charts
  – signs on buildings or vehicles
  – General identifying information for
    simulation and visualization applications.




                         Video Processing Lab    41
                            臺灣師範大學數位媒體中心視訊處理研究室
Typeface (1)
• Letters, numbers and other characters can
  be displayed in a variety of sizes and
  styles.
  – The overall design style for a set of characters
  – Routines for generating character primitives
     • 20-point Courier Italic or 28-point Palatino
       Bold
     • font :
         – 14 points, a total character height is about 0.5 cm. A



         – 72 points is about 2.54 cm (1 inch)   B
                                  Video Processing Lab              42
                                     臺灣師範大學數位媒體中心視訊處理研究室
Typeface (2)




the letter B represented with an 8x8 bilevel
bitmap pattern and with an outline shape
defined with straight line and curve
segments
                    Video Processing Lab       43
                       臺灣師範大學數位媒體中心視訊處理研究室
Homework (1)
• Select 6 points and try to draw primitive
  constant
  – (a) GL_POLYGON (b) GL_TRIANGLES (c)
    GL_TRIANGLE_STRIP (d)
    GL_TRIANGLE_FAN
• Select 8 points and try to draw primitive
  constant
  – (a) GL_QUADS (b) GL_QUAD_STRIP
• Draw
                    50              100
                         100

                     200

                           Video Processing Lab   44
                               臺灣師範大學數位媒體中心視訊處理研究室
Homework (2)
• Draw switch
  – (1) parabolic
    • x = y2
      (-10≦y ≦10)
  – (2) 2D curve path
    • 2D : Set (x0, y0) & step (relate to θ),
      m:integer
       – r=sin (mθ)
         r=A+Bcos(mθ)
         r=e-mθ
         r=mθ



                           Video Processing Lab   45
                              臺灣師範大學數位媒體中心視訊處理研究室
Reference
• http://www.icg.tu-
  graz.ac.at/courses/bacgvis/slides
• South China Morning Post, 13 Sep.,
  2005
• Computer Graphics with OpenGL 3/e,
  Hearn Baker, Third edition, ISBN:
  0131202383


                   Video Processing Lab   46
                      臺灣師範大學數位媒體中心視訊處理研究室

More Related Content

PDF
CG OpenGL 3D viewing-course 7
PDF
CG OpenGL vectors geometric & transformations-course 5
PDF
Estimating Human Pose from Occluded Images (ACCV 2009)
PDF
A Physical Approach to Moving Cast Shadow Detection (ICASSP 2009)
PDF
SSII2021 [OS3-01] 設備や環境の高品質計測点群取得と自動モデル化技術
PDF
PDF
Canny Edge Detection Algorithm on FPGA
PPTX
Sobel Edge Detection Using FPGA
CG OpenGL 3D viewing-course 7
CG OpenGL vectors geometric & transformations-course 5
Estimating Human Pose from Occluded Images (ACCV 2009)
A Physical Approach to Moving Cast Shadow Detection (ICASSP 2009)
SSII2021 [OS3-01] 設備や環境の高品質計測点群取得と自動モデル化技術
Canny Edge Detection Algorithm on FPGA
Sobel Edge Detection Using FPGA

What's hot (18)

PPTX
M Gumbel - SCABIO: a framework for bioinformatics algorithms in Scala
PPT
CS 354 Acceleration Structures
PDF
C O N T R O L S Y S T E M S J N T U M O D E L P A P E R{Www
PPT
Nanotechnology
PDF
Image Splicing Detection involving Moment-based Feature Extraction and Classi...
PDF
Scaled Eigen Appearance and Likelihood Prunning for Large Scale Video Duplica...
PDF
My MS defense
PDF
Fcv bio cv_weiss
PDF
Detection Tracking and Recognition of Human Poses for a Real Time Spatial Game
PDF
Past year iit entrance mathematics problems
PPT
Java cơ bản java co ban
PDF
Image Processing, 2012
PDF
Passive network-redesign-ntua
PPTX
No Slide Title
PDF
Random Valued Impulse Noise Removal in Colour Images using Adaptive Threshold...
PDF
Structural Dynamics Toolbox and OpenFEM, a technical overview
PDF
Model Slicing
M Gumbel - SCABIO: a framework for bioinformatics algorithms in Scala
CS 354 Acceleration Structures
C O N T R O L S Y S T E M S J N T U M O D E L P A P E R{Www
Nanotechnology
Image Splicing Detection involving Moment-based Feature Extraction and Classi...
Scaled Eigen Appearance and Likelihood Prunning for Large Scale Video Duplica...
My MS defense
Fcv bio cv_weiss
Detection Tracking and Recognition of Human Poses for a Real Time Spatial Game
Past year iit entrance mathematics problems
Java cơ bản java co ban
Image Processing, 2012
Passive network-redesign-ntua
No Slide Title
Random Valued Impulse Noise Removal in Colour Images using Adaptive Threshold...
Structural Dynamics Toolbox and OpenFEM, a technical overview
Model Slicing
Ad

Similar to CG OpenGL line & area-course 3 (20)

PDF
CG OpenGL polar curves & input display color-course 4
PDF
CG OpenGL 3D object representations-course 8
PDF
CG OpneGL 2D viewing & simple animation-course 6
PDF
Bouguet's MatLab Camera Calibration Toolbox
PDF
PDF
2007 表面瑕疵檢測技術之發展
PDF
動画像理解のための深層学習アプローチ Deep learning approaches to video understanding
PPT
Mmclass5
PDF
The not so short
 
PDF
Managing Uncertainties in Hardware-Software Codesign Projects
PPT
Digital Image Processing UNIT-2.ppt
PDF
TUKE MediaEval 2012: Spoken Web Search using DTW and Unsupervised SVM
PDF
“Understanding DNN-Based Object Detectors,” a Presentation from Au-Zone Techn...
PDF
CG simple openGL point & line-course 2
PPTX
Kccsi 2012 a real-time robust object tracking-v2
PPTX
ANISH_and_DR.DANIEL_augmented_reality_presentation
ODP
image compression ppt
PPT
Java3 d 1
PPTX
Condition Monitoring Of Unsteadily Operating Equipment
PPTX
3.point operation and histogram based image enhancement
CG OpenGL polar curves & input display color-course 4
CG OpenGL 3D object representations-course 8
CG OpneGL 2D viewing & simple animation-course 6
Bouguet's MatLab Camera Calibration Toolbox
2007 表面瑕疵檢測技術之發展
動画像理解のための深層学習アプローチ Deep learning approaches to video understanding
Mmclass5
The not so short
 
Managing Uncertainties in Hardware-Software Codesign Projects
Digital Image Processing UNIT-2.ppt
TUKE MediaEval 2012: Spoken Web Search using DTW and Unsupervised SVM
“Understanding DNN-Based Object Detectors,” a Presentation from Au-Zone Techn...
CG simple openGL point & line-course 2
Kccsi 2012 a real-time robust object tracking-v2
ANISH_and_DR.DANIEL_augmented_reality_presentation
image compression ppt
Java3 d 1
Condition Monitoring Of Unsteadily Operating Equipment
3.point operation and histogram based image enhancement
Ad

More from fungfung Chen (20)

PDF
Tech biz patent
PDF
Smart TV content converged service & social media
PDF
Tips for fulfilling patent application
PDF
Defending your Rights
PDF
Polishing search skills
PDF
Inquiry Based Approach - Patent Search
PDF
Overseas protection & patent search
PDF
Patentability classification search
PDF
Novelty to Nonobviousness
PDF
Patentability requirement on novelty
PDF
2012 Smart TV - Evolution & Approaches
PDF
Patentability Requirements
PDF
Working model to patentability
PDF
Evaluate your invention
PDF
how to invention & practice it
PDF
Digital converge - DTV service design
PDF
Hybrid digital broadcasting methods
PDF
Summary the challenges of Social TV
PDF
CG OpenGL Shadows + Light + Texture -course 10
PDF
CG OpenGL surface detection+illumination+rendering models-course 9
Tech biz patent
Smart TV content converged service & social media
Tips for fulfilling patent application
Defending your Rights
Polishing search skills
Inquiry Based Approach - Patent Search
Overseas protection & patent search
Patentability classification search
Novelty to Nonobviousness
Patentability requirement on novelty
2012 Smart TV - Evolution & Approaches
Patentability Requirements
Working model to patentability
Evaluate your invention
how to invention & practice it
Digital converge - DTV service design
Hybrid digital broadcasting methods
Summary the challenges of Social TV
CG OpenGL Shadows + Light + Texture -course 10
CG OpenGL surface detection+illumination+rendering models-course 9

Recently uploaded (20)

PPTX
2. Competency Based Interviewing - September'16.pptx
PPTX
Introduction to Building Information Modeling
PPTX
22CDH01-V3-UNIT-I INTRODUCITON TO EXTENDED REALITY
PPTX
Causes of Flooding by Slidesgo sdnl;asnjdl;asj.pptx
PPTX
22CDO02-IMGD-UNIT-I-MOBILE GAME DESIGN PROCESS
PDF
ART & DESIGN HISTORY OF VEDIC CIVILISATION.pdf
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PDF
Introduction-to-World-Schools-format-guide.pdf
PDF
2025_AIFG_Akane_Kikuchi_Empathy_Design.PDF
PDF
321 LIBRARY DESIGN.pdf43354445t6556t5656
PDF
Architecture Design Portfolio- VICTOR OKUTU
PPTX
CLASSIFICATION OF YARN- process, explanation
PPTX
a group casestudy on architectural aesthetic and beauty
PDF
The Basics of Presentation Design eBook by VerdanaBold
PDF
Urban Design Final Project-Context
PPTX
Evolution_of_Computing_Presentation (1).pptx
PDF
Pongal 2026 Sponsorship Presentation - Bhopal Tamil Sangam
PPTX
Entrepreneur intro, origin, process, method
PDF
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
2. Competency Based Interviewing - September'16.pptx
Introduction to Building Information Modeling
22CDH01-V3-UNIT-I INTRODUCITON TO EXTENDED REALITY
Causes of Flooding by Slidesgo sdnl;asnjdl;asj.pptx
22CDO02-IMGD-UNIT-I-MOBILE GAME DESIGN PROCESS
ART & DESIGN HISTORY OF VEDIC CIVILISATION.pdf
DOC-20250430-WA0014._20250714_235747_0000.pptx
Introduction-to-World-Schools-format-guide.pdf
2025_AIFG_Akane_Kikuchi_Empathy_Design.PDF
321 LIBRARY DESIGN.pdf43354445t6556t5656
Architecture Design Portfolio- VICTOR OKUTU
CLASSIFICATION OF YARN- process, explanation
a group casestudy on architectural aesthetic and beauty
The Basics of Presentation Design eBook by VerdanaBold
Urban Design Final Project-Context
Evolution_of_Computing_Presentation (1).pptx
Pongal 2026 Sponsorship Presentation - Bhopal Tamil Sangam
Entrepreneur intro, origin, process, method
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
pump pump is a mechanism that is used to transfer a liquid from one place to ...

CG OpenGL line & area-course 3

  • 1. Line & Area Chen Jing-Fung (2006/10/24) Assistant Research Fellow, Digital Media Center, National Taiwan Normal University Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal University
  • 2. Coordinate representations Viewing & Projection Coordinates 1 1 Modeling 1 Video Monitor (local or master) Coordinates Plotter World Normalized (Cartesian) Coordinates Coordinates Other Output Device Coordinates Video Processing Lab 2 臺灣師範大學數位媒體中心視訊處理研究室
  • 3. Reshape function Video Processing Lab 3 臺灣師範大學數位媒體中心視訊處理研究室
  • 4. Monitor monitor Video Processing Lab 4 http://groups.csail.mit.edu/graphics/classes/6.837/F04/calendar.html 臺灣師範大學數位媒體中心視訊處理研究室
  • 5. 2D graph • Plot figure in 2D coordinate – X-coordinate indicated horizontal – Y-coordinate indicated vertical – Z-coordinate indicated depth simple nonsimple Video Processing Lab 5 臺灣師範大學數位媒體中心視訊處理研究室
  • 6. Coordinate Reference • A set of coordinate extents y – Bounding box (3D), bounding rectangle (2D) 5 – Max & Min (x, y, z), (x, y) 4 • Screen coordinates 3 2 – Scan line number: y 1 – Column number: x 0 x 01 2345 • A low-level procedure of the pixel position – setPixel(x, y); • Retrieve the current frame-buffer setting for a pixel location – getPixel(x, y, color); Combine RGB bit codes Video Processing Lab 6 臺灣師範大學數位媒體中心視訊處理研究室
  • 7. Coordinate specifications • Absolute coordinate & Relative coordinate – Last position (current position): (3, 8) – => Some graph packages is used relative coordinate: (2, -1) -> Absolute position: (5, 7) Video Processing Lab 7 臺灣師範大學數位媒體中心視訊處理研究室
  • 8. 2D world-coordinate in OpenGL • An orthogonal projection function – gluOrtho2D glMatrixMode (GL_PROJECTION); glLoadIdentity (); Assign the identity matrix gluOrtho2D (xmin, xmax, ymin, ymax); World coordinate range ymax Display window ymin xmin xmax Video Processing Lab 8 臺灣師範大學數位媒體中心視訊處理研究室
  • 9. How to a parameter drawing line? Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal University
  • 10. Bresenham’s line algorithm • Bresenham’s line is an accurate and efficient raster line-generating algorithm • Use only incremental integer calculations. • Determine at next sample point whether to plot. – The positive-slope line: if start point (50, 50), next point? • (51, 50) or (51, 51) Video Processing Lab 10 臺灣師範大學數位媒體中心視訊處理研究室
  • 11. Parallel Bresenham line algorithm • Drawing parallel processing – Two different line on the same plane and along a line path simultaneously. yk+1 yk xk+1 11 P. 99-101 Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室
  • 12. How to buffer value by the structure? Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal University
  • 13. Setting frame-buffer values • Since scan-conversion algorithms generate pixel positions which are labeled from (0, 0) to (xmax, ymax), the frame-buffer bit address is calculated as – (x, y) Screen • addr(x, y) = addr(0, 0) + y(xmax + 1)+x yend – (x+1, y) • addr(x+1, y) = addr(x, y) + 1 (x, y) – (x+1, y+1) y0 • addr(x+1, y+1) = addr(x, y) + xmax + 2 x0 xend Frame buffer: (0, 0) (1, 0) (2, 0) (0, 1) (x, y) (xmax, 0) (xmax, ymax) addr(0, 0) addr(x, y) Video Processing Lab 13 臺灣師範大學數位媒體中心視訊處理研究室
  • 14. Another drawing line method Use Midpoint Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal University
  • 15. Circle-generating algorithms • A circle is defined as the set of points – Radius = r, center position (xc, yc) (x-xc)2+(y-yc)2=r2 – X axis in unit steps from xc- r to xc+ r and calculating the corresponding y values at each position as y  y c  r 2  ( xc  x )2 – using polar coordinates r and θ Video Processing Lab 15 p.103-104 臺灣師範大學數位媒體中心視訊處理研究室
  • 16. Symmetry of a circle • Eight octants – Calculation if a circle point (x, y) in one octant yields the circle points shown for the other seven octants • More efficient circle algorithm are based on incremental calculation of decision parameters, which involves only simple integer operations. (as in the Bresenham line algorithm) Video Processing Lab 16 臺灣師範大學數位媒體中心視訊處理研究室
  • 17. Midpoint circle algorithm (1) • The basic idea is to test the halfway position between two pixels – Determine inside or outside the circle boundary. • Midpoint method = Bresenham line algorithm – Integer circle radius – A straight-line segment Video Processing Lab 17 臺灣師範大學數位媒體中心視訊處理研究室
  • 18. Midpoint circle algorithm (2) • To apply the midpoint method, we define a circle function as: – fcirc(x, y) = x2+y2-r2 x 2 + y2 - r 2 = 0 yk <0, if (x,y) is inside the circle boundary yk-1 Midpoint fcirc(x,y) =0, if (x,y) is on the circle boundary yk-2 >0, if (x,y) is outside the circle boundary xk xk+1 xk+2 – Decision parameter (each xk, k=0 & pk<0) • pk= fcirc(xk+1, yk-1/2) • pk+1=pk+2(xk+1) + (yk+12-yk2) - (yk+1-yk)+1 – Increment? What is different between midpoint and line- based? Video Processing Lab 18 p.105-109 臺灣師範大學數位媒體中心視訊處理研究室
  • 19. Other curves • Various curve functions are useful in object modeling, animation path specification and other graphics applications. • Commonly encountered curves include conics, general polynomials and spline functions. – Conic sections: Ax2+ By2+Cxy+Dx+Ey+F=0 v0 g – Parabolic y0 • trajectory: y=y0+a(x-x0)2+b(x-x0) • Projection point: x=x0+vx0t; y=y0+vy0t-1/2gt2 – Hyperbola: (x/rx)2-(y/ry)2=1 x0 Spline curve formed with individual ry cubic polynomial sections between specified coordinate positions rx Video Processing Lab 19 臺灣師範大學數位媒體中心視訊處理研究室
  • 20. Fill-Area Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal University
  • 21. Fill-Area Primitives • Polygon area (solid-color, patterned) – scan-line to fill polygon • Intersection points located and sorted • Consecutive pairs define interior span • Attention with vertex intersections • Exploit coherence (incremental calculations) – flood fill algorithm Video Processing Lab 21 臺灣師範大學數位媒體中心視訊處理研究室
  • 22. Fill-area primitives • Describing components of a picture is an area that is filled with some solid color – Polygon is a plane figure specified by • Vertices: three or more coordinate positions • Edges or sides: straight-line segments concave convey <1800 >1800 • Area…. Video Processing Lab 22 臺灣師範大學數位媒體中心視訊處理研究室
  • 23. Concave polygons • The direction of surface is “z’’ axle • Given two consecutive vertex (V) positions, Vk and Vk+1, we define the edge vector (E) as Ek = Vk+1 - Vk (Cross product) y V6 V5 (E1 x E2)z > 0 E4 (E2 x E3)z > 0 V4 Where is “z” (E3 x E4)z < 0 convex E3 E2 V3 V1 V2 E1 x concave Test!! Video Processing Lab 23 臺灣師範大學數位媒體中心視訊處理研究室
  • 24. Splitting concave polygons • Vector method – All vector cross products have the same sign => convex • Rotational method – rotate polygon-edges onto x-axis, always same direction => convex – Each vertex vk Area 1 V1 • Origin: translate Vk V3 V2 • Rotate clockwise Vk+1 on x-axis • If vertex below x-axis => split Area 2 V4 Video Processing Lab 24 臺灣師範大學數位媒體中心視訊處理研究室
  • 25. Inside-Outside Tests • Testing interior vs. exterior object boundaries – Odd-even (parity) rule or nonzero winding parity rule • Odd-even rule – number of segments crossed by the line drawn from P to distant point outside the coordinate extents • bounding rectangle or box is odd it is interior point • else it is exterior point – use the rule for color filling of rings, 2 concentric polygons Video Processing Lab 25 臺灣師範大學數位媒體中心視訊處理研究室
  • 26. Nonzero winding parity rule • Nonzero winding parity rule may yield different interior and exterior regions – Setup vectors along object edges and the reference line. – Compute cross product of vector u along the line from P to a distant point, with object vector E for each edge that crosses the line. – With 2 D object in XY plane direction of cross product will be + z direction or –z direction. • if z component for a crossing is +ve that segment crosses from left to right, add 1 to winding number • else if it is left to right subtract 1 from winding number simpler Video Processing Lab 26 臺灣師範大學數位媒體中心視訊處理研究室
  • 27. 3D inside-outside • Consider a sphere, x2 + y2 + z2 = 1. – Interior: the set of all points that satisfy x2 + y2 + z2 < 1 – The solid's surface: x2 + y2 + z2 <= 1. – Exterior: x2 + y2 + z2 > 1. Interior point A boundary Boundary point C Exterior point B Video Processing Lab 27 http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/model/closure.html 臺灣師範大學數位媒體中心視訊處理研究室
  • 28. Polygon Surfaces (1) • Set of surface polygons enclose object interior = Boundary Representation (“B-rep”) wireframe representation of a cylinder with back (hidden) lines removed Video Processing Lab 28 臺灣師範大學數位媒體中心視訊處理研究室
  • 29. Polygon Surfaces (2) • Polygon tables (B-rep lists) – Geometric and attribute tables – Vertex, edge, polygon tables – Consistency, completeness checks Video Processing Lab 29 臺灣師範大學數位媒體中心視訊處理研究室
  • 30. Two polygon surfaces • Geometric data-table representation for two adjacent polygon surface facets, formed with six edges and five vertices VERTEX TABLE EDGE TABLE V1 E1: V1, V2 V1: x1, y1, z1 E2: V2, V3 V2: x2, y2, z2 E1 E3 E6 E3 V3 S1 E4 V4 S2 V5 E5 V5 E2 V E6 3 E 4 E5 SURFACE-FACET TABLE V2 S1: E1, E2,E3 V4 S2: E3, E4, E5, E6 Video Processing Lab 30 臺灣師範大學數位媒體中心視訊處理研究室
  • 31. Video Processing Lab 31 http://www.icg.tu-graz.ac.at/courses/bacgvis/slides 臺灣師範大學數位媒體中心視訊處理研究室
  • 32. Plane equations • Ax+By+Cz+D=0 – Plane parameter: A, B, C and D • Normal vector (N) the plane equation: x − 1 = 0. The normal vector: N=( A, B, C ) Plane equation Ax + By + Cz + D = 0 Video Processing Lab 32 臺灣師範大學數位媒體中心視訊處理研究室
  • 33. 3D cartesian coordinate y axis y axis z axis x axis x axis z axis Left-handed cartesian Right-handed cartesian Video Processing Lab 33 臺灣師範大學數位媒體中心視訊處理研究室
  • 34. Front and Back Polygon Faces (1) • Back face = polygon side that faces into the object interior • Front face = polygon side that faces outward • Behind a polygon plane = visible to the polygon back face • In front of a polygon plane = visible to the polygon front face Video Processing Lab 34 臺灣師範大學數位媒體中心視訊處理研究室
  • 35. Front and Back Polygon Faces (2) • Ax + By + Cz + D = 0 for points on the surface < 0 for points behind > 0 for points in front – right-handed coordinate system – polygon points in counterclockwise order • V1, V2, V3 counterclockwise => normal vector N = (V2 - V1) x (V3 - V1) Video Processing Lab 35 臺灣師範大學數位媒體中心視訊處理研究室
  • 36. What is Cross product (x) ? • A mathematical joke asks, – "What do you get when you cross a mountain-climber with a mosquito? " • On the television sitcom, Head of the Class asks, – "What do you get when you cross an elephant and a grape?" Video Processing Lab 36 http://mathworld.wolfram.com/CrossProduct.html 臺灣師範大學數位媒體中心視訊處理研究室
  • 37. Cross product (x) • The orientation determined by the right-hand rule Video Processing Lab 37 http://mathworld.wolfram.com/CrossProduct.html 臺灣師範大學數位媒體中心視訊處理研究室
  • 38. OpenGL polygon fill-area functions • OpenGL provides a special rectangle function – glRect*(x1, y1, x2, y2); • *: i (integer), s (short), f (float), d (double) and v (vector) • plRectiv(vertex1, vertex2); • Fill rectangle use “glVertex” • glBegin (GL_POLYGON); – glVertex2iv (p1); – glVertex2iv (p2); p6 p5 – glVertex2iv (p3); – glVertex2iv (p4); – glVertex2iv (p5); p1 p4 – glVertex2iv (p6); • glEnd (); p2 p3 Video Processing Lab 38 臺灣師範大學數位媒體中心視訊處理研究室
  • 39. How to design “font”? A complete set of type of one size and face. Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal University
  • 40. South China Morning Post, 13 Sep., 2005 Video Processing Lab 40 臺灣師範大學數位媒體中心視訊處理研究室
  • 41. Texture • Graphics displays often include textural information : – labels on graphs and charts – signs on buildings or vehicles – General identifying information for simulation and visualization applications. Video Processing Lab 41 臺灣師範大學數位媒體中心視訊處理研究室
  • 42. Typeface (1) • Letters, numbers and other characters can be displayed in a variety of sizes and styles. – The overall design style for a set of characters – Routines for generating character primitives • 20-point Courier Italic or 28-point Palatino Bold • font : – 14 points, a total character height is about 0.5 cm. A – 72 points is about 2.54 cm (1 inch) B Video Processing Lab 42 臺灣師範大學數位媒體中心視訊處理研究室
  • 43. Typeface (2) the letter B represented with an 8x8 bilevel bitmap pattern and with an outline shape defined with straight line and curve segments Video Processing Lab 43 臺灣師範大學數位媒體中心視訊處理研究室
  • 44. Homework (1) • Select 6 points and try to draw primitive constant – (a) GL_POLYGON (b) GL_TRIANGLES (c) GL_TRIANGLE_STRIP (d) GL_TRIANGLE_FAN • Select 8 points and try to draw primitive constant – (a) GL_QUADS (b) GL_QUAD_STRIP • Draw 50 100 100 200 Video Processing Lab 44 臺灣師範大學數位媒體中心視訊處理研究室
  • 45. Homework (2) • Draw switch – (1) parabolic • x = y2 (-10≦y ≦10) – (2) 2D curve path • 2D : Set (x0, y0) & step (relate to θ), m:integer – r=sin (mθ) r=A+Bcos(mθ) r=e-mθ r=mθ Video Processing Lab 45 臺灣師範大學數位媒體中心視訊處理研究室
  • 46. Reference • http://www.icg.tu- graz.ac.at/courses/bacgvis/slides • South China Morning Post, 13 Sep., 2005 • Computer Graphics with OpenGL 3/e, Hearn Baker, Third edition, ISBN: 0131202383 Video Processing Lab 46 臺灣師範大學數位媒體中心視訊處理研究室