### 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.

### Notation

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$
$x$-coordinate
$y$-coordinate
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)
$x$-coordinate
$y$-coordinate
triangle
rectangle

### 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);
triangle.closePath();
g2d.fill(triangle);
}

Full source code:
House2D.java

### 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

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
$x$-coordinate
$y$-coordinate
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 {
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;
}
...
};


### Java BufferedImage

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

### 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