Archive for the 'Lecture' Category

1: Graphical Output and Input

Monday, October 8th, 2007

Lecture Notes

This first lecture on Graphics by Duncan Gillies covered:

  • Device Independent Graphics
  • Raster Graphics
  • Normalised Device Coordinates
  • World Coordinates
  • The Normalisation Transformation
  • Output Primitives
  • Input Primitives

Device Dependence

Wherever possible, applications should be developed to be device independent. To provide device independence, Graphics APIs (Application Programmer’s Interfaces) have been developed. Examples of such APIs are OpenGL and DirectX. These APIs (well, OpenGL specifically, since DirectX is a Microsoft API) allow a developer to create a graphics application that can work cross-platform on the majority of modern Operating Systems.

Raster Graphics

Most graphics devices are of Raster type, and allow the developer to plot points. The developer must specify the X and Y coordinate and the colour of the point that they wish to plot. For Example:

setPixel(XCoord, YCoord, Colour);

This leads to two problems:

  • What happens on different screen resolutions or application window sizes?
  • What if a different operating system addresses pixels differently?

World Coordinate System

World Coordinates are “Real World” coordinates that are mapped onto the pixel coordinates of a window. For example, an Architect may choose to use meters as a unit of measurement instead of pixels. The World Coordinates can be specified for a particular window using code similar to:

setWindowWorldCoordinates(WXMin, WXMax, WYMin, WYMax);

This is merely chosen for the developer’s convenience, and “World Coordinates” can mapped onto pixel coordinates at a later stage in the application before the pixel is modified. This allows the application to be size and resolution independent.

Graphics Primitives

Now that an internal system of points has been defined (the World Coordinates), the developer can now draw pictures using commands like:

drawLine(x1, y1, x2, y2);
drawCircle(centreX, centreY, radius);
drawText(x, y, “Text”);

Parts of the drawing that are outside of the application window are clipped so that a picture will not effect outside its’ window.

Device independent graphics systems extensively use attributes. These can be used to set colours and fonts, where it would be tedious to have to specify the data on every command.


In order to implement a World Coordinate system, we need a method of mapping World Coordinates to actual pixel coordinates. Doing this is fairly straight forward. Firstly use the graphics API of your choice to obtain the maximum and minimum pixel coordinates:

getWindowPixelCoordinates(DXMin, DXMax, DYMin, DYMax);

Then, translate your World Coordinates into Pixel coordinates using the following translation:

Xd = Xw * A + B
Yd = Yw * C + D


A = (DXMax – DXMin) / (WXMax – WXMin)
B = -WXMin(DXMax – DXMin) / WXMax – WXMin) + DXMin

With similar equations for C and D, merely using the appropriate maximum and minimum Y values.


Some graphics APIs allow for further separation of windows by providing viewports (subsections) of the display window.

Input Devices

The most important input device with respect to graphics, and the only device that this course really covers, is the mouse. This device records:

  • Distance moved in X Direction
  • Distance moved in Y Direction
  • Status of Buttons

The mouse causes a system interrupt every time it is moved or a button is pressed, and is is the responsibility of the application to track this movement and to display a pointer or marker.


The Operating System must share control of the mouse with the application since it has to handle events outside the application window. It therefore traps all mouse events and then passes them on to the application. The application must, after every action, return to a callback procedure (or event loop) to determine if any mouse events have been happened and, if so, to process them. A sample callback procedure may look something like:

while (executing) {
if (mouseEvent()) processMouseEvent();
if (windowResizeEvent()) redrawGraphics();
// do stuff

Device Independent Input

Typically, a user will move a pointer on the screen and use this to click on a button. This identifies a pixel, and for device independent input, its address can be translated into a users world coordinate system.

Two forms of visible marker are common. The first is called a Locator and is typically implemented as a cross-hair or pointer. The second is called a rubber band, and is indicated by a line or box originating from a fixed point to the point indicated by the mouse register. In most cases, this functionality is provided by the system software.