In this post I'll continue my series on how create objects for Box2D using an SVG file created in a drawing program like Inkscape. In Part 1 I covered how to load the SVG file into Java. Before I explain how to extract the path data from the SVG file it's necessary to know how we are going to use this data to construct our paths. SVG paths can contain a number of different types of line: straight, quadratic bezier, cubic bezier and arc. In this tutorial I'm going to cover straight, quadratic bezier and cubic bezier lines.
A bezier curve is a curve defined by a cubic polynomial. The maths is pretty complicated but luckily it's quite easy to construct bezier curves geometrically.
Cubic bezier
A cubic bezier is a curve defined by it's start point P0, it's end point P3 and two control points. The control points P1, P2 define the gradient at the start and end of the line.
Quadratic bezier
A quadratic bezier is just a cubic bezier curve where control points P1 and P2 inhabit the same location.
Straight line
A straight line is just a cubic bezier curve where the control points P1 and P2 lie on the start and end points P0 and P3.
Constructing the line
From this analysis it can be seen that if we can draw a cubic bezier curve we can by definition use the same code to draw quadratic beziers and straight lines.
The diagram above shows how a cubic bezier curve can be constructed geometrically. We start out with a curve defined by two points and two control points P0 with control point P1 and P3 with control point (cp) P2. By performing a number of bisections we can find a new point on our line P0123. With this point we can split out bezier curve into two curves.
- Curve 1: P0 [cp: P01] -> P0123 [cp: P012]
- Curve 2: P0123 [cp: P123] -> P3 [P23]
Now we can repeat the process to find the mid point of these curves etc.. Using this technique we can find the bezier curve to any level of accuracy. To get a greater accuracy we just perform more bisections and generate more points.