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. ...
Get Perl Graphics Programming now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.