Graphics Programming
2D Objects: Vector and Raster Graphics

Slides can also be advanced by clicking on the left or right border of the slide.

• In computer graphics, when coordinates of 2D or 3D shapes are defined mathematically, this is ideally done by real numbers (which are represented in the computer as a floating point number)
• Example: A point in a 2D coordinate system can be defined by two real numbers $x=4.5$ and $y=2.33$

$x$-coordinate

$y$-coordinate

point $\mathbf{p}$

• A representation of 2D or 3D shapes with real coordinates is called Vector Graphic
• The term stems from the fact that the coordinates can be written as vectors
• For a point $\mathbf{p}$ in a 2D coordinate system, for example,
  
  $\mathbf{p}=\begin{pmatrix} x\\y\end{pmatrix} = \begin{pmatrix} 4.5\\2.33\end{pmatrix}$

• With vector graphics, objects are described by combining basic objects (such as line, rectangle, circle, triangle, polygon)

$x$-coordinate

$y$-coordinate

triangle

rectangle

public void paint(Graphics g) {
  Graphics2D g2d = (Graphics2D) g; // cast to Graphics2D
  g2d.draw(new Rectangle2D.Double(20.75, 45.0, 60.0, 30.00) );
  g2d.fill(new Rectangle2D.Double(67.33, 60.0,  8.0, 15.00) ); 
  g2d.fill(new Rectangle2D.Double(35.00, 55.0, 20.3, 11.00) );
  GeneralPath triangle = new GeneralPath(); 
  triangle.moveTo(10.75, 46.0);
  triangle.lineTo(90.75, 46.0);
  triangle.lineTo(50.75, 10.0);
  triangle.closePath();
  g2d.fill(triangle);
 }

Full source code:
House2D.java

• A representation as a vector graphic has the advantage that the objects can be arbitrarily scaled
• For example, an analog plotter can approach the coordinates accurately and thus draw a very accurate picture of the shapes

World map

Detail magnification

To create 2D vector graphics, there are many free and commercial programs:

• Inkscape
• Xfig
• OpenOffice Draw
• Adobe Illustrator
• Corel Draw
• Microsoft PowerPoint
• ...

Popular file formats for storing 2D vector graphics are:

• Scalable Vector Graphics (SVG)
• PostScript (PS)
• Portable Document Format (PDF)
• Windows Metafile (WMF)
• ...

• Today's screens provide individual pixels (Pixel="Picture Elements"), which are arranged on a fixed grid
• Printers with linear paper feed (no plotters) apply their color also on a discrete dot matrix
• Raster images have a color value for each pixel of their grid. They are therefore fully defined by:
  • Image width: Number of pixels in the x direction
  • Image Height: number of pixels in the y-direction
  • and a data field with (width x height) color values

• Here is an example of a raster image with 9 x 6 pixels (counting starts at 0)
• In the following it is assumed that the pixel grid intersects with the center of the pixel area

$x$-coordinate

$y$-coordinate

pixel area

pixel grid

outer edge of raster graphics

• Digital images are typical examples for raster graphics
• For example, image data of real objects are recorded with a digital camera with photosensitive pixel areas
  • 1280 × 1024 (1,3 megapixels)
  • 2560 × 2048 (5,2 megapixels)
  • 5120 × 4096 (21 megapixels)
• Typical conventions for raster graphics:
  • Counting of pixels starts at 0
  • $x$-coordinate axis to the right
  • $y$-coordinate axis downwards

class RasterImage {
  protected int imageWidth;
  protected int imageHeight;
  protected int[] imageData;
  
  public RasterImage(int width, int height) { 
    imageData = new int[width*height]; ...
  }
  public int getPixel(int x, int y) { 
    return imageData[y*imageWidth+x];
  }
  public void setPixel(int pixelValue, int x, int y) { 
    imageData[y*imageWidth+x] = pixelValue;
  }
  ...
};

template<typename T> class RasterImage {
  protected:
    unsigned imageWidth;
    unsigned imageHeight;
    T* imageData;
  public:
    RasterImage(unsigned width, unsigned height) { 
      imageData = new T[width*height]; ...
    }
    const T getPixel(unsigned x, unsigned y) const { 
      return imageData[y*imageWidth+x];
    }
    void setPixel(T pixelValue, unsigned x, unsigned y) { 
      imageData[y*imageWidth+x] = pixelValue;
    }
    ...
};

MyPaintPanel extends JPanel {
  private BufferedImage img = null;
  public void createGUI() {
    try { img = ImageIO.read(new File("./horse.jpg")); } 
    catch (IOException e) { System.out.println("failed to load image"); }
    ...
  }
  public void paint(Graphics g) {
    super.paint(g); Graphics2D g2d = (Graphics2D) g;
    int oldRgb = img.getRGB(10, 100); // read a pixel
    int rgb = 0xFFFF0000; // Alpha-Red-Green-Blue
    img.setRGB(10, 100, rgb); // draw red pixel
    g.drawImage(img, 0, 0, null);
  }
}

Source code of the example: MyBufferedImage.java

• Well suited for complex scenes with irregular shapes or many colors
• Memory requirement is independent of scene complexity
• Direct display on todays screens

• When displaying very simple objects memory requirements are higher compared to a vector graphic representation
• At large magnification individual pixels become visible
• This effect is also called jaggies oder aliasing

Detail magnification vector graphics

Detail magnification raster graphics

There are many free and commercial image editing programs:

• Gimp
• Microsoft Paint
• Adobe Photoshop
• Corel Photo-Paint
• ...

Popular file formats for raster graphics are:

• PNG (Portable Network Graphics), lossless compression
• JPEG, smaller files because of lossy compression
• TIFF (Tagged Image File Format), typically lossless compression, high color depth (up to 32 bit)
• TGA (Targa Image File), uncompressed or lossless compression
• GIF (Graphics Interchange Format), lossless compression, allows animation sequences

Please notify me by e-mail if you have questions, suggestions for improvement, or found typos: Contact

More lecture slides

Slides in German (Folien auf Deutsch)