From 0d77e99e89699e2ffc8ed002d2c2abfd6f665172 Mon Sep 17 00:00:00 2001 From: Sam Moore Date: Tue, 20 May 2014 12:03:50 +0800 Subject: [PATCH] Koch Snowflake Generator - Example of DOM based interactive document The literature review seems to have devolved into trying to make the coolest figures... It's a shame you can't embed HTML in PDF oh god what am I saying --- figures/koch.html | 36 ++++++++++++ figures/koch.js | 140 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 176 insertions(+) create mode 100644 figures/koch.html create mode 100644 figures/koch.js diff --git a/figures/koch.html b/figures/koch.html new file mode 100644 index 0000000..65945d9 --- /dev/null +++ b/figures/koch.html @@ -0,0 +1,36 @@ + + + + SVG and Koch's Fractal + + + +

Koch's Snowflake

An example of using the DOM to make a fractal --- an interactive document.

Warning: If you iterate too many times you will likely crash your browser

+ +

+ + + + + + + + +

Inwards Outwards

Insert Append

+ + diff --git a/figures/koch.js b/figures/koch.js new file mode 100644 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 = "" + var win = window.open("image/svg+xml"); + win.document.write(data); + win.focus(); +} -- 2.20.1