Vector Images

Early graphics displays were vector displays

Images were drawn as a series of lines traced on the screen

The concept continues today in applications such as SVG images

[Sketchpad]

Raster Images

     

A raster digital image is a 2 dimensional array of pixel colors

Pixel = "picture element"

Each pixel is a sample of a continuous, analog image

Pixels

Pointillism can be considered to take a similar approach -
breaking an image down into discrete samples

(though not in a regularly spaced grid)

Visual Acuity

Image Data

Basic digital image data is a stream of numbers, representing pixel colors

1 239 120 1 1 37 94 8 92 31 80 92 134 89 2 3 50 9 3 10 93 109 134  ...

Important additional information is:

• Width and height (in pixels)
• Type of color data - RGB, CMY, color index, ...
• Data type (per component) - 8 bit unsigned, 32 bit float, ...

Total memory needed for a simple image:

    width * height * components * bytes_per_component

e.g. a 1024x768, RGB, 8-bit image requires 2.25 megabytes

Frame Buffer

The frame buffer is a chunk of graphics card memory that contains what is displayed on the screen.

Like an image, but for each pixel there can be additional data besides color - depth, masking, etc.

OpenGL renders shapes, images, etc. into pixels of the frame buffer.
rasterizing it - converting it into raster form in the frame buffer.

Coordinate Systems

Coordinate Systems

A coordinate system is needed for measuring objects' positions

It allows us to describe any location by a set of numbers - 2 numbers when working in 2 dimensions, 3 numbers for 3 dimensions.

A coordinate system has an origin (a reference point) and coordinate axes

In 2D we have an X axis and a Y axis. In 3D, we add a Z axis.

The axes are perpendicular - they are independent

Coordinate Systems

HTML5 canvas

Coordinate Systems

Some other coordinate systems used:

• Desktop coordinates
  • Origin at upper left corner of screen
  • +X points right, +Y points down
  • 1 unit = 1 pixel
  
  
• Pyglet pointer coordinates
  • Origin at lower left corner of window
  • +X right, +Y up
  • 1 unit = 1 pixel
  
  
• Default OpenGL drawing coordinates ("normalized device coordinates")
  • Origin at center of window
  • +X right, +Y up
  • 1 unit = 1/2 width or height of window

gluOrtho2D

For older, fixed-function pipeline

The default drawing coordinate system can be changed with the function gluOrtho2D

e.g.:

    glMatrixMode(GL_PROJECTION)
    glLoadIdentity()
    gluOrtho2D(0.0, 10.0, 0.0, 5.0)
    glMatrixMode(GL_MODELVIEW)

Geometry

2D Canvas Geometry

Drawing in an HTML5 canvas (2D) can use

• rectangles
• paths
• text
• images

All except images can be filled or outlined

Color

Set the drawing color via the fillStyle and/or strokeStyle

ctx.fillStyle = "rgb(255,0,0)";
ctx.strokeStyle = "rgb(0,0,0)";

2D Canvas Geometry

Rectangles

ctx.fillRect(0, 0, 250, 100);
ctx.strokeRect(50, 70, 100, 300);

Paths

Start a path with beginPath, then define a series of lines and/or arcs. Finally, use fill or stroke to draw it.

ctx.beginPath();
ctx.moveTo(30,0);
ctx.lineTo(200,370);
ctx.lineTo(0,400);
ctx.fill();

ctx.beginPath();
ctx.arc(100,200, 100, 0, Math.PI);
ctx.stroke();

OpenGL Geometry

OpenGL includes functions to draw points, lines, and triangles.

All other shapes are made up of these elements.

A basic shape is entirely described by its vertices, which are connected by straight edges.

The graphics hardware fills in all the necessary pixels.

OpenGL Geometry

For older, fixed-function pipeline

The basic method for drawing a shape is:

glBegin(...)
glVertex(...)
glVertex(...)
glVertex(...)
...

glEnd()

Always be sure to have a matching glEnd() for each glBegin()

OpenGL Geometry

GL_POINTS	GL_LINES	GL_LINE_STRIP	GL_LINE_LOOP
GL_TRIANGLES	GL_TRIANGLE_STRIP	GL_TRIANGLE_FAN

OpenGL Geometry

    glColor3f(1, 0.5, 0)
    glBegin(GL_TRIANGLES)
    glVertex2f(0, 0)
    glVertex2f(1, 0)
    glVertex2f(0.5, 0.5)
    glEnd()

This document is by Dave Pape, and is released under a Creative Commons License.