Computer Graphics Basics: Definitions, Applications & Core Concepts

TAKEAWAYS:

• Computer graphics is the art and science of creating visual content using computers, combining mathematics, programming, and artistic principles.
• It has diverse applications in entertainment, education, engineering, medicine, and everyday technology like mobile apps and virtual reality.
• Key distinctions exist between computer graphics, image processing, and animation, each serving unique purposes in digital media.
• Core components include modeling, rendering, and display systems, which work together to produce visual output.
• Real-world examples like eSewa’s UI design, YouTube’s video rendering, and Ncell’s 3D maps demonstrate practical applications of these concepts.
• Understanding the history and evolution of computer graphics provides context for modern techniques and tools.

1. Definition of Computer Graphics

Computer graphics (CG) is the study and application of techniques for generating visual content using computers. It involves creating, manipulating, and displaying images, animations, and interactive visuals through mathematical algorithms and computational methods.

Key Components of Computer Graphics

Computer graphics systems typically consist of three main components:

1. Input Devices: Tools like keyboards, mice, tablets, or 3D scanners that allow users to interact with the system (e.g., designing a 3D model in Blender).
2. Processing Unit: The computer’s CPU/GPU that performs calculations for transformations, rendering, and simulations.
3. Output Devices: Displays (monitors, projectors) or printers that show the final visual output.

Visual: Computer Graphics Pipeline

flowchart LR
    A["Input\n(Geometry, Lighting, Camera)"] --> B["Modeling\n(Shape Creation)"]
    B --> C["Rendering\n(Shading, Texturing)"]
    C --> D["Display\n(Screen/Projection)"]
    D -->|"Feedback"| A

2. Applications of Computer Graphics

Computer graphics is ubiquitous in modern life. Below are some real-world applications with examples from Nepal and globally:

In the Real World

• eSewa (Nepal): Uses 2D/3D UI design and animation to create intuitive interfaces for bill payments, ticket bookings, and service requests. The smooth transitions between screens and loading animations rely on frame-based animation and vector graphics for scalability.

• YouTube (Global): Employs real-time rendering and video compression algorithms (e.g., H.264) to stream high-quality videos. The platform uses 3D modeling for thumbnails and motion graphics for trailers.

• Ncell (Nepal): Uses geospatial computer graphics to display 3D maps of network coverage in their customer portal. This helps users visualize signal strength and plan data usage, leveraging projection techniques (e.g., Mercator) and terrain modeling.

• Medical Imaging (Global): Hospitals use 3D reconstruction (e.g., from CT/MRI scans) to create interactive models of organs for surgical planning. For example, a CT scan of a heart is converted into a 3D model for cardiologists to simulate valve repairs.

• Automotive Design (Global): Companies like Toyota use CAD (Computer-Aided Design) software to create virtual prototypes of cars. Graphics tools simulate crash tests, aerodynamics, and interior layouts before physical production.

• Gaming (Global): Games like Genshin Impact or Call of Duty rely on real-time rendering, physics simulations, and procedural generation to create immersive worlds. For example, the ray tracing technique in Cyberpunk 2077 simulates realistic lighting and reflections.

3. Computer Graphics vs. Image Processing

While both fields deal with digital images, they serve different purposes. Here’s a comparison:

Worked Example: Distinguishing CG from Image Processing

• Computer Graphics Task: Design a 3D model of a bus for a simulation game. You start with a wireframe (geometric primitives like cubes and cylinders), apply textures, and render it with lighting. The output is a synthetic image of the bus.

  graph TD
      A["Wireframe\n(Cubes, Cylinders)"] --> B["Texturing\n(UV Mapping)"]
      B --> C["Lighting\n(Phong Shading)"]
      C --> D["Rendered\n3D Bus Image"]

• Image Processing Task: Take a real photograph of a bus and apply an edge-detection filter (e.g., Sobel operator) to highlight its contours. The output is a processed version of the original image, not a new synthetic one.

4. Keyframe Animation: A Core Technique

Keyframe animation is a fundamental technique in computer graphics where animators define key poses (critical points in time) and let the computer interpolate the in-between frames. This is widely used in movies, games, and apps.

How Keyframe Animation Works

1. Define Keyframes: An animator sets the position, rotation, and scale of an object at specific times (e.g., a character’s hand at frame 1 and frame 10).
2. Interpolation: The computer calculates intermediate frames between keyframes using linear or spline interpolation.
3. Rendering: The final animation is rendered frame by frame.

Visual: Keyframe Animation Pipeline

flowchart LR
    A["Keyframe 1\n(Start Pose)"] --> B["Interpolation\n(Bezier Curves)"]
    B --> C["Keyframe 2\n(End Pose)"]
    C --> D["Rendered\nAnimation"]

Worked Example: Animating a Simple Pendulum

Suppose we want to animate a pendulum swinging between two angles:

