Control Keys

move to next slide (also Enter or Spacebar).
move to previous slide.
 p  toggles between print and presentation view
 p  change to print view (also useful for text search)
CTRL  +  zoom in
CTRL  -  zoom out
CTRL  0  reset zoom

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


Type Font Examples
Variables (scalars) italics $a, b, x, y$
Functions upright $\mathrm{f}, \mathrm{g}(x), \mathrm{max}(x)$
Vectors bold, elements row-wise $\mathbf{a}, \mathbf{b}= \begin{pmatrix}x\\y\end{pmatrix} = (x, y)^\top,$ $\mathbf{B}=(x, y, z)^\top$
Matrices Typewriter $\mathtt{A}, \mathtt{B}= \begin{bmatrix}a & b\\c & d\end{bmatrix}$
Sets calligraphic $\mathcal{A}, B=\{a, b\}, b \in \mathcal{B}$
Number systems, Coordinate spaces double-struck $\mathbb{N}, \mathbb{Z}, \mathbb{R}^2, \mathbb{R}^3$

Vector Graphics

Mathematical Representation of Coordinates

  • 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$
point $\mathbf{p}$

Vector Graphics

  • 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}$

Vector Graphics

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

Vector Graphics

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);

Full source code:

Vector Graphics

  • 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

Interactive Demonstration: Vector Graphics

your browser does not support SVG

Scaling: 100%:

Source: Johnny Automatic, Robot Dog, Public Domain

Creating Vector Graphics

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

Storing Vector Graphics

Popular file formats for storing 2D vector graphics are:

Raster Graphics

Raster Graphics

  • 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

Raster Graphics

  • 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
pixel area
pixel grid
outer edge of raster graphics

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

Raster Graphics

  • Very often per pixel an RGB color value (red, green, blue) is stored (or RGBA value, whereby the additional alpha value indicates the opacity)
  • RGB color space:
  • The image data is stored sequentially in memory
  • Most formats use the convention that the pixel data is stored row-wise

Skeleton of an own raster graphics class in Java:

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;

Skeleton of an own raster graphics class in C++:

template<typename T> class RasterImage {
    unsigned imageWidth;
    unsigned imageHeight;
    T* imageData;
    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;

Java BufferedImage

MyPaintPanel extends JPanel {
  private BufferedImage img = null;
  public void createGUI() {
    try { img = 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:

Advantages of Raster Graphics

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

Disadvantages of Raster Graphics

  • 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

Creating and Editing of Raster Graphics

There are many free and commercial image editing programs:

Storing Raster Graphics

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

Are there any questions?


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)