C23 From Dot to Display The Secret History of Your Screen

Screens & 2D Graphics Fundamentals

Dr Sudheendra S G provides a detailed review of the fundamental concepts behind screens and 2D graphics, drawing primarily from the provided "Screens & 2D Graphics — Teacher Script." It covers the evolution of display technologies, the distinction between vector and raster graphics, and the underlying memory considerations that shaped early computing displays.

Learning Goals Summary

The core objectives of understanding screens and 2D graphics are:

• CRT Basics: Comprehending the operation of Cathode Ray Tubes and differentiating between vector and raster scanning.
• Early Systems & Text Mode: Understanding why early systems favored text/character mode due to memory limitations and the function of character generators.
• Graphics Types: Distinguishing vector graphics (lines) from bitmap/pixel graphics, and defining key terms like frame buffer/VRAM, resolution, color depth, and refresh rate.
• 2D Graphics Primitives: Being able to conceptualize and draw simple 2D graphics (lines, rectangles) using a pixel-grid approach.

Key Themes and Concepts

1. CRT Technology and Display Modes

• CRT Operation: A CRT uses an electron beam directed by magnetic plates (x,y) to strike a phosphor screen, causing it to glow. The two primary drawing modes for CRTs were vector and raster.
• Vector Graphics:Mechanism: "Steer the beam along lines; keep brightness on while moving." The electron beam directly draws lines between points.
• Characteristics: Everything is lines, even text. Graphics are stored as "short vector commands (move, line, intensity) instead of pixels." This was the method for early interactive systems like "Spacewar! (1962) and Sketchpad (1962)."
• Advantages: Efficient for line-based drawings, scalable (as commands define relationships, not fixed pixels).
• Key Vocab: "phosphor persistence, scanline, refresh rate (e.g., 60 Hz), vector vs raster."
• Raster Graphics:Mechanism: "Sweep left→right, top→bottom, line by line; turn the beam on only where pixels should glow." The screen is drawn as a series of horizontal scanlines.
• Characteristics: Images are composed of a grid of individual "pixels" (picture elements). Modern LCDs still use a raster update model.
• Key Vocab: "scanline, refresh rate."

2. The Dominance of Text Mode in Early Systems

• Memory Limitations: Early computers had "tiny" memory. The primary reason "early screens avoided pixels" was that "A 200×200 1-bit image needs 40,000 bits (~5 KB)—more than half the RAM of some early machines."
• Character Generators:Function: Early "'graphics cards' were character generators." These devices had a "ROM [that] turned each code into a small dot-matrix glyph and rasterized it."
• Efficiency: Programs wrote simple character codes into a screen buffer (e.g., 80x25 grid). This was significantly more memory-efficient. For example, "80×25 characters @8-bit each (≈2,000 bytes)" compared to 40,000 bits for a simple bitmap.
• Capabilities: Some character sets, like CP437, included "line/box glyphs" for creating pseudo-graphical user interfaces, often referred to as ASCII art.
• Misconception Alert: "Old screens couldn’t do pixels." This is incorrect; "They could; memory was the limiting factor."

3. Bitmaps, Frame Buffers, and VRAM

• Bitmapped Displays: These displays directly "map memory 1:1 to pixels in a frame buffer." Every pixel on the screen corresponds to a specific location in memory.
• Frame Buffer/VRAM:Function: The "frame buffer = the canvas in memory; the screen is just a fast viewer." It's a dedicated region of memory that holds the data for each pixel to be displayed.
• Evolution: "Early systems used main RAM; later, fast VRAM on graphics cards." VRAM (Video RAM) is specialized memory optimized for graphical operations.
• Color Depth: "With N-bit color, each pixel stores intensity/color (e.g., 8-bit grayscale 0–255)." Higher bit depth allows for more colors or shades of gray.
• Resolution: The total number of pixels on the screen (e.g., width × height).
• Refresh Rate: The number of times per second the screen is redrawn (e.g., 60 Hz). Higher refresh rates result in smoother motion and less flicker.

4. Drawing 2D Graphics Primitives

• Pixel-Grid Thinking: Understanding how to manipulate individual pixels or groups of pixels to form shapes.
• Basic Operations:setPixel(x,y,val): Setting the color/intensity of a single pixel.
• drawLine(x1,y1,x2,y2,val): Drawing a line between two points.
• drawRectangle(x,y,w,h,val): Drawing a filled or outlined rectangle.
• Coordinate System: Graphics are drawn using (x,y) coordinates, where x typically increases from left to right, and y increases from top to bottom.

5. Modern Displays (LCDs)

• Continuity with Raster Model: While the technology has changed from CRTs, "Modern LCDs still raster update tiny RGB subpixels many times per second."
• Technological Shift: The primary change is the replacement of "electron beams for thin-film transistors," but "the scan and pixel model remain."
• RGB Subpixels: LCDs achieve color by using red, green, and blue subpixels that combine to create a full range of colors.

Important Facts and Ideas

• Memory as the Bottleneck: The size and cost of memory were the single most significant factors in the early development of display technologies, heavily favoring text-based interfaces over pixel-based graphics.
• Vector vs. Raster Trade-offs:Vector: Excellent for precise line art, CAD, scalable graphics (SVG, logos). Efficient for "move, line, intensity" commands.
• Raster: Essential for photographs, complex images, video, games, and modern UIs. Direct representation of every pixel.
• The "GPU" in Early Systems: The "character generator" served as the rudimentary "early 'GPU'," translating character codes into screen-ready glyphs.
• Frame Buffer as the Bridge: The frame buffer is the crucial intermediate memory where the CPU's graphical instructions are stored before being translated into a visual output by the display hardware.
• Enduring Principles: Despite massive technological advancements (CRTs to LCDs), the fundamental concepts of raster scanning and pixel manipulation remain central to how modern screens display images.

Consolidation Points

• Vector vs Raster: Vector draws paths; Raster paints pixels.
• Early Text Mode: Preferred due to severe memory limitations.
• Frame Buffer: The memory canvas holding pixel data before display.
• Modern Applications: Vector ideas are seen in CAD, SVG, logos; Bitmap ideas in photos, games, UIs.