Koch Snowflake Generator - Example of DOM based interactive document
[ipdf/sam.git] / figures / koch.html
diff --git a/figures/koch.html b/figures/koch.html
new file mode 100644 (file)
index 0000000..65945d9
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+       <head>
+               <title>SVG and Koch's Fractal</title>
+               <script type="text/javascript" src="koch.js"></script>
+       </head>
+<body>
+       <h1> Koch's Snowflake </h1>
+       <p> An example of using the DOM to make a fractal --- an interactive document.</p>
+       <p> <b>Warning:</b> If you iterate too many times you will likely crash your browser </p>
+       <svg
+               id="kochSVG"
+               xmlns="http://www.w3.org/2000/svg"
+               version="1.1"
+               width="400"
+               height="400"
+       >
+               <path
+                       id="line"
+                       style="stroke:#000000; fill:none; stroke-width:1px;"
+                       d = "M 100,100 300,100 200,273.2051 100,100"
+               />
+       </svg>
+       <p></p>
+       <table>
+               <tr> <td> Inwards <input type="radio" name="dir" id="dir_in"/> Outwards <input type="radio" name="dir" value="dir_out" checked="yes"/> </td> </tr>
+               <tr> <td> Insert <input type="radio" name="mode" id="mode_insert" checked="yes"/> Append <input type="radio" name="mode" id="mode_append"/> </td> </tr>
+               <tr> <td> <input type="text" value="1" id="iterations"/> <button onclick="iterateKoch();">Koch Iterate</button> </td> </tr>
+               <tr> <td> <input type="text" value="#000000" id="stroke"/> <button onclick="stroke();">Stroke Colour</button> </td> </tr>       
+               <tr> <td> <input type="text" value="none" id="fill"> <button onclick="fill();">Fill Colour</button> </td> </tr>
+               <tr> <td> <input type="text" value="1" id="stroke-width"/> <button onclick="strokeWidth();">Stroke Thickness</button> </td> </tr>
+               <tr> <td><button onclick="reset();">Reset</button> <button onclick="svgToText();">Standalone SVG</button></td></tr>
+       </table>
+       <p id="debug"></p>
+</body>
+</html>

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