ScholarQuill logoScholarQuillUniversity Notes
  • Notes
  • Past Papers
  • Blogs
  • Todo
Login
ScholarQuill logoScholarQuillUniversity Notes
Login
NotesPast PapersBlogsTodo
More
SubjectsDiscussionCGPA CalculatorGPA CalculatorStudent PortalCourse Outline
About
About usPrivacy PolicyReportContact
Notes
Past Papers
Blogs
Todo
Analytics
    Current Subject
    🧩
    HCI & Computer Graphics
    COMP3145
    Progress0 / 73 topics
    Topics
    1. The Human: Input-output channels2. Human memory3. Thinking, Reasoning, Problem solving4. Emotions and Individual differences5. Psychology and design of interacting systems6. The Computer: Text entry devices7. Positioning, Pointing, and drawing devices8. Display devices9. Devices for virtual reality and 3D interaction10. Physical controls, Sensors and special devices11. Paper printing and scanning12. Memory, Processing and networks13. The Interaction: Models of interaction14. Frameworks and HCI15. Ergonomics16. Interaction styles17. Elements of the WIMP interfaces18. Interactivity and Context of interaction19. Usability Paradigm and Principles: Introduction20. Paradigms for interaction21. Interaction Design Basics: What is design22. Process of design and User focus23. Navigation design24. Screen design and layout25. Iteration and prototyping26. HCI in Software Process: Software life cycle27. Usability engineering28. Iterative design and prototyping29. Design rationale30. Design rules and Guidelines31. Golden rules and heuristics32. HCI patterns33. Evaluation techniques and methods34. Task analysis35. Universal design36. User support systems37. Computer Supported Cooperative Work38. Groupware systems39. Implementation of synchronous groupware40. Ubiquitous computing41. History of Computer Graphics42. Graphics architectures and software43. Imaging and vision: Pinhole camera, Human vision, Synthetic camera44. Modeling vs. rendering45. OpenGL Architecture46. Displaying simple two-dimensional geometric objects47. Positioning systems and windowed environment48. Color perception and models49. RGB, CMY, HLS color models50. Color transformations51. Color in OpenGL: RGB and indexed color52. Input: Network environment and client-server computing53. Input measures: event, sample and request input54. Using callbacks and picking55. Affine transformations: translation, rotation, scaling, shear56. Homogeneous coordinates and concatenation57. Current transformation and matrix stacks58. Three Dimensional Graphics: Classical viewing59. Specifying views in 3D60. Affine transformation in 3D61. Projective transformations62. Ray tracing63. Shading: Illumination and surface modeling64. Phong shading model65. Polygon shading66. Rasterization: Line drawing via Bresenham's algorithm67. Clipping and polygonal fill68. BitBlt operations69. Hidden surface removal (z buffer)70. Discrete Techniques: Buffers71. Reading and writing bitmaps and pixel maps72. Texture mapping73. Compositing
    COMP3145›Displaying simple two-dimensional geometric objects
    HCI & Computer GraphicsTopic 46 of 73

    Displaying simple two-dimensional geometric objects

    5 minread
    780words
    Beginnerlevel

    1. Introduction

    Definition: Displaying 2D geometric objects involves drawing basic shapes such as points, lines, circles, and polygons on a 2D plane using computer graphics systems. These are fundamental building blocks for graphics applications like CAD, UI design, plotting, and games.

    Key Concept: 2D graphics rely on a coordinate system, typically the Cartesian (x,y)(x, y)(x,y) plane, to position and render shapes.


    2. Coordinate Systems in 2D Graphics

    1. World Coordinates:

      • Defines positions relative to a logical scene
      • Independent of the screen or device resolution
    2. Device Coordinates:

      • Maps world coordinates to actual screen pixels
      • Conversion from world → device coordinates is necessary for rendering
    3. Viewport:

      • Specifies the rectangular portion of the window where objects are drawn

    3. Basic 2D Geometric Primitives

    A. Point

    • Definition: The simplest object in 2D graphics, defined by a single coordinate (x,y)(x, y)(x,y).
    • Usage: Plotting data, vertices of polygons, or markers.

    B. Line

    • Definition: A straight connection between two points (x1,y1)(x_1, y_1)(x1​,y1​) and (x2,y2)(x_2, y_2)(x2​,y2​).

    • Drawing Algorithms:

      1. DDA (Digital Differential Analyzer): Incremental algorithm using floating-point arithmetic.
      2. Bresenham’s Line Algorithm: Efficient integer-based algorithm for raster devices.

    C. Circle

    • Definition: Set of points equidistant from a center (xc,yc)(x_c, y_c)(xc​,yc​) with radius rrr.

    • Equation: (x−xc)2+(y−yc)2=r2(x - x_c)^2 + (y - y_c)^2 = r^2(x−xc​)2+(y−yc​)2=r2

    • Drawing Algorithms:

      • Midpoint Circle Algorithm
      • Bresenham’s Circle Algorithm

    D. Ellipse

    • Definition: Set of points where the sum of distances from two foci is constant.
    • Equation: (x−xc)2a2+(y−yc)2b2=1\frac{(x - x_c)^2}{a^2} + \frac{(y - y_c)^2}{b^2} = 1a2(x−xc​)2​+b2(y−yc​)2​=1
    • Drawing Algorithm: Midpoint Ellipse Algorithm

    E. Polygon

    • Definition: Closed shape made of lines connecting a sequence of points.

    • Types: Triangles, rectangles, pentagons, etc.

    • Filling Algorithms:

      • Scanline fill algorithm
      • Flood-fill algorithm

    4. Transformations of 2D Objects

    To manipulate 2D shapes, several transformations are applied:

    1. Translation: Move object by (dx,dy)(dx, dy)(dx,dy)
    x′=x+dx,y′=y+dy x' = x + dx, \quad y' = y + dyx′=x+dx,y′=y+dy
    1. Scaling: Resize object relative to origin or a reference point
    x′=Sx⋅x,y′=Sy⋅y x' = S_x \cdot x, \quad y' = S_y \cdot yx′=Sx​⋅x,y′=Sy​⋅y
    1. Rotation: Rotate object around the origin by angle θ\thetaθ
    x′=xcos⁡θ−ysin⁡θ,y′=xsin⁡θ+ycos⁡θ x' = x \cos\theta - y \sin\theta, \quad y' = x \sin\theta + y \cos\thetax′=xcosθ−ysinθ,y′=xsinθ+ycosθ
    1. Reflection: Mirror object along x-axis, y-axis, or a line

    2. Shearing: Skew object along x or y-axis


    5. Rendering 2D Objects

    Steps to Display:

    1. Convert world coordinates to device coordinates.
    2. Apply transformation matrices if needed.
    3. Use a rasterization algorithm to generate pixels.
    4. Store pixels in the framebuffer and display on the screen.

    Example in OpenGL (Pseudocode):

    // Draw a triangle
    glBegin(GL_TRIANGLES);
       glVertex2f(0.0, 0.0);
       glVertex2f(0.5, 0.0);
       glVertex2f(0.25, 0.5);
    glEnd();
    glFlush();
    

    6. Applications

    • User Interface Elements: Buttons, sliders, icons
    • Computer-Aided Design (CAD): Basic drafting and modeling
    • Graph Plotting: Charts, graphs, and scientific visualization
    • Games: Sprites, backgrounds, and simple 2D animations

    Key Takeaways

    • 2D geometric objects are the building blocks of computer graphics.
    • Efficient algorithms are used for drawing primitives like lines, circles, and polygons.
    • Transformations allow manipulation of objects for animation, design, and interaction.
    • Mastering 2D graphics is essential before moving to 3D graphics and rendering pipelines.
    Previous topic 45
    OpenGL Architecture
    Next topic 47
    Positioning systems and windowed environment

    Past Papers

    Open this section to load past papers

    Click on Show Past Papers to see past papers.
    On This Page
      Reading Stats
      Est. reading time5 min
      Word count780
      Code examples0
      DifficultyBeginner