Koch Snowflake Generator - Example of DOM based interactive document

[ipdf/sam.git] / figures / koch.js

diff --git a/figures/koch.js b/figures/koch.js
new file mode 100644 (file)
index 0000000..7ff1164
--- /dev/null
+++ b/figures/koch.js
@@ -0,0 +1,140 @@
+/**
+ * This code will perform the koch snowflake iteration on svg paths
+ * Wierd things might happen if the path isn't a straight line path
+ */
+
+
+function koch(direction, mode)
+{
+       var svgs = document.getElementsByTagName("svg");
+       for (var i = 0; i < svgs.length; ++i)
+       {
+               var paths = svgs[i].getElementsByTagName("path");
+               for (var j = 0; j < paths.length; ++j)
+               {
+                       var d = paths[j].getAttribute("d").split(/[\s,]+/);
+                       var x = [];
+                       var y = [];
+                       for (var k = 0; k < d.length; ++k)
+                       {
+                               var asfloat = parseFloat(d[k]);
+                               if (isNaN(asfloat)) continue;
+                               var coord = (y.length == x.length) ? x : y;
+                               coord.push(asfloat);
+                       }
+                       var result = "M";
+                       for (var k = 0; k < x.length-1; ++k)
+                       {
+                               var s = [x[k+1]-x[k], y[k+1]-y[k]];
+                               var dist = Math.pow(Math.pow(s[0],2) + Math.pow(s[1],2),1/2);
+                               var n = [-s[1]/dist, s[0]/dist]; // normal vector
+                               var a = [0,0];
+                               var b = [0,0];
+                               var c = [0,0];
+                               for (var ii = 0; ii < 2; ++ii)
+                               {
+                                       var p = (ii == 0 ? x : y);
+                                       a[ii] = p[k] + s[ii]/3;
+                                       b[ii] = p[k] + 2*s[ii]/3;
+                                       if (direction == "in")
+                                       {
+                                               c[ii] = p[k] + s[ii]/2 + dist/3 * n[ii];
+                                       }
+                                       else if (direction == "out")    
+                                       {
+                                               c[ii] = p[k] + s[ii]/2 - dist/3 * n[ii];
+                                       }
+                               }
+
+                               result += " " + x[k]+","+y[k] + " "+a.join(",") + " " + c.join(",") + " " + b.join(",");
+                               if (mode == "append")
+                                       result += " " + a.join(",") + " " + b.join(",");
+                               
+                                       
+                       }
+                       result += " " + x[x.length-1]+","+y[x.length-1];
+
+
+                       //document.getElementById("debug").innerHTML = paths[j].getAttribute("d") + " to " + result;
+                       paths[j].setAttribute("d", result);
+               }
+       }
+}
+
+/** Helper lets us repeat the iteration **/
+function iterateKoch()
+{
+       var iterations = parseFloat(document.getElementById("iterations").value);
+       var direction = (document.getElementById("dir_in").checked) ? "in" : "out";
+       var mode = (document.getElementById("mode_insert").checked) ? "insert" : "append";
+       if (!isNaN(iterations))
+       {
+               for (var i = 0; i < iterations; ++i) koch(direction, mode);
+       }
+}
+
+/** Change stroke thickness **/
+function strokeWidth()
+{
+       var thickness = parseFloat(document.getElementById("stroke-width").value);
+       if (isNaN(thickness)) return;
+
+       var svgs = document.getElementsByTagName("svg");
+       for (var i = 0; i < svgs.length; ++i)
+       {
+               var paths = svgs[i].getElementsByTagName("path");
+               for (var j = 0; j < paths.length; ++j)
+               {
+                       paths[j].style.strokeWidth = thickness+"px";
+               }
+       }
+}
+
+
+/** Change fill **/
+function fill()
+{
+       var fill = document.getElementById("fill").value;
+
+       var svgs = document.getElementsByTagName("svg");
+       for (var i = 0; i < svgs.length; ++i)
+       {
+               var paths = svgs[i].getElementsByTagName("path");
+               for (var j = 0; j < paths.length; ++j)
+               {
+                       paths[j].style.fill = fill;
+               }
+       }
+}
+
+/** Change stroke colour **/
+function stroke()
+{
+       var stroke = document.getElementById("stroke").value;
+
+       var svgs = document.getElementsByTagName("svg");
+       for (var i = 0; i < svgs.length; ++i)
+       {
+               var paths = svgs[i].getElementsByTagName("path");
+               for (var j = 0; j < paths.length; ++j)
+               {
+                       paths[j].style.stroke = stroke;
+               }
+       }
+}
+
+function reset()
+{
+       document.getElementById("line").setAttribute("d", "M 100,100 300,100 200,273.2051 100,100");
+       document.getElementById("line").setAttribute("style", "stroke:#000000; fill:none; stroke-width:1px;");
+}
+
+function svgToText()
+{
+       var data = "<svg id=\"kochSVG\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"400\" height=\"400\">";
+       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")+"\"/>";
+       data += "</svg>"
+       var win = window.open("image/svg+xml");
+       win.document.write(data);
+       win.focus();
+}