#
Graphics Programming

2D Objects: Vector and Raster Graphics

Thorsten Thormählen

October 23, 2023

Part 3, Chapter 1

2D Objects: Vector and Raster Graphics

Thorsten Thormählen

October 23, 2023

Part 3, Chapter 1

This is the print version of the slides.

Advance slides with the → key or

by clicking on the right border of the slide

→ 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

← 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$ |

- 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

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

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

- 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

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*

There are many free and commercial image editing programs:

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