dimanche 26 novembre 2023

My php code should move through the picture but it doesn't... what am I doing wrong?

I have a big crisis with a php code, which I am concerned, that the code should be right, but when I run it on an php reader, the animation isn't working... maybe someone knows, what I did wrong.

What I am trying to archive: A php code for a 10 px circle which is moving through a black background. It should move for 72 seconds and every 6th second it should arrange at a certain point (specified at the position text).. In between these certain positions, the circle should move for 6 seconds randomly through the picture.

That's the php code I'm trying to make work, but unfortunately it isn't :/

<?php
// set header to get svg
header('Content-Type: image/svg+xml');

// start svg document
echo '<?xml version="1.0" encoding="UTF-8" standalone="no"?>';
echo '<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">';

echo '<rect width="100%" height="100%" stroke="black" />';

// gt circle
echo '<circle cx="0" cy="20" r="5" fill="white">';

// get animation path
echo '<animateMotion dur="72s" repeatCount="indefinite" keyPoints="0;0.0833;0.1667;0.25;0.3333;0.4167;0.5;0.5833;0.6667;0.75;0.8333;0.9167;1" keyTimes="0;0.0833;0.1667;0.25;0.3333;0.4167;0.5;0.5833;0.6667;0.75;0.8333;0.9167;1">';
echo '<mpath href="#motionPath"/>';
echo '</animateMotion>';

echo '</circle>';

// get path for movement
echo '<path id="motionPath" fill="none" stroke="none" d="M0 20 ';

// get positions with random movements
$positions = array(
    array(300, 30),
    array(412.6, 235),
    array(200, 300),
    array(412.6, 365),
    array(300, 170),
    array(300, 500),
    array(300, 240),
    array(157.1, 382.5),
    array(300, 65),
    array(217.7, 252.5),
    array(300, 65),
    array(300, 205)
);

// random amount of movements (4-7)
for ($i = 0; $i < count($positions) - 1; $i++) {
    list($x1, $y1) = $positions[$i];
    list($x2, $y2) = $positions[$i + 1];

    $numMovements = rand(4, 7);

    for ($j = 0; $j < $numMovements; $j++) {
        $dx = ($x2 - $x1) / $numMovements;
        $dy = ($y2 - $y1) / $numMovements;
        $x1 += $dx;
        $y1 += $dy;

        echo "$x1 $y1 ";
    }
}

echo '" />';

// close svg-document
echo '</svg>';
?>



Aucun commentaire:

Enregistrer un commentaire