Perl Graphics Programming

Creating a Bouncing Ball

The example in this section creates a simple bouncing ball. We use the XML::Writer module to create the SVG output. The make_bounce_path( ) function returns a properly formatted path data string. The $ground variable indicates the y coordinate of the “ground line” off which the ball bounces. The bounce path follows the positive part of a sine wave.

Here’s the first part of the code:

#!/usr/bin/perl -w
# The bouncing ball.

use strict;
use XML::Writer;    # Used to write the SVG output

my ($width, $height) = (300, 300);

my $writer = XML::Writer->new( );
$writer->setDataMode(1);     # Auto insert newlines
$writer->setDataIndent(2);   # Auto indent
$writer->startTag('svg',
                  height => $height,
                  width  => $width,
                  'xmlns:xlink' => 'http://www.w3.org/1999/Xlink');

The circle is in the <circle></circle> format (rather than as an empty tag). It contains two animation tags. The <animateMotion> tag causes the circle to move along a path. The <animate> tag causes the radius of the ball to be increased over the course of the animation.

$writer->startTag('circle',
                  id => 'ball',
                  r => 10,
                  fill   => '#FF0000');
$writer->emptyTag('animateMotion',
                  calcMode=> 'spline',
  dur => "10s",
  path => make_bounce_path(300, 200, 4),
  repeatCount => "indefinite");
$writer->emptyTag('animate',
                  attributeName => "r",
                  from => 10,
                  to => 50,
                  dur  => "10s",
                  repeatCount => "indefinite"
                 );
$writer->endTag('circle');
$writer->endTag('svg');

The make_bounce_path( ) function returns a properly formatted SVG path data string. ...