SVGViewTests/w3c/1.2T/svg/animate-elem-204-t.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" xml:id="svg-root" width="100%" height="100%"
  viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xe="http://www.w3.org/2001/xml-events">
  <!--======================================================================-->
  <!--=  Copyright 2008 World Wide Web Consortium, (Massachusetts          =-->
  <!--=  Institute of Technology, European Research Consortium for         =-->
  <!--=  Informatics and Mathematics (ERCIM), Keio University).            =-->
  <!--=  All Rights Reserved.                                              =-->
  <!--=  See http://www.w3.org/Consortium/Legal/.                          =-->
  <!--======================================================================-->
  <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/"
    reviewer="AS" owner="DOH" desc="Advanced test for discrete animateMotion using keyPoints" status="created"
    approved="no"
    version="$Revision: 1.4 $" testname="$RCSfile: animate-elem-204-t.svg,v $">
    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
      <p>
        Precision test for discrete animateMotion with separated path fragments,
        mpath element, keyPoints, rotate=angle.
      </p>
      <p>
        The main indication for a failed test is the appearence of the red fill
        of the markers or the red comparison. The circle has to jump exactly
        to the next marker,
        which is lightened for the time, the circle is above.
      </p>
      <p>
        A discrete animateMotion with keyPoints of a blue stroked square with a centered
        circle is compared with a values animateMotion of a red square
        with a centered circle.
        The motion of the red square is the same as the motion of
        the blue square, because the timing is choosen in such a way.
        Therefore the blue square covers always the red one
        completely.
      </p>
      <p>
        The path is given in gray. The red fill of the circle
        is always covered with the gray path.
        Eight gray stroked markers are lightened, when the circle
        is exactly above the marker. The red fill of the marker
        is exactly covered by the blue stroked circle.
        If something red gets visible, an error is occured
        and the animateMotion is wrong.
      </p>
      <p>
        The exact timing is calculated using an analytical
        integration of the path length of the sub paths
        (this is available for quadratic or linear curves).
        With this method the path position  can be
        determined as function of the usual
        parametrisation of the used B&#233;zier curves.
      </p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: animate-elem-204-t.svg,v $</title>
  <defs>
    <font-face
      font-family="SVGFreeSansASCII"
      unicode-range="U+0-7F">
      <font-face-src>
        <font-face-uri xlink:href="../images/SVGFreeSans.svg#ascii"/>
      </font-face-src>
    </font-face>
  </defs>
  <g xml:id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
    <defs>
      <path xml:id="path01" d="M100 100c1,1 495,495 500,500M90,900c540,0 810,-270  810,-810M200,800q0,-600 600,-600M600,600q-499.9,-499.9 -500,-500" />
      <!-- the following paths are related to the single path fragments of path01:
<path xml:id="path02" d="M100 100L600,600" />
   pathLength 500*sqrt(2) = 707.106781187
   
<path xml:id="path03" d="M90,900Q900,900 900,90" />
                                            i               p          f
c(u)=(1 - u)^2 i + 2u(1-u) p + u^2 f

dc/du= 2(u-1) i + 2(1 -2u) p + 2u f
         = (2(p-i) + 2u(i+f -2p))^2

(1): (dc/cu)^2 =  4 (i+f -2p)^2 u^2 + 8(p-i)(i+f-2p)u + 4 (p - i)^2
          
                     add  components ... 
         m        =      e   (  a u^2                 +       b u              +     c )
      for symmetry reasons with numbers:
        m  = 1620^2 (2 u^2 -2 u + 1)
        h = m/e = 2 u^2 -2 u + 1
             d = 4ac - b^2
             numbers:  8 - 4 = 4 = d
             k = 4a/d
             numbers: k = 8/4 = 2

integral... 0 to u <=1
       (2au+b)sqrt(h)/4a + 1/(2k) g
       
       g = 1/sqrt(a) ln(2sqrt(ah) + 2au +b)    
                               
(2) 0: b/(4a) sqrt(c) +d/(8a sqrt(a))  ln(2sqrt(ac) +b)
(3) 1: (2a+b)sqrt(a+b+c)/4a +d/(8a sqrt(a)) ln (2sqrt(a(a+b+c))+2a +b)
numbers:
-1/4 + 1/(4sqrt(2)) ln(2sqrt(2) -2)
1/4 + 1/(4sqrt(2))  ln(2sqrt(2) +2)
result = 1/2 + 1/(4sqrt(2)) (ln(2sqrt(2) +2) - ln(2sqrt(2) -2)) =
             1/2 + 1/(4sqrt(2)) ln((sqrt(2) +1)/(sqrt(2) -1))) =
             1/2 + 1/(4sqrt(2)) ln(3+2sqrt(2)) =
             0.81161262
