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
7 function koch(direction, mode)
9 var svgs = document.getElementsByTagName("svg");
10 for (var i = 0; i < svgs.length; ++i)
12 var paths = svgs[i].getElementsByTagName("path");
13 for (var j = 0; j < paths.length; ++j)
15 var d = paths[j].getAttribute("d").split(/[\s,]+/);
18 for (var k = 0; k < d.length; ++k)
20 var asfloat = parseFloat(d[k]);
21 if (isNaN(asfloat)) continue;
22 var coord = (y.length == x.length) ? x : y;
26 for (var k = 0; k < x.length-1; ++k)
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
34 for (var ii = 0; ii < 2; ++ii)
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")
41 c[ii] = p[k] + s[ii]/2 + dist/3 * n[ii];
43 else if (direction == "out")
45 c[ii] = p[k] + s[ii]/2 - dist/3 * n[ii];
49 result += " " + x[k]+","+y[k] + " "+a.join(",") + " " + c.join(",") + " " + b.join(",");
51 result += " " + a.join(",") + " " + b.join(",");
55 result += " " + x[x.length-1]+","+y[x.length-1];
58 //document.getElementById("debug").innerHTML = paths[j].getAttribute("d") + " to " + result;
59 paths[j].setAttribute("d", result);
64 /** Helper lets us repeat the iteration **/
65 function iterateKoch()
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))
72 for (var i = 0; i < iterations; ++i) koch(direction, mode);
76 /** Change stroke thickness **/
77 function strokeWidth()
79 var thickness = parseFloat(document.getElementById("stroke-width").value);
80 if (isNaN(thickness)) return;
82 var svgs = document.getElementsByTagName("svg");
83 for (var i = 0; i < svgs.length; ++i)
85 var paths = svgs[i].getElementsByTagName("path");
86 for (var j = 0; j < paths.length; ++j)
88 paths[j].style.strokeWidth = thickness+"px";
97 var fill = document.getElementById("fill").value;
99 var svgs = document.getElementsByTagName("svg");
100 for (var i = 0; i < svgs.length; ++i)
102 var paths = svgs[i].getElementsByTagName("path");
103 for (var j = 0; j < paths.length; ++j)
105 paths[j].style.fill = fill;
110 /** Change stroke colour **/
113 var stroke = document.getElementById("stroke").value;
115 var svgs = document.getElementsByTagName("svg");
116 for (var i = 0; i < svgs.length; ++i)
118 var paths = svgs[i].getElementsByTagName("path");
119 for (var j = 0; j < paths.length; ++j)
121 paths[j].style.stroke = stroke;
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;");
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")+"'/>";
137 var win = window.open("image/svg+xml");
138 win.document.write(data);