Coordinate Systems PDF

coordinate systems a framework used to uniquely identify & describe the position of points or other geometric elements in a given space provide a standardised method for defining & referencing locations in 1, 2, 3 or higher dimensi...

coordinate systems a framework used to uniquely identify & describe the position of points or other geometric elements in a given space provide a standardised method for defining & referencing locations in 1, 2, 3 or higher dimensions key aspects reference origin fixed point in coord system from which all measurements are made often denoted as the origin (e.g. (0,0) in 2D or (0,0,0) in 3D) axes lines that intersect at the origin & extend in various directions used to reference lines to measure distances & angles typically the x-axis, y-axis + z-axis in a Cartesian coord system coordinates ordered set of numbers that define the position of a point relative to the axes & origin e.g. in 2D Cartesian coords, a point is represented as (x, y) dimensions number of independent directions in which movement is possible within the space commonly 1D (line), 2D (plane) & 3D (space) coord systems are used coordinate systems 1  pixel coordinates pixel specified by saying which column & row contains it identified by a pair of integers giving the column number + row number most graphic systems number rows from top to bottom, starting from zero some, incl. OpenGL, number from bottom to top instead drawing lines problem with drawing lines: unless line is horizontal or vertical, we can’t actually draw the line by colouring pixels diagonal geometric lines cover some pixels partially drawing line creates jagged staircase effect (aliasing) antialiasing techniques that are designed to mitigate the effects of aliasing coordinate systems 2  when a pixel is partially covered by a shape, the colour of the pixel should be a mixture of the colour of the shape & the colour of the background real value coordinates a point will have a pair of coordinates given by real numbers coordinates for a pixel will, in general, be real numbers rather than integers in order to move from one coord space to another we apply a transform on the original space x-coord transform: y-coord transform: coordinate systems 3  these formulas interpolate the coords of the point, preserving the relative position of the point within the rectangle using formulas, you can transform any point from one rectangle to another aspect ratio ratio of width to height defines the shape of the image crucial in maintaining the visual proportions of graphics across different devices + screens coordinate systems 4 coordinate systems 5 coordinate systems 6  colours light made up of waves with variety of wavelengths pure colour means that all the light has the same wavelength colour can contain many wavelengths eyes contain cone cells (colour sensors) that approximately detect red, green + blue light computer screen colours produced as combos of red, green + blue light varying intensity of each type of light produces different colours alpha 4th component added to colour models RGBA & HSLA = colour models that use alpha represents transparency max alpha value = fully opaque (not transparent) zero alpha value = translucent / partly translucent colours colour you get computing alpha component: new_color = (alpha)*(foreground_color) + (1 - alpha)*(ba ckground_color) separate computation red, green & blue colour components alpha blending: effect is like viewing the background through coloured glass; colour of glass adds tint to background colour colours 1 colours 2  shapes create & define visual content basic shapes, made up of connecting line segments, incl. circles squares triangles more complex polygons if ovals are not available as basic shapes, approximate by drawing a large number of line segments no. of lines needed for good approximation depends on the size of the oval drawing a circle in code: Draw Oval with center (x,y), horizontal radius r1, and vertica for i = 0 to numberOfLines: shapes 1  angle1 = i * (2*pi/numberOfLines) angle2 = (i+1) * (2*pi/numberOfLines) a1 = x + r1*cos(angle1) b1 = y + r2*sin(angle1) a2 = x + r1*cos(angle2) b2 = y + r2*sin(angle2) Draw Line from (a1,b1) to (a2,b2) shapes 2  line properties can have other attributes or properties that affect their appearance many graphics systems support lines that are patterns of dashes & dots 'miter' join 'round' join 'bevel' join line properties 1  stroke vs. fill stroke outline of a shape properties: colour width style (solid, dashed) fill colouring all points contained inside the shape (interior) properties colour gradient pattern 2 rules for filling shapes that intersect itself (based on winding number) winding number: roughly, how many times the shape winds around the point in the positive direction can be negative when winding in opposite direction stroke vs. fill 1  2 fill rules shown above shapes in centre: colour any region that has a non-zero winding number shapes on right: colour any region whose winding number is odd regions with even winding number are not filled shapes can be filled with colour, gradients or textures to add depth & interest to graphics stroke vs. fill 2  polygons, curves & paths polygons: multi-sided shapes with straight edges curves: smooth, flowing lines that can be defined by mathematical functions paths combinations of lines & curves that define complex shapes created by giving a series of commands that tell how a pen would be moved to draw the path a point represents pen’s current location while path is being created commands for moving pen without drawing commands for drawing various kinds of segments represents an abstract geometric object make paths visible with additional commands for stroking & filling the path above elements crucial in vector graphics - used to create scalable images that retain quality at any size Bezier curve smooth curve between two points defined by parametric polynomial equations used to create very general curved shapes fairly intuitive often used in programs that allow users to design curves interactively in order to make complex shapes as seen in scene cubic Bezier curve defined by two endpoints P1 & P2 + by two control points C1 & C2 tangent to curve at P1 = P1 → C1 tangent to curve at P2 = C2 → P2 polygons, curves & paths 1  quadratic Bezier curve defined by two endpoints & a single control point C tangent to curve at each endpoint = line between endpoint & C polygons, curves & paths 2  modelling & viewing two fundamental concepts in computer graphics each serve distinct purpose in process of rendering a 3D scene onto a 2D display modelling process of creating & defining the shapes, structures + properties of objects within a 3D space involves specifying object’s geometry using coordinates in the object coordinate system object coordinates: used to define the shape & structure of an object in its own local space e.g. cube may be defined with vertices (1,1,1) in object coordinates modelling transformation: defined object needs to be positioned, oriented & scaled appropriately within a larger scene achieve above through transformations translation rotation scaling transformations convert object coords into world coords modelling & viewing 1  purpose: accurately represent the objects in a scene with their inherent properties, independent of their position or orientation in the final scene viewing process of defining how the scene is observed, or viewed by a camera involves specifying the viewpoint, direction & perspective from which the scene is rendered viewport: rectangular area on the display device where the final rendered image is shown acts like a window through which the scene is viewed viewing transformation: transforming world coordinates into camera coords → screen coords camera transformation - positioning + orienting the camera within the world coord system projection transformation - converting the 3D coords into 2D coords, applying perspective or orthographic projection viewport transformation - mapping the 2D coords to the appropriate location on the screen or window purpose: determines how the scene is visualised incl. what portion of the scene is visible modelling & viewing 2  how it is framed how the 3D objects are projected onto a 2D plane modelling & viewing 3  transformations operations that modify the position & orientation in a coordinate space fundamental in computer graphics for object manipulation & creating animations transforms written in following form: x1 = a*x + b*y + e y1 = c*x + d*y + f which can be written as a function T: T(x,y) = ( a*x + b*y + e, c*x + d*y + f ) affine transform when applied to parallel lines, transformed lines will also be parallel following an affine transform by another results in an affine transform extend 2D coords to 3D coords by adding a 3rd component set to 1 - homogeneous coords) above allows us to represent 2D transformations, incl. translations, as matrix multiplication e.g. (x,y) → (x,y,1) in homogeneous coords transformations 1  zero or other value instead of one would prevent proper scaling & repositioning of the point after translation translation moves an object from one position to another in a straight line done by adding a translation vector to the coords of the object formula for translation: x1 = x + e y1 = y + f 2D graphics system will typically have a function such as translate( e, f ) represented by following transformation matrix: t_x = translation along the x-axis t_y = translation along the y-axis transformations 2  scale changes the size of an object uniform - same scale factor for all dimensions non-uniform - different scale factors for different dimensions scaling transform multiplies each x-coord by a given amount & y-coord by a given amount scaling formula x1 = a * x y1 = d * y transformation matrix transformations 3  s_x = scaling factor along the x-axis s_y = scaling factor along the y-axis rotation turns an object around a specified point (the rotation object) by a certain angle used to orient objects in different directions angle of rotation = angle every point is rotated through measured in degrees or radians positive angle rotates objects from positive x-axis to positive y-axis counter clockwise in up-pointing y-axis clockwise in usual pixel coordinates (down-pointing y-axis) formula for rotation of r radians: x1 = cos(r) * x - sin(r) * y y1 = sin(r) * x + cos(r) * y transformation matrix: θ: rotation angle in radians transformations 4  shear distorts the shape of an object by shifting its vertices along a particular axis, effectively slanting the object horizontal shear does not move the x-axis horizontal shear formula: x1 = x + b * y y1 = y vertical shear formula x1 = x y1 = c * x + y occasionally called “skew” but skew is specified as an angle rather than as a shear factor horizontal shear transformation matrix k: shear factor along the x-axis vertical shear transformation matrix transformations 5  k: shear factor along the y-axis combining transformations combine by applying sequentially to achieve more complex effects e.g. object can be translated → rotated → scaled order matters & can produce different results worked example 1 combining translation & scaling transformation using 2d affine transformations translation scaling combining translation & scaling order is important typically scaling before translation transformations 6  result: to transform a point (x, y)you can use the following multiplication: worked example 2 combining 90-degree rotation, horizontal shear & scaling transformations using 2D affine transformations rotation rotating 90 degrees counter-clockwise in 2D space since cos(90) = 0and sin(90) = 1the matrix simplifies transformations 7  horizontal shear scaling combining rotation, shear & scaling multiply the matrices in the order of scaling, shear + then rotation to combine the three combined transformation matrix is C = S ∗ H ∗ R multiply from right to left so H ∗ Rfirst then S ∗ (H ∗ R) 2d affine transformation summary No change Translate Scale about origin 1 0 0 1 0 X W 0 0 0 1 0 0 1 Y 0 H 0 0 0 1 0 0 1 0 0 1 y y y (0, 1) (0, H) 1 1 1 (0, 0) (1, 0) (X, Y) (W, 0) 0 1 x 0 1 x 0 1 x Rotate about origin Shear in x direction Shear in y direction cos θ −sin θ 0 1 tan ϕ 0 1 0 0 sin θ cos θ 0 0 1 0 tan ψ 1 0 0 0 1 0 0 1 0 0 1 y y y (−sin θ, (tan ϕ, 1) (0, 1) cos θ) 1 1 1 (cos θ, sin θ) ϕ (1, 0) (1, tan ψ) θ 0 1 x 0 1 x 0 ψ 1 x Reflect about origin Reflect about x-axis Reflect about y-axis −1 0 0 1 0 0 −1 0 0 0 −1 0 0 −1 0 0 1 0 0 0 1 0 0 1 0 0 1 y y y (0, 1) 1 1 1 (−1, 0) (1, 0) 0 1 x 0 1 x (−1, 0) 0 1 x (0, −1) (0, −1) transformations 8 transformations 9  transformations in 3d transformations often represented using 4x4 matrices to allow for combinations of multiple transformations translation scaling rotation shearing transformations in 3d 1  combined transformation multiply matrices in the desired order if applying in order: translation, scaling, rotation & shearing: C = H ∗ R ∗ S ∗ T transformations in 3d 2