2D Images

1
2D Images

• Bitmap vs. Vector
• Attributes of Vector Shapes
• Standard Transformations

2
Representing 2D images

• how can we store the information needed to
  display a 2D picture, photograph or drawing?
• two format types
• bitmap
• the image is stored and displayed as a fine grid
  of dots
• only the colour of each dot is stored
• Vector
• information about the components making up the
  image is stored
• this information may need to be converted to a
  bitmap for display

3
Bitmap representation

• 2D grid of pixels (dots)
• information stored as colour of each pixel
• simple format
• little processing needed to display
• storage space required depends on
• resolution
• number of rows and columns of pixels
• colour depth
• amount of space needed to store each colour

4
Bitmap representation

• for example, a 130x130 pixel image in 24-bit
  colour (16.7 million possible colours takes up
• 130x130x3 50.7 KB
• a lot of storage space
• unless compressed
• sources of bitmap images
• digital camera
• scanner
• Paint program
• Fireworks

5
Disadvantages of bitmaps

• doesnt resize well
• just get larger blocks of colour
• jagged edges
• no information about content of picture
• cannot edit individual picture elements
• for example, cannot easily make the eye bigger
• or change the shape of the body from a circle to
  a square

6
Bitmap editing

• can easily do image processing on whole or part
• blur edges
• sharpen
• add noise
• smudge

7
Vector representation

• picture information stored as a collection of
  shapes
• points connected by lines
• with edge and fill colours
• much less storage space than bitmap
• unless very complex picture
• this picture
• 7 circles
• 4 black quads
• 2 curved shapes
• 1 quad and 1 triangle for orange background
• need to store colour, position and size of each
  shape
• lt 1 kB

8
Vector representation

• Vector representations must be processed before
  they are displayed
• scan conversion or rasterisation
• convert shapes into bitmap
• complex algorithms which pixels must be
  coloured to represent each shape?
• Sources of Vector images
• some drawing programs
• Fireworks, Flash, Powerpoint
• graphics and games programming
• assignment examples
• 3D modelling programs and games use Vector
  representation of scene objects
• these are converted to a 2D bitmap representation
  for display

9
Vector image

• can resize without losing line sharpness
• draw lines between points at different positions
• holds information about picture elements and how
  they are grouped
• can edit each element separately by selecting and
  changing its attributes

10
Editing Vector images
11
Vector and bitmap images

• but cant edit or apply an effect to only part of
  a vector shape
• have to subdivide into smaller shapes
• or convert to bitmap
• work on pixels
• Fireworks can do this
• more difficult to convert bitmap to vector image
• have to detect edges
• group into shapes
• Flash can do this

12
Different perspectives
13
Graphical APIs

• package of classes, functions, structures etc.
  for graphical programming
• performs common graphics operations
• scan conversions
• transformations
• 3D projection
• avoids programmer having to know specifics of
  display hardware

14
Graphical APIs

• Java
• abstract windows toolkit (awt)
• Java 2D
• Java 3D
• C / C
• Windows Graphics Device Interface (GDI)
• OpenGL
• usually C / C
• bindings to other languages
• DirectX
• C
• .NET managed code (C, VB.NET)

15
How do you display a red filled rectangle?

• drawing application user
• choose colour
• select rectangle tool
• click on top left corner
• drag to define width and height
• Java awt programmer
• g.setColor(Color.red)
• g.fillRect(100, 150, 75, 50)
• // parameters of fillRect
• // x, y of top left corner
• // width and height

16
Low-level graphics programmer

• scan conversion
• define rectangle by 4 vertices
• break into flat-topped
• and -bottomed triangles
• sort vertices of each triangle
• starting at top left of image, move across to
  right
• if pixel is outside of leftmost edge of triangle
• keep current colour
• otherwise colour it red
• until rightmost edge is reached
• repeat for each scan line and each triangle
• will do in Levels 2 and 3 graphics modules

17
Attributes of common vector shapes

• Think about
• information needed by API to represent a shape
• information stored by drawing packages
• to make editing easier

18
Rectangle and Oval

• x, y of top left corner
• width, height
• square is a rectangle with equal width and height
• circle is an oval with equal width and height
• edge
• colour
• thickness
• softness
• other effects
• fill
• colour
• pattern
• gradient

19
Regular polygon

• same attributes
• position, width, height, edge, fill.
• plus number of sides, angle
• ultimately drawn as lines between points

20
Auto shapes

• Fireworks has tools for drawing many autoshapes
• allows special features to be edited
• arrow
• point width and height
• bend at end
• star
• number of points
• roundness
• again, ultimately drawn as lines between points

21
Transformations - translate

• move
• x position
• y position
• or both
• note in most graphics systems, y increases as
  you move down the screen
• opposite to school geometry
• way pages are laid out

22
Transformations - scale

• increase
• width (scale in x)
• height (scale in y)
• or both

23
Transformations - rotate

• must define axis (point in 2D) of rotation
• Fireworks
• centre of shape by default
• can move it
• angles relative to positive x axis
• positive angle
• anti-clockwise rotation
• full revolution 3600

900
450
1800
00
2700
24
Rotations

• 900 around centre

• 900 around dot

25
Transformations - reflect

• need a plane (line in 2D) of reflection

26
Transformations shear

• deform in x direction proportional to y
• or y direction proportional to x

shear in x direction (skew)
27
Further work

• Reading
• Kerlow
• Chapter 3 Basic modelling concepts
• Hearn and Baker
• Attributes of output primitives
• Geometrical transformations
• Next lecture
• modelling curved lines
• Tutorial - Fireworks
• drawing and transforming shapes
• drawing and editing curves