figures/rabbit.html

   1 <html>
   2 <head>
   3         <title>Webby Rabbit</title>
   4
   5 <script type="text/javascript">
   6         var original;
   7         function load()
   8         {
   9                 original = document.getElementById("rabbit").cloneNode();
  10                 original.setAttribute("id", "original");
  11         }
  12         function perturbPaths()
  13         {
  14                 var amount = document.getElementById("permute_amount").value;
  15                 var paths = document.getElementsByTagName("path");
  16                 for (var i = 0; i < paths.length; ++i)
  17                 {
  18                         var d = paths[i].getAttribute('d').split(/[\s,]+/);
  19                         var delims = paths[i].getAttribute('d').match(/[\s,]+/g);
  20                         //if (i == 0) alert(d);
  21                         for (var j = 0; j < d.length; ++j)
  22                         {
  23                                 var asfloat = parseFloat(d[j]);
  24                                 if (!isNaN(asfloat))
  25                                 {
  26                                         d[j] = asfloat + 2*amount*(Math.random()-0.5);
  27                                 }
  28                         }
  29
  30                         var result = [];
  31                         for (var j = 0; j < delims.length; ++j)
  32                         {
  33                                 result.push(d[j]);
  34                                 result.push(delims[j]);
  35                         }
  36                         result.push(d[delims.length]);
  37                         //if (i == 0) alert(result.join(""));
  38                         paths[i].setAttribute('d', result.join(""));
  39                 }
  40                 //alert();
  41                 return;
  42
  43         }
  44
  45
  46         function reset()
  47         {
  48                 var rabbit = document.getElementById("rabbit");
  49                 var parent = rabbit.parentNode;
  50                 parent.removeChild(rabbit);
  51                 original.setAttribute("id", "rabbit");
  52                 parent.insertBefore(original, parent.firstChild);
  53                 load();
  54         }
  55
  56 </script>
  57
  58 </head>
  59 <body onload="load();">
  60
  61 <svg
  62    xmlns:dc="http://purl.org/dc/elements/1.1/"
  63    xmlns:cc="http://creativecommons.org/ns#"
  64    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  65    xmlns:svg="http://www.w3.org/2000/svg"
  66    xmlns="http://www.w3.org/2000/svg"
  67    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  68    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  69    width="287.65625"
  70    height="217.625"
  71    id="rabbit"
  72    version="1.1"
  73    inkscape:version="0.48.3.1 r9886"
  74    sodipodi:docname="rabbit_simplified.svg">
  75   <defs
  76      id="defs3247" />
  77   <sodipodi:namedview
  78      id="base"
  79      pagecolor="#ffffff"
  80      bordercolor="#666666"
  81      borderopacity="1.0"
  82      inkscape:pageopacity="0.0"
  83      inkscape:pageshadow="2"
  84      inkscape:zoom="0.9899495"
  85      inkscape:cx="300.49618"
  86      inkscape:cy="184.76819"
  87      inkscape:document-units="px"
  88      inkscape:current-layer="layer1"
  89      showgrid="false"
  90      fit-margin-top="0"
  91      fit-margin-left="0"
  92      fit-margin-right="0"
  93      fit-margin-bottom="0"
  94      inkscape:window-width="1280"
  95      inkscape:window-height="994"
  96      inkscape:window-x="0"
  97      inkscape:window-y="0"
  98      inkscape:window-maximized="1"
  99      showguides="true"
 100      inkscape:guide-bbox="true">
 101     <sodipodi:guide
 102        orientation="0,1"
 103        position="-26.691516,-31.882946"
 104        id="guide4332" />
 105   </sodipodi:namedview>
 106   <metadata
 107      id="metadata3250">
 108     <rdf:RDF>
 109       <cc:Work
 110          rdf:about="">
 111         <dc:format>image/svg+xml</dc:format>
 112         <dc:type
 113            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 114         <dc:title></dc:title>
 115       </cc:Work>
 116     </rdf:RDF>
 117   </metadata>
 118   <g
 119      inkscape:label="Layer 1"
 120      inkscape:groupmode="layer"
 121      id="layer1"
 122      transform="translate(-227.75,-256.03125)">
 123     <path
 124        style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
 125        d="m 478.78564,339.0153 -16.66751,-1.01016 -36.11296,-47.7297 -12.6269,-33.0825 28.53681,17.17259 23.2335,24.4962 10.35407,21.97082 z"
 126        id="path4374"
 127        inkscape:connector-curvature="0" />
 128     <path
 129        style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
 130        d="m 451.25899,350.37951 -51.26524,-30.55711 -27.52666,-37.12311 -0.25254,-6.81853 30.30458,4.29315 23.23351,11.11168 24.74873,26.5165 12.62691,21.71828 z"
 131        id="path4370"
 132        inkscape:connector-curvature="0" />
 133     <path
 134        style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
 135        d="m 285.59397,323.10539 -10.6066,9.09138 -10.10153,27.02158 -17.67767,2.77792 -18.94036,41.66879 1.2627,9.59645 5.55583,2.77792 14.39468,-8.5863 12.12183,-22.47589 13.63706,5.05076 14.14213,8.83884 20.70813,2.0203 14.89975,18.18275 28.53681,14.64721 22.47589,6.56599 14.39468,1.01015 25.25381,31.81981 18.43528,-2.77792 8.33376,-2.27284 -0.50507,-5.55584 -6.06092,-4.29315 -10.10152,-1.51523 -9.09138,-13.63706 0.25254,-5.80838 20.20305,-14.64721 17.67767,-16.66752 12.62691,5.05077 22.72843,-0.25254 8.33376,-9.59645 -3.78807,-1.51523 -10.85914,-1.26269 0.50507,-2.77792 20.45559,-0.75761 7.32361,-15.65737 2.52538,-1.51523 0.25254,-4.29314 -13.8896,-11.8693 -9.26469,-14.67259 -12.70613,-8.05584 -17.17259,-1.26269 -17.67767,10.6066 -12.62691,18.94036 -13.88959,4.04061 -18.43529,-3.78807 -20.96066,-14.14214 -21.46575,-17.67767 -18.68782,-17.67767 -23.99112,-3.28299 z"
 136        id="path4478"
 137        inkscape:connector-curvature="0"
 138        sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccccccccccc" />
 139     <path
 140        style="fill:#ffffff;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
 141        d="m 285.59397,323.61047 -5.55584,-10.85914 1.01016,-8.83883 20.20305,-14.64722 13.38452,0 4.54568,7.32361 -5.3033,18.18274 z"
 142        id="path4368"
 143        inkscape:connector-curvature="0" />
 144     <path
 145        style="fill:#ff5555;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
 146        d="m 452.26914,343.05591 -36.61803,-26.76905 -27.02158,-30.30457 23.23351,4.54568 25.50635,22.4759 20.70813,26.5165 z"
 147        id="path4372"
 148        inkscape:connector-curvature="0" />
 149     <path
 150        style="fill:#ffffff;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 151        d="m 467.61083,370.8351 -0.37881,-10.54346 2.46225,-5.93465 6.88167,0.25254 3.09359,4.79822 -5.42957,3.78808 -0.88389,7.63927 z"
 152        id="path4376"
 153        inkscape:connector-curvature="0" />
 154     <path
 155        style="fill:#008000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 156        d="m 473.41921,371.02451 0.88388,-7.95495 5.36644,-3.53554 0.69448,4.79823 -4.29315,6.31345 z"
 157        id="path4378"
 158        inkscape:connector-curvature="0" />
 159     <path
 160        style="fill:#000000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 161        d="m 476.13399,370.51943 4.41942,-0.50507 -0.31567,-5.30331 z"
 162        id="path4380"
 163        inkscape:connector-curvature="0" />
 164     <path
 165        style="fill:#000000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 166        d="m 463.69649,353.78878 5.4927,-4.9245 8.27063,0.37881 -8.14436,1.19956 -4.35628,3.97747 z"
 167        id="path4382"
 168        inkscape:connector-curvature="0" />
 169     <path
 170        style="fill:#ffb37f;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
 171        d="m 506.61734,377.62066 4.64286,-6.96428 3.21428,2.5 0.35715,5 z"
 172        id="path4384"
 173        inkscape:connector-curvature="0" />
 174     <path
 175        style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
 176        d="m 266.03612,386.66064 -15.71429,29.64285 1.96429,8.03572 8.03571,-1.42857 10.17857,-11.07143 14.28572,-15.71429 z"
 177        id="path4480"
 178        inkscape:connector-curvature="0" />
 179     <path
 180        style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
 181        d="m 428.38818,429.04154 -6.06118,22.62065 -5.01024,-8.51351 0,-5.89285 z"
 182        id="path4482"
 183        inkscape:connector-curvature="0" />
 184     <path
 185        style="fill:#ac9d93;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
 186        d="m 398.9239,451.89868 -2.67857,13.57143 3.39285,6.25 15.71429,1.25 z"
 187        id="path4484"
 188        inkscape:connector-curvature="0" />
 189     <path
 190        style="fill:#e3dbdb;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
 191        d="m 309.71136,400.85715 11.61675,-1.51523 37.75445,16.92006 18.18275,9.34391 13.8896,1.89403 -1.89404,7.57615 1.01015,6.18718 -15.15228,-0.50507 -28.15801,-10.48034 -22.34962,-11.86929 z"
 192        id="path4486"
 193        inkscape:connector-curvature="0" />
 194     <path
 195        style="fill:#c8b7b7;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 196        d="m 418.9341,428.13127 -2.0203,8.33376 20.45558,-14.39468 z"
 197        id="path4488"
 198        inkscape:connector-curvature="0" />
 199     <path
 200        style="fill:#e3dbdb;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
 201        d="m 455.29959,405.40284 6.31346,-18.18275 24.74873,-6.81853 25.25382,-1.76777 -7.32361,15.40483 -20.20305,0.75761 0,3.283 14.64721,3.03046 -8.83883,10.10152 -22.22336,-0.25253 z"
 202        id="path4490"
 203        inkscape:connector-curvature="0" />
 204     <path
 205        style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 206        d="m 280,111.42762 -18.21429,-5"
 207        id="path4492"
 208        inkscape:connector-curvature="0"
 209        transform="translate(227.32245,266.11266)" />
 210     <path
 211        style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 212        d="m 273.75,96.42762 -9.10714,6.42857"
 213        id="path4494"
 214        inkscape:connector-curvature="0"
 215        transform="translate(227.32245,266.11266)" />
 216     <path
 217        style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 218        d="M 4.6428571,148.57048 15.714286,132.14191"
 219        id="path4496"
 220        inkscape:connector-curvature="0"
 221        transform="translate(227.32245,266.11266)" />
 222     <path
 223        style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 224        d="M 25,158.21333 36.071428,144.28476"
 225        id="path4498"
 226        inkscape:connector-curvature="0"
 227        transform="translate(227.32245,266.11266)" />
 228     <path
 229        style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 230        d="m 203.04066,100.53056 10.10153,0.50508 -6.06092,6.56599 7.57614,0 -4.54568,7.57614 8.08122,-1.51522"
 231        id="path4500"
 232        inkscape:connector-curvature="0"
 233        transform="translate(227.32245,266.11266)" />
 234     <path
 235        style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 236        d="m 216.17264,111.26343 4.16688,5.3033"
 237        id="path4502"
 238        inkscape:connector-curvature="0"
 239        transform="translate(227.32245,266.11266)" />
 240     <path
 241        style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 242        d="m 227.7894,139.42144 -7.07107,-8.5863"
 243        id="path4504"
 244        inkscape:connector-curvature="0"
 245        transform="translate(227.32245,266.11266)" />
 246     <path
 247        style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 248        d="m 207.08127,203.56612 -0.50508,-6.06091 -7.07106,0.50507"
 249        id="path4506"
 250        inkscape:connector-curvature="0"
 251        transform="translate(227.32245,266.11266)" />
 252   </g>
 253 </svg>
 254         <p></p>
 255         <input type="text" value="0" id="permute_amount"/>
 256         <button onclick="perturbPaths();">Perturb Paths</button>
 257
 258         <button onclick="reset();">Reset</button>
 259 </body>
 260 </html>