1. Multimedia Programming (OpenGL 실습 ) Fall 2007 Hyunki Hong Dept. of Image Eng., GSAIM Chung-Ang Univ.

2. Ch.3 More Drawing Tools 3.1 Introduction · the basic coordinate system of the screen window - coordinates that are essentially in pixels, - extending from zero to screenWidth-1 in x - from zero to some value screenHeight-1 in y. - use only positive values of x & y · world coordinate - the space in which objects are described - the usual Cartesian xy-coordinates used in mathematics · “looking through a window” at the objects being drawn and placing a “snapshot” of whatever is seen in that window into the viewport on the display

3. · A mapping (consisting of scalings & shiftings) between the world window & the viewport is established. → When all the objects in the world are drawn, the parts that lie inside the world window are automatically mapped to the the inside of the viewport. → looking through a window at the objects being drawn : mapping + clipping 3.2 World Windows & Viewports · A plot of the “sinc” function : how the various (x, y) values become scaled & shifted so that the picture appears properly in the screen window. 3/28

4. · an example of a world window & a viewport - 3D "worlds" viewed with a "camera" 3.2.1 The mapping from the window to the viewport · Specifying the window & viewport

5. · A picture mapped from a window to a viewport. → distortion occurs because the figure in the window must be stretched to fit into the viewport. · window-to-viewport mapping - based on a formula that produces a point (sx, sy) in the screen window coordinates for any given point (x, y) in the world - proportionality forces the mappings to have the linear form for some constants. : Eq. 3.2 & 3 (scale & shift constants)

6. - in OpenGL a. gluOrtho2D( ): set the world window to the rectangle with A, B void gluOrtho2D(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top); b. glViewport( ): setting the viewport void glViewport(GLint x, GLint y, GLint width, GLint height); · Plotting the sinc function · Tiling & motif - tiling the window : laying lots of copies of the same thing side by side to cover the entire screen window - motif : the picture that is copied at different positions 6/28

7. · Clipping parts of a figure - Zooming in & out: making the window smaller & larger - Roaming (panning): shifting the window to a new position · Zooming in on a figure in an animation cf. frames: a series of pictures - Achieving a smooth animation a. A steady display of the current figure b. Instantaneous replacement of the current figure by the finished new figure. 1) glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB) 2) double buffering : glutSwapBuffers() image in buffer → screen window · A tiling formed using many viewports 7/28

8. 3.2.2 Setting the window & viewport automatically · Setting of the window - find a window that includes the entire object - The extent (or bounding box) of an object is the aligned rectangular that just covers the object. - How can be the extent be computed for a given object? 1. If all the endpoints of the object's lines are stored in an array : find the extreme values of the x- & y-coordinates in this array

9. 2. If an object is procedurally defined, a. Execute the drawing routine, but do no actual drawing ; just compute the extent. Then set the window. b. Execute the drawing routine again. Do the actual drawing. · Automatic setting of the viewport to preserve the aspect ratio · Possible aspect ratios for the world and screen windows setViewport(0, W, 0, W/R) setViewport(0, H*R, 0, H) width height

10. - Resizing the screen window; the resize event a. In a window-based system the user can resize the screen window at run time, typically by dragging one of its corners with the mouse. → a resize event glutReshapeFunc(myReshape); //specifies the function called on a resize event void myReshape(GLsizei W, GLsizei H); // the system automatically passes the new width & height of the screen window 3.3 Clipping Lines - keep those parts of an object that lie outside a given region from being drawn.

11. 3.3.1 Clipping a line - the Cohen-Sutherland clipper a. compute which part (if any) of a line segment with endpoints lies inside the world window, b. and then reports back the endpoints of that point. c. clipSegment(p1, p2, window) d. Clipping lines at window boundaries. 1) If the entire line lies within the window (ex. CD) → 1 2) If the entire line lies outside the window (ex. AB) → 0 3) ED & AE → 1

12. 3.3.2 The Cohen-Sutherland clipping algorithm : quickly detects and dispenses with two common cases, "trivial accept" & "trivial reject" - Figure a. segment AB lie within window W → trivially accepted: no clipping b. segment CD must lie entirely W → trivially rejected

13. - Testing for a Trivial Accept or Trivial Reject a. an "inside-outside code word" is computed for each endpoint of the segment. b. form a code word for each of the endpoints of the line segment being tested · trivial accept: Both code words are FFFF. · trivial reject: The code words have a T in the same position. - Clipping when there is neither trivial accept nor trivial reject a. If the segment can be neither trivially accepted nor rejected, it is broken into two parts at one of the window boundaries.

14. b. Clipping a segment against an edge c. A segment that requires four clips

15. 3.4 Developing the Canvas Class - canvas: a class provides a handy drawing canvas on which to draw the lines, polygons, etc. of interest. 3.4.1 Some useful supporting classes - class Points: A point having real coordinates → a single point expressed with floating-point coordinates - class IntRect: An aligned rectangle with integer coordinates → to describe a viewpoint, we need an aligned rectangle having integer coordinates. - class RealRect: An aligned rectangle with real coordinates → A world window requires the use of an aligned rectangle having real values for its boundary position. 3.4.2 Declaration of class canvas - Fig. 3.25 : The header file Canvas.h → include the current position, a window, a viewport, and the window-to-viewport mapping - Fig. 3.26 : typical usage of the Canvas class

