an eternal plotted braid

5 years ago · 108a4af74c
2 changed files with 114 additions and 0 deletions
--- a/chaostest/braid.html
+++ b/chaostest/braid.html
@ -0,0 +1,65 @@
				@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<title>Braid</title>
+
+<code mode="text/html">
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+body {
+    background-color: #ffffcc;
+}
+</style>
+
+<script type="text/javascript" src="paper.js"></script>
+<script type="text/javascript" src="jsoneditor.min.js"></script>
+<script type="text/javascript" src="braid.js" canvas="canvas"></script>
+<script type="text/javascript">
+var params;
+
+function draw() {
+     paper.project.clear();
+     var grp = braid(params);
+     grp.translate(new Point(1.2, 1.2));
+     grp.scale(190, new Point(0,0));
+}
+
+function get_svg() {
+    return paper.project.exportSVG({asString: true});
+}
+
+window.onload = function() {
+    paper.install(window);
+    paper.setup(document.getElementById('canvas'));
+    var editor;
+
+    draw();
+
+    document.getElementById('download-svg').addEventListener('click', function() {
+        var svgdata = 'data:image/svg+xml;utf8,' + encodeURIComponent(get_svg());
+        var a = document.createElement('a');
+        a.download = 'export.svg';
+        a.href = svgdata;
+        document.body.appendChild(a);
+        a.click();
+    });
+
+     document.getElementById('new').addEventListener('click', function() {
+         draw();
+     });
+
+}
+</script>
+
+</head>
+<body>
+<canvas id="canvas"  style="width: 500px; height: 500px;" resize></canvas>
+<hr>
+<button id="download-svg">download svg</button>
+<button id="new">new</button>
+<br>
+<div id="params"></div>
+
+</body>
+</html>
+
--- a/chaostest/braid.js
+++ b/chaostest/braid.js
@ -0,0 +1,49 @@
				@@ -0,0 +1,49 @@
+
+function braid_get_rnd_params() {
+    return {
+        num_points: 10,
+        point_noise: 0.6,
+        num_connections: 8,
+    };
+}
+
+
+function braid(params) {
+    if(typeof params == 'undefined') {
+        var params = braid_get_rnd_params();
+    }
+
+    let points = [];
+    for(let i=0; i<params.num_points; i++) {
+        //const angle = i/params.num_points * 2 * Math.PI + Math.random() * params.point_noise;
+        const angle = i/params.num_points * 2 * Math.PI + Math.random() * params.point_noise;
+        const p1 = new Point(Math.sin(angle) + (Math.random() - 0.5) * params.point_noise, Math.cos(angle) + (Math.random() - 0.5) * params.point_noise);
+        const p2 = new Point(Math.sin(angle) + (Math.random() - 0.5) * params.point_noise, Math.cos(angle) + (Math.random() - 0.5) * params.point_noise);
+        points.push([p1, p2]);
+    }
+
+    var lines = [];
+    for(let i=0; i<params.num_points; i++) {
+        var l = new Path.Line(points[i][0], points[i][1]);
+        l.strokeColor = 'black';
+        l.strokeWidth = 5;
+        lines.push(l);
+    }
+
+    var connections = [];
+    for(let i=0; i<params.num_points; i++) {
+        var l1 = lines[i];
+        var l2 = lines[(i+1) % params.num_points];
+        for(let j=0; j<params.num_connections; j++) {
+            var o = j / (params.num_connections - 1);
+            var cl = new Path.Line(l1.getPointAt(o * l1.length), l2.getPointAt(o * l2.length));
+            cl.strokeColor = 'black';
+            connections.push(cl);
+        }
+    }
+
+    var grp = new paper.Group(lines);
+    grp.addChildren(connections);
+    return grp;
+}
+