Home | Lehre | Videos | Texte | Vorträge | Software | Person | Impressum, Datenschutzerklärung | Blog

Vector Graphics

Idea

Do not store a bitmap of pixels but store the commands required to draw the image. In other words, don't send the cake, but send the recipe instead.

• This takes up less disk space or network bandwidth than a bitmap for most drawings and similar imagery, excluding photographs.

• The resolution can be changed continuously; zooming in doesn't lead to jaggies or blurriness.

• This is not suited for photographic imagery. Photographs can be embedded, though.

Types

The classical kind of vector graphics is an EPS (Encapsulated PostScript) file: It contains a program creating the drawing, expressed in Adobe's printer-oriented programming language PostScript. Such files may be stored using a space-saving binary encoding or they may be stored as plain text. In the latter case, they can be edited with a standard text editor, see the example given. PostScript is a full-fledged programming language with a "postfix" notation [German term: UPN, umgekehrte polnische Notation] that is uncommon today, but very efficient to read (for the computer, not for the programmer). PostScript can be interpreted (= rendered to a bitmap) by all high-end computer printers. On top of that, it can be interpreted by software such as Adobe Photoshop or Ghostscript/GSview. The AI file format of Adobe Illustrator is related to EPS.

Demo: hand-written EPS displayed in GSview

Adobe PDF (Portable Document Format) is a sort of light-weight EPS. Initially, it offered no programmability. In the meantime, however, it has been equipped with Web links, forms, and even a 3D rendering engine.

Microsoft also offers vector formats that directly record Windows drawing commands: WMF (Windows metafile), EMF (Enhanced Metafile), and EMF+, with the different types reflecting the evolution of Windows' graphics capabilities. You may record commands into a metafile using standard graphics commands, and you can look at the recorded commands and draw them as well. However, the Metafile.Save member function will only save a PNG bitmap disguised as a metafile.

Demo: drawing into a EMF file with GDI+.

Microsoft XPS (XML Paper Specification), a part of WPF, is aimed at offering an alternative to Adobe PDF. One possibly decisive difference to PDF is that XPS comes with a free official toolkit for application developers, which supports both reading and writing.

Demo: drawing into an XPS file with WPS, see 1 and 2

Adobe (ex Macromedia) Flash started out as a proprietary system to create and render interactive and animated vector graphics. Through a number of generations, it has gained a full-fleged programming language as well.

SVG is an open XML-based language for interactive and animated vector graphics, once embraced and now abandoned by Adobe. Particularly remarkable is the free editor Inkscape.

Primitives

Not every vector graphics file format can store any type of drawing command. Color gradients (in particular, freely shaped ones) and transparency effects have to be simulated or to be discarded for saving in PostScript 1 or WMF, for instance.

The universal primitives that are available in every standard are:

• Lines,

• Bézier curves,

• Filled polygons,

• Filled closed Bézier curves,

• Typeface characters,

• (Embedded) bitmaps,

• (Embedded) vector graphics of the same type

Cubic Curves

• Curves as a versatile geometric primitive

  • Fixed shapes / parametrized shapes / free-form shapes

  • Cubic curves

  • Intuitive control of cubic curves? Not easily: demo with OpenOffice spreadsheet.

• Hermite curves

  • A special way of representing cubic curves

  • Defined by start point, end point, initial and final velocity vector

  • p(t) = p₀(2t³-3t²+1) + v₀(t³-2t²+t) + v₁(t³-t²) + p₁(-2t³+3t²) for t in [0,1]

  • Demo with OpenOffice spreadsheet

• Bézier curves

  • Another special way of representing cubic curves

  • Defined by start point, end point, and two intermediate points that act like magnets

  • p(t) = p₀(1-t)³ + p₁3(1-t)²t + p₂3(1-t)t² + p₃t³ for t in [0,1]

  • Curve starts tangent to p₁-p₀ and ends tangent to p₃-p₂

  • Demo with OpenOffice spreadsheet, Inkscape, and Cinema 4D

  • GDI+ in .NET: DrawBezier

• Curves formed by joining several cubic segments

  • Geometric (dis-)continuity

  • GDI+ in .NET: DrawBeziers

  • Catmull-Rom splines

  • Given: a sequence of points to be converted

  • Objective: Compute a sequence of Hermite curves interpolating those points

  • Solution: It remains to define the velocity vectors of the Hermite representation. For the start point and the end point choose the difference vector between this point and its neighbor. For each other (i.e., interior) point choose half the difference vector between the preceding point and the next point.

  • GDI+ in .NET: DrawCurve

• B-Spline ("basic spline") curves

  • Approximating, not interpolating

  • Typically cubic

  • No joining of segments needed; smoother result

  • B-spline curves and surfaces, demo with Cinema 4D and Maya

  • NURBS curves and surfaces with weight editing, demo with Blender

  • Spline curves for animation, demo with Cinema 4D