7ff11640d48d1094270d43f2063dd75e118a2ff9
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  */
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                                 }
49                                 result += " " + x[k]+","+y[k] + " "+a.join(",") + " " + c.join(",") + " " + b.join(",");
50                                 if (mode == "append")
51                                         result += " " + a.join(",") + " " + b.join(",");
54                         }
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);
60                 }
61         }
62 }
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 }
76 /** Change stroke thickness **/
77 function strokeWidth()
78 {
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)
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 }
94 /** Change fill **/
95 function fill()
96 {
97         var fill = document.getElementById("fill").value;
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 }
110 /** Change stroke colour **/
111 function stroke()
112 {
113         var stroke = document.getElementById("stroke").value;
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 }
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 }
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 }

UCC git Repository :: git.ucc.asn.au