figures/koch.js

   1 /**
   2  * This code will perform the koch snowflake iteration on svg paths
   3  * Wierd things might happen if the path isn't a straight line path
   4  */
   5
   6
   7 function koch(direction, mode)
   8 {
   9         var svgs = document.getElementsByTagName("svg");
  10         for (var i = 0; i < svgs.length; ++i)
  11         {
  12                 var paths = svgs[i].getElementsByTagName("path");
  13                 for (var j = 0; j < paths.length; ++j)
  14                 {
  15                         var d = paths[j].getAttribute("d").split(/[\s,]+/);
  16                         var x = [];
  17                         var y = [];
  18                         for (var k = 0; k < d.length; ++k)
  19                         {
  20                                 var asfloat = parseFloat(d[k]);
  21                                 if (isNaN(asfloat)) continue;
  22                                 var coord = (y.length == x.length) ? x : y;
  23                                 coord.push(asfloat);
  24                         }
  25                         var result = "M";
  26                         for (var k = 0; k < x.length-1; ++k)
  27                         {
  28                                 var s = [x[k+1]-x[k], y[k+1]-y[k]];
  29                                 var dist = Math.pow(Math.pow(s[0],2) + Math.pow(s[1],2),1/2);
  30                                 var n = [-s[1]/dist, s[0]/dist]; // normal vector
  31                                 var a = [0,0];
  32                                 var b = [0,0];
  33                                 var c = [0,0];
  34                                 for (var ii = 0; ii < 2; ++ii)
  35                                 {
  36                                         var p = (ii == 0 ? x : y);
  37                                         a[ii] = p[k] + s[ii]/3;
  38                                         b[ii] = p[k] + 2*s[ii]/3;
  39                                         if (direction == "in")
  40                                         {
  41                                                 c[ii] = p[k] + s[ii]/2 + dist/3 * n[ii];
  42                                         }
  43                                         else if (direction == "out")
  44                                         {
  45                                                 c[ii] = p[k] + s[ii]/2 - dist/3 * n[ii];
  46                                         }
  47                                 }
  48
  49                                 result += " " + x[k]+","+y[k] + " "+a.join(",") + " " + c.join(",") + " " + b.join(",");
  50                                 if (mode == "append")
  51                                         result += " " + a.join(",") + " " + b.join(",");
  52
  53
  54                         }
  55                         result += " " + x[x.length-1]+","+y[x.length-1];
  56
  57
  58                         //document.getElementById("debug").innerHTML = paths[j].getAttribute("d") + " to " + result;
  59                         paths[j].setAttribute("d", result);
  60                 }
  61         }
  62 }
  63
  64 /** Helper lets us repeat the iteration **/
  65 function iterateKoch()
  66 {
  67         var iterations = parseFloat(document.getElementById("iterations").value);
  68         var direction = (document.getElementById("dir_in").checked) ? "in" : "out";
  69         var mode = (document.getElementById("mode_insert").checked) ? "insert" : "append";
  70         if (!isNaN(iterations))
  71         {
  72                 for (var i = 0; i < iterations; ++i) koch(direction, mode);
  73         }
  74 }
  75
  76 /** Change stroke thickness **/
  77 function strokeWidth()
  78 {
  79         var thickness = parseFloat(document.getElementById("stroke-width").value);
  80         if (isNaN(thickness)) return;
  81
  82         var svgs = document.getElementsByTagName("svg");
  83         for (var i = 0; i < svgs.length; ++i)
  84         {
  85                 var paths = svgs[i].getElementsByTagName("path");
  86                 for (var j = 0; j < paths.length; ++j)
  87                 {
  88                         paths[j].style.strokeWidth = thickness+"px";
  89                 }
  90         }
  91 }
  92
  93
  94 /** Change fill **/
  95 function fill()
  96 {
  97         var fill = document.getElementById("fill").value;
  98
  99         var svgs = document.getElementsByTagName("svg");
 100         for (var i = 0; i < svgs.length; ++i)
 101         {
 102                 var paths = svgs[i].getElementsByTagName("path");
 103                 for (var j = 0; j < paths.length; ++j)
 104                 {
 105                         paths[j].style.fill = fill;
 106                 }
 107         }
 108 }
 109
 110 /** Change stroke colour **/
 111 function stroke()
 112 {
 113         var stroke = document.getElementById("stroke").value;
 114
 115         var svgs = document.getElementsByTagName("svg");
 116         for (var i = 0; i < svgs.length; ++i)
 117         {
 118                 var paths = svgs[i].getElementsByTagName("path");
 119                 for (var j = 0; j < paths.length; ++j)
 120                 {
 121                         paths[j].style.stroke = stroke;
 122                 }
 123         }
 124 }
 125
 126 function reset()
 127 {
 128         document.getElementById("line").setAttribute("d", "M 100,100 300,100 200,273.2051 100,100");
 129         document.getElementById("line").setAttribute("style", "stroke:#000000; fill:none; stroke-width:1px;");
 130 }
 131
 132 function svgToText()
 133 {
 134         var data = "<svg id=\"kochSVG\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"400\" height=\"400\">";
 135         data += "<path id=\"line\" style=\"stroke:"+document.getElementById("stroke").value+"; fill:"+document.getElementById("fill").value+"; stroke-width:"+document.getElementById("stroke-width").value+"px;\" d=\""+document.getElementById("line").getAttribute("d")+"\"/>";
 136         data += "</svg>"
 137         var win = window.open("image/svg+xml");
 138         win.document.write(data);
 139         win.focus();
 140 }