Steuerungstasten

nächste Folie (auch Enter oder Spacebar).
vorherige Folie
 d  schaltet das Zeichnen auf Folien ein/aus
 p  wechselt zwischen Druck- und Präsentationsansicht
CTRL  +  vergrößert die Folien
CTRL  -  verkleinert die Folien
CTRL  0  setzt die Größenänderung zurück

Das Weiterschalten der Folien kann ebenfalls durch das Klicken auf den rechten bzw. linken Folienrand erfolgen.

Notation

Typ Schriftart Beispiele
Variablen (Skalare) kursiv $a, b, x, y$
Funktionen aufrecht $\mathrm{f}, \mathrm{g}(x), \mathrm{max}(x)$
Vektoren fett, Elemente zeilenweise $\mathbf{a}, \mathbf{b}= \begin{pmatrix}x\\y\end{pmatrix} = (x, y)^\top,$ $\mathbf{B}=(x, y, z)^\top$
Matrizen Schreibmaschine $\mathtt{A}, \mathtt{B}= \begin{bmatrix}a & b\\c & d\end{bmatrix}$
Mengen kalligrafisch $\mathcal{A}, B=\{a, b\}, b \in \mathcal{B}$
Zahlenbereiche, Koordinatenräume doppelt gestrichen $\mathbb{N}, \mathbb{Z}, \mathbb{R}^2, \mathbb{R}^3$

Vektorgrafik

Mathematische Repräsentation von Koordinaten

  • Wenn Koordinaten von 2D- oder 3D-Formen in der Computergrafik mathematisch definiert werden, geschieht dies idealerweise durch reelle Zahlen (die im Computer als Gleitkommazahl repräsentiert werden)
  • Beispiel: Ein Punkt in einem 2D-Koordinatensystem kann durch zwei reelle Zahlen $x=4.5$ und $y=2.33$ definiert werden
xyplane
$x$-Koordinate
$y$-Koordinate
Punkt $\mathbf{p}$

Vektorgrafik

  • Eine Repräsentation von 2D- oder 3D-Formen mit reellen Koordinaten wird als Vektorgrafik bezeichnet
  • Der Begriff ergibt sich daraus, dass die Koordinaten als Vektoren geschrieben werden können
  • Für einen Punkt $\mathbf{p}$ in einem 2D-Koordinatensystem beispielsweise

    $\mathbf{p}=\begin{pmatrix} x\\y\end{pmatrix} = \begin{pmatrix} 4.5\\2.33\end{pmatrix}$

Vektorgrafik

  • In der Vektorgrafik werden die Objekte durch Kombination von Basisobjekten (wie z.B. Linie, Rechteck, Kreis, Dreieck, Polygon) beschrieben
vectordraw
$x$-Koordinate
$y$-Koordinate
Dreieck
Rechteck

Vektorgrafik

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

Vollständiger Quelltext:
House2D.java

Vektorgrafik

  • Eine Repräsentation als Vektorgrafik hat den Vorteil, dass die Objekte beliebig vergrößert oder verkleinert werden können
  • Ein analoger Plotter beispielsweise kann die Koordinaten genau anfahren und so ein sehr genaues Abbild der Formen zeichnen
worldmapfull
Weltkarte
worldmapdetail
Ausschnittsvergrößerung

Interaktive Demonstration: Vektorgrafik

your browser does not support SVG

Größenänderung: 100%:

Quelle: Johnny Automatic, Robot Dog, Public Domain

Erstellen von Vektorgrafiken

Zum Erstellen von 2D-Vektorgrafiken gibt es zahlreiche freie und kommerzielle Programme:

Speichern von Vektorgrafiken

Beliebte Dateiformate zum Speichern von 2D-Vektorgrafiken sind:

Rastergrafik

