Loading ...
Sorry, an error occurred while loading the content.

Fractal Fern in SVG

Expand Messages
  • johncoe42
    Here is my attempt at implimenting the I.F.S. fern. It continues to refine the image based on a timer that fires every second. Could this be done with less
    Message 1 of 1 , Jan 18, 2004
    • 0 Attachment
      Here is my attempt at implimenting the I.F.S. fern.
      It continues to refine the image based on a timer that fires every
      second. Could this be done with less code, maybe as a animation?
      One of the applications of this is image compression.
      <?xml version="1.0" ?>
      <svg viewBox = "-500 -500 1000 1000"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      onload="init();">
      <title>Fractal Fern</title>
      <script ><![CDATA[
      var item;
      var p;
      var fa=svgDocument.getElementById("f0");
      var CTM = fa.getCTM();
      var m1 = fa.getCTM();
      var CVM = fa.getCTM();
      var fb=svgDocument.getElementById("f1");
      var fc=svgDocument.getElementById("f2");
      var fd=svgDocument.getElementById("f3");
      loop();
      setTimeout("loop()",1000);

      function init(){
      loop();
      } // end of function
      function loop(){
      for( var i = 1; i <420; i++ )
      {
      p = Math.random();
      if (p < 0.810) m1 = fa.getCTM();
      else if (p < 0.820) m1 = fb.getCTM();
      else if (p < 0.880) m1 = fc.getCTM();
      else if (p < 0.930) m1 = fd.getCTM();
      CTM = m1.multiply(CTM);
      if(i > 10) {
      item = makeDOMElement(CTM,svgDocument);
      fa.appendChild(item);
      }
      } // endof loop
      setTimeout("loop()",1000);
      }
      function makeDOMElement(CTM,d)
      {
      var insertItem;
      var insertItem1;
      insertItem = d.createElement("g" );
      insertItem1 = d.createElement("circle" );
      insertItem1.setAttribute("r","2");
      insertItem1.setAttribute("cx",CTM.e * 130);
      insertItem1.setAttribute("cy",500 + CTM.f* -90);
      insertItem.appendChild(insertItem1);
      return insertItem;
      }
      ]]>
      </script >
      <g id = "background" style="pointer-events:none" onload="init()">
      <text transform="matrix(3.0188 0 0 2 392 370)" onclick="loop
      ()">SVG Fractal Fern</text>
      <g id="f0" transform="matrix(0.85 -0.042 0.04 0.85 0
      1.6)"><text> Fern3</text> </g> <!-- p(0) = 0.82 -->
      <g id="f1" transform="matrix(0.0001 0 0 0.16 0 0)"><text>
      Fern1</text> </g> <!-- p(1) = 0.01 -->
      <g id="f2" transform="matrix(0.2 0.23 -0.26 0.22 0 0.2)"><text>
      Fern2</text> </g><!-- p(2) = 0.07 -->
      <g id="f3" transform="matrix(-0.15 0.26 0.28 0.24 0 0.2)"><text>
      Fern3</text></g> <!-- p(3) = 0.07 -->
      </g>
      </svg>
    Your message has been successfully submitted and would be delivered to recipients shortly.