Wondered how the heck vector curves work? Here’s a break down of the mechanics of vector graphics!
Vector graphics deal with a very different method of drawing and ‘sculpting’ line than raster graphics do. While understanding the math behind it all isn’t essential, grasping the reason curves behave the way they do will solidify your oneness with line (or something spiritual!). Curves are a beautiful and complex occurrence in nature, so it won’t come as s surprise that teaching a dinosaur of a computer to make them isn’t exactly the easiest thing in the world.
It’s pretty fancy pants and is filled with stacks of maths which isn’t the kindest thing, but I’ve gathered together some information that might help to explain why your pen tool ‘freaks out’ and makes you want to punch a hole in your monitor.
Sweet Splines
Splines (or paths) are the heart and soul of vector graphics. A path is a series of placed points which define a curve. They much different to raster graphics, which are defined by a grid of pixels. For this reason, vector graphics are much lighter, because they are optimised and interpolated from a smaller data set to begin with.
There are many types of spline to deal with, though they are all based upon point to curve optimisation. They are defined by polynomial equations, and are an approximation used to curve fit. The higher the order (or index) of the polynomial, the more accurate, but heavier the spline is.
While they are handy for approximating lines, they can sometimes produce problems in shaping when dealing with large clusters of points. For this reason, we have a range of splines available that have their own uses within different areas of computer graphics.
6 common types of spline
B-splines
A working example, or go here for some of the math.
B-splines are most common in 3d graphics as the system for drawing curves on a 2 dimensional surface. They are naturally smoothed from automatic continuity control, but as a result form a heavy approximation of results for open curves. This means that they are smoother, but not always the most accurate.The solution to this is obviously the addition of extra points to further describe the curve. They function much like the line sculpting arrow tools in Adobe Flash.
Non uniform B-Splines
These splines are approximations of Bezier curves. They are much like B-splines, but allow for additional points to be added to distort the direction of a curve. This results in the ability to remove the symmetry from a curve and make it non uniform. It’s often seen within audio mastering software such as Logic or ProTools as a tool to envelope and approximate wave forms smoothly.
Non uniform rational B-Splines (NURBS)
Most people in 3d graphics would have come across NURBS for modeling at some point. Whilst polygonal modeling is based upon the linear placement of vertexes, edges and resulting planes; NURBS define curves in surfaces with a simplistic base mesh. Even polyagonal models rely on an interpolation similar to NURBS for pre render smoothing.
They function in the same was as Non uniform B-Splines, except they also come with the benifit of rational control. These curves allow additional points to be added to ‘weight’ the direction of a curve. These weights are referred to as rational.
You can deal with local control, which means that you can reposition the points whilst preserving the remainder of the curve (which is usually closed).
Bezier Splines
Play with a bezier generator
Bezier splines are most commonly fitted with quadratic interpolation. Being lightweight, they are controllable by two handles, which can be weighted to influence the symmetry of the curve in relation to length. While each handle carries more data, they are able to interpolate end segments in unison meaning the path can close, smoothing locally. This is the type of spline we interact with in Adobe Photoshop, Illustrator and most other graphic design packages.
Hermite Splines
These splines require tangent control, rather than purely smoothed point to point interpolation. Whilst the handles are uniform, the direction (and velocity) they describe can be shaped in the same way as other splines. They are most commonly applied in animation, for smooth camera work and broad movement. The interpolation between the points rely on the smoothing of the tangents.
Catmull-Rom splines
Work upon the first degree of continuity. Each point is intersected by the curve, providing absolute and local control. The tangents remain symmetrical, meaning that the spline requires more points to define asymmetries in curve definition. Incidentally, the spline is named after Ed Catmull of Pixar Animation Studios.
So after all of that, you should be able to see that there is a multitude of ways to interpolate curves, yielding different results in varying applications. I don’t even know why I wrote this, but I guess it’s nice to dump those collected ideas somewhere! Read it, hit those demos, and hopefully it helps to demystify the behavior of those pesky paths you deal with in computer graphics!