16. 3.5 Relative Drawing - to have drawing take place at the current position (CP) and describe positions relative to the CP → changes in position 3.5.1 Developing moveRel( ) & lineRel( ) 3.5.2 Turtle graphics - It keeps track not only of "where we are" with the CP, but also "the direction in which we are headed (the current direction)." cf. the pen in a pen plotter, migrates over the page, leaving a trail behind itself that appears as a line segment.

17. - The turtle is positioned at the CP, headed in a certain direction called the current direction, CD, the number of degrees measured counterclockwise (CCW) from the positive x-axis. - add functionality to the Canvas class a. turnTo (float angle) // CD=angle; b. turn (float angle) // CD+=angle; c. forward (float dist, int isVisible) void Canvas:: forward(float dist, int isVisible) { const float RadPerDeg = 0.017453393; //radians per degree float x = CP.x + dist * cos(RadPerDeg * CD); float y = CP.y + dist * sin(RadPseDeg * CD); if(isVisible) lineTo(x, y); else moveTo(x, y); }

18. 3.6 Figures based in Regular Polygons 3.6.1 The regular polygons - A polygon is regular if it is simple, if all its sides have equal lengths, and if adjacent sides meet at equal interior angles. - n-geon : a regular polygon having n sides - the vertices of an n-gon lie on a circle : the parent circle of the n-gon - Finding the vertices of a 6-gon. 18/28

19. 3.6.2 Variations on n-Gons - A 7-gon and its offspring (stellation, rosette) -The rosette and the golden 5-rosette 3.7 Drawing Circles & Arcs - Drawing a circle is equivalent to drawing an n-gon that has a large number of vertices. 3.7.1 Drawing arcs - Defining an arc. a. described by the position of the center c & radius R of its "parent" circle, along with its beginning angle a & the angle b through which it sweeps in a CCW direction from a 19/28

20. b. a circle: an arc with a sweep of 360 degree. - how to build a circle: a center & radius 3.8 Using the Parametric from a Curve - two ways to describe the shape of a curved line : implicitly & parametrically - the implicit form: a curve described by a function F(x, y) that provides a relationship between the x & y coordinates. a. The point (x, y) lies on the curve if and only if it satisfies the equation: F(x, y) = 0. ex. x 2 + y 2 = r 2 b. a benefit: easily to test whether a given point lies on the line or curve c. the inside-outside function 3.8.1 Parametric forms for curves → a wide variety of curves - the movement of a point through time → the motion of a pen as it sweeps out the curve

21. - the path of a particule traveling along the curve is fixed by two functions x() & y() (x(t), y(t)) : the position of the particle at time t - Examples : the line & the ellipse - An ellipse described parametrically - Finding an implicit form from a parametric form : to combine the two equation for x(t) and y(t) to somehow eliminate the variable t. ex. Ellipse :

22. - conic section a. ellipse : The plane cuts one nappe of the cone. b. parabola : The plane is parallel to the side of the cone. → Implicit form : c. hyperbola : The plane cuts both nappes of the cone. → Implicit form : - The classical conic sections.

23. - the general second-degree equation: - standard equation of an ellipse:

24. · 직선 vs. 곡선 → 직선과 곡선의 수학적 정의, 모델에 사용될 때의 행동 방식, 그들에 의한 3D 구조의 유형, 시각적 외관에서 각각 차이 존재. · 직선 - 두 점 사이의 최단 거리, - 폴리곤 / 폴리곤 메쉬를 만드는 데 사용되므로 poligonal line 라고도 함. · 곡선 - 변화의 세밀한 구별이나 디자인의 우아함에 관계함. - 일반적으로 몇 개의 점에 의해 정의, 선분 (curve segment) 라고도 함. - 곡면을 정의하거나 곡면의 메쉬 생성이 가능 - spline ( 그림 3.1 : spline 수정을 위한 대표적인 조절 방식 )

25. · Bézier curve( 르노 자동차, 1971) The Bézier curve based on four points.

26. cf. Bezier curves don’t offer enough local control over the shape of the curve. → The set of blending functions give some local control to the control points. Example of a spline function : g(t) consists of three polynomial segments, defined as a(t) = ½t 2 b(t) = ¾ - ( t – 3/2) 2 c(t) = ½ (3 – t) 2 The support of g(t) is [0, 3]; a(1) = b(1) = ½ and b(2) = c(2) = ½ a´(1) = b´(1) = 1 and b´(2) = c´(2) = -1 Span : [0, 1], joint (t = 1, 2), Knots : the value of t piecewise polynomials

27. 3.8.2 Drawing curves represented parametrically - It's straightforward to draw a curve when its parametric representation is available. - a curve C has the parametric representation P(t) = (x(t), y(t)) form as t varies from 0 to T. a. Approximating curve by a polyline. → samples of P(t) at closely spaced instants b. Drawing an ellipse using points equispaced in t.

28. 3.8.4 Polar coordinate shapes - Each point on the curve is represented by an angle θ and a radial distance r. - Polar coordinates - the logarithmic spiral: the only spiral that has the same shape for any change of scale 3.8.5 3D curves - the curve is at P(t) = (x(t), y(t), z(t)) at time t. - the helix