Tfe

Ongi etorri tfe-ren webgunera...

2015-01-01-ean

SVG Polygon circle animation

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
";

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"

Tags: Web JAVASCRIPT