Graphics 1

Graphics & Graphical Programming

Lecture 2 - Graphics Fundamentals

Graphics 2

Fundamentals Outline

• Historical perspective• Model of a Computer - Memory & Graphics• Devices• Raster Model & Bitmaps• Coordinates• Drawing Spaces• Colours• Graphics Libraries

Graphics 3

Brief History

• Teletypes(pre 1950s), Display Tubes(post WW2), CRTs(last half of 20th century), Flat Panels (modern era)

• Size and Quality (eg resolution) driven by economics (eg 640x320…1024x768…)

• Vector (circa WW2) & Raster/Bitmap models• Devices & Human / Machine Interaction• Memory and Processing Speed limitations

Graphics 4

Computer Memory Model• Main Memory• Graphics memory

– Used to be limited to separate amount on eg graphics card

– Modern idea is to partition main memory dynamically (ie by software instruction)

• Modern idea is to map memory to the display

• Independent of display hardware type

• CPU + Cache memory + Main memory

• Cache memory is fast but expensive so (still often) only have small amount eg 512kBytes available

• Main memory relatively plentiful (eg GBytes) but slow

Graphics 5

Memory & Graphics

• Idea is that we can write programs that interact with the graphical display device simply by writing to a predetermined area of the computer’s memory

• Known as Bitmap graphics• The bits are mapped to the

pixels

• Flexible, portable software• Independent of Hardware &

Operating System

Graphics 6

Graphical Devices• Devices eg mouse,

stereo glasses, tracker ball, light pen, touch screen, 3d-wand, “rat”, sensor gloves, head tracker, iris tracker,…

• Even Mouse varies in form factor and number of buttons

• Mouse - most well known device

• Buttons, and scan movements

• Jargon ideas that have become common:– Drag

– Click

– Double-Click

– Left -Click

• Main idea is to let you specify a location in a space eg x,y (or x,y,z) coordinates

Graphics 7

Raster Model - Pixels• Pixel or sometimes “pel”

Picture Element• Each pixel is a sample

that can be rendered as a dot or rectangle on the screen

• Often try to design them as squares but not always

• Might be implemented as small area of phosphor on a monochrome monitor

• Or three areas of eg red, green and blue phosphors for colour

• Or simple a transistor logic gate assembly on a flat panel display

Graphics 8

Coordinate Systems

• Pixel Coordinate System - rows and columns

• Rectilinear

• Usually for graphics, we start at top left corner and work our way across and down

• Same as raster orientation

• Array[row][column]• Row major used in C

and C+ ( last index moves fastest in memory)

• Not all languages do it this way - eg Fortran uses column major (first index moves fastest)

Graphics 9

Cartesian Coordinates

• Often we use the Cartesian coordinate convention ie x,y coordinates (or x,y,z in 3D) and map this to our display

• Usually column corresponds to x, and -row corresponds to y

• This works if we know the max min values.

• Common values are eg 640 columns x 320 rows

• Or 1024x768 or better• Aspect ratio is the ratio of

these eg 4:3 - Chosen to suit the common display devices eg TV screens or monitors

x

y

Graphics 10

Drawing Space or Canvas

• Coordinate Systems

• Drawing Primitives

• Library of utilities– eg drawDot( int x, int y);

– Or drawLine( x1, y1, x2, y2 );

• Usually we have “Primitive” Models for coordinate spaces and colours

• We do not want to write our application programs worrying about pixel resolutions

• We may have libraries that allow us to do so, but often they will support more general coordinates

• Eg real space “normalised” coordinates [0.0,1.0]

Graphics 11

Colours in Brief

• Red Green Blue is not the Only colour model although still most common

• We specify separate RGB values for each pixel

• They map to intensities• All colours can be expressed

as combination of these

• Sometimes also an “alpha” or transparency value

• These will conveniently pack into a computer word of 4 bytes, one byte for each entity

• 1 Byte gives us 256 values - hence numbers of colours

• Need not use this resolution

• Can also use Look-up tables to save memory

Graphics 12

Graphics Libraries and packages

• What is a graphics system?

• A package or Library that links to a Language or environment and lets us write programs that are independent of the graphics hardware and devices

• Java Development Kit and Java 2D and Java 3D libraries

• GL and OpenGL (Graphics Library), VOGL

• X11, DirectX, PHIGS,… and lots of others

Graphics 13

Java Graphics Program Outline

• A short example- MyProg01 draws a black rectangle inside a white rectangle

• See the course web pages for these codes• Use a text editor or your favourite text tool

(eg emacs or vi or notepad) to create MyProg01.java

• Compile it using javac MyProg01.java• Run using java Myprog01

Graphics 14

Java Graphics Code Fragment// g2 is the Graphics2D object supplied by the system…

g2.setBackground( Color.white ); // set background colourg2.clearRect( 0, 0, getWidth(), getHeight() ); // clear an area

g2.setColor( Color.black ); // set the drawing colourg2.fillRect( 10, 10, 20, 20 ); // fill in a rectangle of that colour

g2.drawRect( 0, 0, getWidth()-1, getHeight()-1 ); // draw a border around everything

• More on how this works next lecture and at the tutorials…

Graphics 15

What MyProg01 Output Looks Like

Black rectangle inside a white area…

Graphics 16

Summary• Graphics has a varied

history• Very technology driven• Good advances in recent

years with adequate memory and processing power

• Primitives and library layers approach is very common

• Note devices and memory model

• Colour models and drawing spaces are important ideas for our programs

• We will use the Java Development Kit graphics libraries and primitives