159'235 Graphics

1
159.235 Graphics Graphical Programming

• Lecture 2 - Graphics Fundamentals

2
Fundamentals Outline

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

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 640x3201024x768)
• Vector (circa WW2) Raster/Bitmap models
• Devices Human / Machine Interaction
• Memory and Processing Speed limitations

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

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
  computers memory

• Known as Bitmap graphics
• The bits are mapped to the pixels
• Flexible, portable software
• Independent of Hardware Operating System

6
Graphical Devices

• 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

• 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

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

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

• Arrayrowcolumn
• 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)

9
Cartesian Coordinates
x
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 43 -
  Chosen to suit the common display devices eg TV
  screens or monitors

• 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

10
Drawing Space or Canvas

• 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

• 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

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

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

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

14
Java Graphics Code Fragment

• // g2 is the Graphics2D object supplied by
  the system
• g2.setBackground( Color.white )
  // set background colour
• g2.clearRect( 0, 0, getWidth(), getHeight() )
  // clear an area
• g2.setColor( Color.black ) // set the
  drawing colour
• g2.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

15
What MyProg01 Output Looks Like
Black rectangle inside a white area
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