therefore  pathLength = 1620*0.81161262 = 1314.812444514


integral 0 to u <=1
(2u-1)/4 sqrt(2 u^2 -2 u + 1) + 1/(4sqrt(2)) ln (2sqrt(4u^2 -4u +2) +4u -2)
+ 1/4 - 1/(4sqrt(2)) ln(2sqrt(2) -2) =
(2u-1)/4 sqrt(2 u^2 -2 u + 1) + 1/4 + 1/(4sqrt(2)) ln ((sqrt(4u^2 -4u +2) +2u -1)/(sqrt(2) -1))


<path xml:id="path04" d="M200,800Q200,200 800,200" />
                                                i            p             f
c(u)=(1 - u)^2 i + 2u(1-u) p + u^2 f

dc/du= 2(u-1) i + 2(1 -2u) p + 2u f
         = (2(p-i) + 2u(i+f -2p))^2

(1): (dc/cu)^2 =  4 (i+f -2p)^2 u^2 + 8(p-i)(i+f-2p)u + 4 (p - i)^2

x:  1200^2 u^2
y:  1200^2 u^2 + 2 * 1200^2 u + 1200^2

     for symmetry reasons with numbers:
        m  = 1200^2 (2 u^2 -2 u + 1)
        h = m/1200^2 = 2 u^2 -2 u + 1
therefore  pathLength = 1200*0.81161262 = 973.935144084;

<path xml:id="path05" d="M600 600L100,100" />


pathLength path01 = 3702.961151072
fraction path02/path01 = 0.190957116 (the same for the last path fragment)
fraction path03/path01 = 0.355070548
fraction path04/path01 = 0.263015221

fraction (path02+path03)/path01 = 0.546027664
fraction (path02+path03+path04)/path01 = 0.809042885


c(0.1)=(1 - u)^2 i + 2u(1-u) p + u^2 f
      =  0.81 (a,b) + 0.18 (b,b) + 0.01 (b,a)
      = (0.81a +0.19b, 0.99b + 0.01a)
      = (243.9, 891.9)

      
integral... 0 to u <=0.1
       h= 2 u^2 -2 u + 1 = 0.02-0.2 +1 = 0.82
       (2u-1)sqrt(h)/4 + 1/4 g
         -0.181107703   -0.006986405
       g = 1/sqrt(2) ln(2sqrt(2h) + 4u -2)    
              -0.02794562
0:      -1/4 + 1/(4sqrt(2)) ln(2sqrt(2) -2) = -0.283274042
0.1:   -0.188094108
0.095179934/0.81161262

path fraction:
0.421173612/0.81161262 = 0.117272615

        
c(0.5) = 0.25 (a,b) + 0.5 (b,b) + 0.25 (b,a)
              (0.25 a + 0.75 b, 0.25 a + 0.75 b)
               (697.5, 697.5)      
 

c(0.9)=(1 - u)^2 i + 2u(1-u) p + u^2 f      
      = 0.01 (a,b) + 0.18 (b,b) + 0.81 (b,a)
      = (0.01a + 0.99b, 0.19b + 0.81a)
      = (891.9, 243.9)

  
0 u path04 -  50s   
0.1u path04
...  0.81 (b,a) + 0.18 (b,b) + 0.01 (a,b)
     (0.99b + 0.01a,0.81a + 0.19b)
     (206, 686)
     

0.5u path04
     (350,350)
     
 
0.9u path04
     (686,206)