Rastergrafik

  • Die heutigen Bildschirme stellen einzelne Bildelemente dar (Pixel="Picture Elements"), die auf einem festen Raster angeordnet sind
  • Drucker mit linearem Papiervorschub (keine Plotter) tragen Farbe ebenfalls mit diskreten Punktrastern auf
  • Rastergrafiken besitzen einen Farbwert für jedes Pixel ihres Rasters. Sie sind daher vollständig definiert durch:
    • Bildbreite: Anzahl der Pixel in x-Richtung
    • Bildhöhe: Anzahl der Pixel in y-Richtung
    • und einem Datenfeld mit (Breite x Höhe) Farbwerten

Rastergrafik

  • Hier ein Beispiel für eine Rastergrafik mit 9 x 6 Pixeln (Zählung beginnt bei 0)
  • Im Folgenden wird angenommen, dass das Pixelraster durch die Mitte der Pixelfläche verläuft
pixeldraw
$x$-Koordinate
$y$-Koordinate
Pixelfläche
Pixelraster
Außenkante der Rastergrafik

Rastergrafik

  • Digitale Bilder sind typische Beispiele für eine Rastergrafik
  • Bilddaten von realen Objekten werden z.B. mit einer Digitalkamera mit lichtempfindlichen Pixelflächen erfasst
    • 1280 × 1024 (1,3 Megapixel)
    • 2560 × 2048 (5,2 Megapixel)
    • 5120 × 4096 (21 Megapixel)
  • Typische Konventionen bei Rastergrafiken:
    • Zählung der Pixel beginnt bei 0
    • $x$-Koordinatenachse nach rechts
    • $y$-Koordinatennachse nach unten

Rastergrafik

  • Sehr häufig wird pro Pixel ein RGB-Farbwert (Rot, Grün, Blau) abgelegt (oder RGBA-Wert, wobei der zusätzliche Alpha-Wert die Opazität angibt)
  • RGB-Farbraum:
  • Die Pixel-Daten werden sequenziell im Speicher abgelegt
  • Dabei verwenden die meisten Formate die Konvention, dass die Daten zeilenweise abgelegt werden

Grundgerüst einer eigenen Rastergrafik-Klasse 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;
  }
  ...
};

Grundgerüst einer eigenen Rastergrafik-Klasse 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

class MyGui extends JFrame {
  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) {
    Graphics2D g2d = (Graphics2D) g; // cast to Graphics2D
    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);
  }
}

Quelltext des Beispiels: MyBufferedImage.java

Vorteile Rastergrafik

  • Sehr geeignet für komplexe Szenen mit unregelmäßigen Formen oder vielen Farben
  • Speicherbedarf ist unabhängig von der Szenenkomplexität
  • Direkte Darstellung auf heutigen Bildschirmen

Nachteile Rastergrafik

  • Bei der Darstellung sehr einfacher Objekte ist der Speicherbedarf im Vergleich zu einer Vektorgrafik höher
  • Bei starker Vergrößerung werden einzelne Pixel erkennbar
  • Dieser Effekt wird auch Treppeneffekt oder Aliasing genannt
worldmapdetailpixel
Ausschnittsvergrößerung Vektorgrafik
worldmapdetail
Ausschnittsvergrößerung Rastergrafik

Erstellen und Bearbeiten von Rastergrafiken

Es gibt zahlreiche freie und kommerzielle Bildbearbeitungsprogramme:

Speichern von Rastergrafiken

Beliebte Dateiformate für Rastergrafiken sind:

  • PNG (Portable Network Graphics), verlustfreie Kompression
  • JPEG, kleinere Dateien, da verlustbehaftete Kompression
  • TIFF (Tagged Image File Format), typischerweise verlustfreie Kompression, hohe Farbtiefe (bis 32 bit)
  • TGA (Targa Image File), unkomprimiert oder verlustfreie Kompression
  • GIF (Graphics Interchange Format), verlustfreie Kompression, erlaubt Animationssequenzen

Gibt es Fragen?

questions

Anregungen oder Verbesserungsvorschläge können auch gerne per E-mail an mich gesendet werden: Kontakt

Weitere Vorlesungsfolien

Folien auf Englisch (Slides in English)