TfeServer

Blog de tfe, Perl, Web et Libre...?

SVG Polygon circle animation

PubliƩ le 28/01/2016 dans Web

Je pose ici un petit script que je viens de creer pour animer un point d'un polygone SVG, qui parcourt un cercle.

Notez que ce script a quelques parametres:

  • $svg: contient les points du polygone initial
  • $move_dot_number: le point a deplacer (1: premier point)
  • $num_dots_to_generate: nombre de points a generer. Plus le nombre est important, moins l'animation sera sacadee)
  • $radius: taille du cercle parcouru
#!/usr/bin/perl -w
use Math::Trig;
#
#

my $i;
my $svg = "20,20 20,40 40,40 40,20";
my $move_dot_number = 3;
my $num_dots_to_generate = 60;
my $radius = 3;


my $regex_x = "";
for($i=1; $i<$move_dot_number; $i++)
{
    $regex_x .= "[\\d\\.]+,[\\d\\.]+ ";
}
my $regex_y = $regex_x;


my $get_x = "^$regex_x([\\d\\.]+)";
$regex_x = "^($regex_x)[\\d\\.]+";

my $get_y = "^".$regex_y."[\\d\\.]+,([\\d\\.]+)";
$regex_y = "^(".$regex_y."[\\d\\.]+,)[\\d\\.]+";

my ($center_x) = ($svg=~ /$get_x/);
my ($center_y) = ($svg=~ /$get_y/);
print "CENTER $center_x / $center_y\n";

my @values=();
my @values2=();

my $angle=0;
my $temp_value=0;

$num=0;
while($angle<360)
{
    my $dup_svg = $svg;

    my $x = $center_x +  $radius * cos($angle);
    $x=~ s/(\.\d{4}).*/$1/g;
    my $y = $center_y +  $radius * sin($angle);
    $y=~ s/(\.\d{4}).*/$1/g;

    $dup_svg =~ s/$regex_x/$1$x/;
    $dup_svg =~ s/$regex_y/$1$y/;

    $angle+=360 / $num_dots_to_generate;

    push(@values, $dup_svg);

    $temp_value= $num/($num_dots_to_generate-1);
    $temp_value=~ s/(\.\d{4}).*/$1/;
    push(@values2, $temp_value);
    $num++;
}


print "
    <animate
        id=\"to-right\"
        fill=\"freeze\"
        attributeName=\"points\"
        dur=\"10s\"
        values=\"".join(";",@values)."\"
        keyTimes=\"".join(";",@values2)."\"
        repeatCount=\"indefinite\" />
";