-->
    </defs>

    <rect x="0" y="0" width="480" height="360" fill="#fff" />
    <g transform="translate(90,-28) scale(0.4) rotate(90 500 500)">
      <g fill="none" stroke-width="40" stroke="#666">
        <title>marker</title>
        <circle cx="150" cy="150" r="35"/>
        <circle cx="350" cy="350" r="35"/>
        <circle cx="550" cy="550" r="35"/>
        <circle cx="243.9" cy="891.9" r="35"/>
        <circle cy="243.9" cx="891.9" r="35"/>
        <circle cx="697.5" cy="697.5" r="35"/>
        <circle cx="206" cy="686" r="35"/>
        <circle cy="206" cx="686" r="35"/>


        <g fill="#e00" stroke="#aaf">
          <circle cx="150" cy="150" r="49" display="none">
            <set attributeName="display" to="inline" begin="0s" dur="5s" />
            <set attributeName="display" to="inline" begin="55s" dur="5s" />
            <set attributeName="display" to="inline" begin="70s" dur="5s" />
            <set attributeName="display" to="inline" begin="85s" dur="5s" />

          </circle>
          <circle cx="350" cy="350" r="49" display="none">
            <set attributeName="display" to="inline" begin="5s" dur="5s" />
            <set attributeName="display" to="inline" begin="35s" dur="5s" />
            <set attributeName="display" to="inline" begin="50s" dur="5s" />
            <set attributeName="display" to="inline" begin="60s" dur="5s" />
          </circle>
          <circle cx="550" cy="550" r="49" display="none">
            <set attributeName="display" to="inline" begin="10s" dur="5s" />
            <set attributeName="display" to="inline" begin="45s" dur="5s" />
            <set attributeName="display" to="inline" begin="75s" dur="5s" />
            <set attributeName="display" to="inline" begin="95s" dur="5s" />
          </circle>

          <circle cx="243.9" cy="891.9" r="49" display="none">
            <set attributeName="display" to="inline" begin="15s" dur="5s" />
          </circle>

          <circle cx="697.5" cy="697.5" r="49" display="none">
            <set attributeName="display" to="inline" begin="20s" dur="5s" />
            <set attributeName="display" to="inline" begin="65s" dur="5s" />
          </circle>

          <circle cy="243.9" cx="891.9" r="49" display="none">
            <set attributeName="display" to="inline" begin="25s" dur="5s" />
          </circle>

          <circle cx="206" cy="686" r="49" display="none">
            <set attributeName="display" to="inline" begin="30s" dur="5s" />
            <set attributeName="display" to="inline" begin="80s" dur="5s" />
          </circle>

          <circle cy="206" cx="686" r="49" display="none">
            <set attributeName="display" to="inline" begin="40s" dur="5s" />
            <set attributeName="display" to="inline" begin="90s" dur="5s" />
          </circle>

        </g>
      </g>

      <g>
        <rect x="-50" y="-50" width="100" height="100" fill="none" stroke="#f00" stroke-width="10" />
        <circle cx="0" cy="0" r="30" fill="#f00" />
        <title>red: discrete  values animateMotion</title>
        <animateMotion
         values="150,150;350,350;550,550;   
   243.9,891.9;697.5,697.5;891.9,243.9;
   206,686;350,350;686,206;
   550,550;350,350;150,150;
   350,350;697.5,697.5;150,150;550,550;206,686;150,150;686,206;550,550"
         calcMode="discrete" dur="100s" rotate="-60" fill="freeze" />
      </g>

      <g>
        <rect x="-50" y="-50" width="100" height="100" fill="none" stroke="#00f" stroke-width="10" />
        <circle cx="0" cy="0" r="16" fill="#f00" stroke-width="28" stroke="blue" />
        <title>blue: animateMotion calcMode dicrete using mpath and keyTimes</title>
        <animateMotion dur="100s" calcMode="discrete" fill="freeze" rotate="30"
           keyPoints="
0.0191;
0.0955;
0.1719;
0.2265;
0.3685;
0.5105;
0.5723;
0.6775;
0.7827;
0.8281;
0.9045;
0.9809;
0.6775;
0.3685;
0.0191;
0.8281;
0.5723;
0.9809;
0.7827;
0.1719"
keyTimes="
0;
0.05;
0.1;
0.15;
0.2;
0.25;
0.3;
0.35;
0.4;
0.45;
0.5;
0.55;
0.6;
0.65;
0.7;
0.75;
0.8;
0.85;
0.9;
0.95"
>
          <mpath xlink:href="#path01" />
        </animateMotion>
      </g>

      <use xlink:href="#path01" fill="none"  stroke-width="4" stroke="#ccc" stroke-linecap="round" />


    </g>


    <g font-size="12" stroke="none" fill="#ccc">
      <text x="10" y="160">animateMotion</text>
      <text x="10" y="180">keyPoints</text>
      <text x="10" y="195">calcMode discrete</text>
      <text x="10" y="225">red = wrong</text>
      <text x="10" y="245">no animation = wrong</text>
      <text x="10" y="265">circle not centered</text>
      <text x="10" y="280">on markers = wrong</text>
      <text x="10" y="300">timing = lightened markers</text>
    </g>

  </g>
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
    <text xml:id="revision" x="10" y="340" stroke="none"
      fill="black">$Revision: 1.4 $</text>
  </g>
  <rect xml:id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
  <!-- comment out this watermark once the test is approved -->
  <g xml:id="draft-watermark">
    <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
    <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"
      text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
  </g>
</svg>