• Keyframe 1 (Frame 0): Pendulum at 30° to the right.
• Keyframe 2 (Frame 20): Pendulum at 30° to the left.

Steps:

1. At Frame 0, the pendulum’s angle is ${\theta }_0=30°$.
2. At Frame 20, the angle is ${\theta }_{20}=-30°$.
3. For any frame $t$ between 0 and 20, the angle is interpolated linearly: $$\theta (t)={\theta }_0+\left(\frac{t}{20}\right)\times ({\theta }_{20}-{\theta }_0)$$ For $t=10$: $$\theta (10)=30°+\left(\frac{10}{20}\right)\times (-60°)=0°$$
4. The pendulum’s position at each frame is calculated using trigonometry: $$x(t)=L\sin (\theta (t)),y(t)=-L\cos (\theta (t))$$ where $L$ is the length of the pendulum (e.g., 100 pixels).

Real-World Tie-In: This technique is used in Pathao’s ride animation (Nepal), where the driver’s location is updated in real-time on the passenger’s screen using keyframe-like interpolation for smooth movement.

5. RGB Color Model: Representing Colors

The RGB (Red, Green, Blue) color model is the standard for representing colors in digital images. Each color is a combination of these three primary colors, with intensity values ranging from 0 to 255 (8 bits per channel).

How RGB Works

• A color is represented as a triplet: $(R,G,B)$, where each value is an integer between 0 and 255.
• Example:
  • Pure red: $(255,0,0)$
  • Pure green: $(0,255,0)$
  • White: $(255,255,255)$
  • Black: $(0,0,0)$

Visual: RGB Color Cube

graph TD
    A["R=0"] --> B["G=0\nB=0\nBlack"]
    A --> C["G=255\nB=0\nBlue"]
    A --> D["G=0\nB=255\nGreen"]
    B --> E["R=255\nG=0\nB=0\nRed"]
    C --> E
    D --> E

Worked Example: Mixing Colors

Suppose we want to create a custom color for a Daraz product banner. We start with:

• Base color: $(200,150,100)$ (a light beige).
• We want to make it bluer, so we increase the blue component by 50: New color: $(200,150,150)$.

Real-World Tie-In:

• Khalti’s app uses RGB values to ensure consistent branding across devices. For example, their logo’s gradient might transition from $(0,120,212)$ (blue) to $(0,180,255)$ (lighter blue).

6. Computer Graphics vs. Animation

While animation is a subset of computer graphics, the two terms are often used interchangeably but have distinct focuses:

7. History and Evolution of Computer Graphics

Understanding the history provides context for modern techniques:

1. 1960s: Early experiments with vector graphics (e.g., Sketchpad by Ivan Sutherland).
2. 1970s: Introduction of raster graphics and 3D modeling (e.g., Star Wars used early CGI).
3. 1980s: Ray tracing (e.g., Tron) and animation studios (Pixar’s Tin Toy).
4. 1990s: Real-time rendering (e.g., Quake game engine) and VR/AR prototypes.
5. 2000s–Present: GPU acceleration, procedural generation, and AI-driven graphics (e.g., NVIDIA’s DLSS).

Real-World Tie-In:

• Nepal’s NEPSE uses data visualization graphics to display stock market trends. Historical data is rendered as interactive charts (line graphs, candlestick plots) using computer graphics techniques.

8. Exam Tip

This unit is conceptual and application-based. Expect questions on:

1. Definitions: Be ready to explain computer graphics, its components, and distinctions (e.g., CG vs. image processing).
2. Applications: Know 3–4 real-world examples (e.g., eSewa, YouTube, medical imaging) and how they use CG techniques.
3. Keyframe Animation: Understand the interpolation process and be able to calculate intermediate frames (as in the pendulum example).
4. RGB Model: Memorize how colors are represented and simple mixing rules.
5. Comparisons: Be prepared to compare CG with image processing or animation in a table format.

Common Pitfalls:

• Confusing computer graphics with image processing (e.g., thinking edge detection is a CG technique).
• Forgetting to explain real-world ties in answers (examiners love practical examples).
• Skipping visuals in explanations (always draw a simple diagram if possible).

Sample Exam Question: "Explain the application of computer graphics in eSewa’s mobile app. How does keyframe animation improve user experience?" Model Answer:

eSewa uses 2D vector graphics for scalable icons and keyframe animation for smooth transitions between screens (e.g., loading animations, button presses). Keyframe animation enhances UX by:

1. Reducing perceived wait time: A loading spinner (e.g., rotating circle) is interpolated between keyframes to appear fluid.
2. Guiding user attention: Animations like a "tap to pay" button highlight interactive elements.
3. Consistency: Linear interpolation ensures animations play the same way across devices. Example: The transition from the home screen to the payment screen uses 3 keyframes (start, mid, end) with quadratic interpolation for natural motion.