Building Web Applications with SVG - Cdn.oreilly.com

■■ The movement of the mountains The foreground layers are simply shifted leftward more
quickly than the layers in the back. Each array has its first element removed so that another
random element can be added onto the end of the array without the array becoming arbitrarily
large. Any memory of what has happened is systematically purged.
example 2: equidistant positioning points along a Bézier Curve
The mathematics of Bézier curves, while quite accessible to a mathematician, are not trivial. Bézier
curves were, after all, not discovered until 1959 (see http://en.wikipedia.org/wiki/B%C3%A9zier_curve),
130 years after Évariste Galois resolved the theory of roots of polynomials and laid the foundation for
much of the algebra of the 19th and 20th centuries. Fortunately, SVG (following the lead of Adobe
Illustrator 88) gives direct and intuitive access to these wonderfully expressive curves in terms of
the ability to draw, measure, subdivide, orient, and animate them. In this example (visible at http://
srufaculty.sru.edu/david.dailey/svg/curve.svg), the curve is drawn with a simple set of markup commands,
and each time the user clicks the curve or near it, JavaScript is used to measure the curve
and divide it into an increasingly larger number of parts, with the option of animating the process
ultimately being offered to the user.
Here’s how it’s done:
■■ Drawing the curve The markup used is quite simple:
Note The drawing of SVG paths is one of the most powerful and expressive aspects
of the language; it’s covered in Chapter 2.
■
■ Measuring and subdividing the curve The JavaScript language binding of SVG allows you
to interrogate properties of things that have been drawn either through markup or dynamically,
and to manipulate them using methods. In this case, we are using two function calls:
L = B.getTotalLength(); and P = B.getPointAtLength(L * i / n);. The first measures the path, B,
and returns a numeric value; the second returns a point (an object with both x and y values)
a given fraction of the distance along B. Script is then used to create new ellipses of different
colors at those fractional mileposts.
8 Building Web Applications with SVG