diff --git a/chaostest/connected-lines.html b/chaostest/connected-lines.html
index cdc8de4..7be22e4 100644
--- a/chaostest/connected-lines.html
+++ b/chaostest/connected-lines.html
@@ -6,11 +6,18 @@
 <html>
 <head>
 <script type="text/javascript" src="paper.js"></script>
+<script type="text/javascript" src="jsoneditor.min.js"></script>
 <script type="text/javascript" src="connected-lines.js" canvas="canvas"></script>
 <script type="text/javascript">
+var params;
+
+function rnd_params() {
+    params = connected_lines_get_rnd_params();
+}
+
 function draw() {
      paper.project.clear();
-     var grp = connected_lines();
+     var grp = connected_lines(params);
      grp.scale(500, new Point(0,0));
 }
 
@@ -21,6 +28,7 @@ function get_svg() {
 window.onload = function() {
     paper.install(window);
     paper.setup(document.getElementById('canvas'));
+    rnd_params();
     draw();
 
     document.getElementById('download-svg').addEventListener('click', function() {
@@ -35,6 +43,57 @@ window.onload = function() {
      document.getElementById('draw').addEventListener('click', function() {
          draw();
      });
+
+     var editor = new JSONEditor(document.getElementById('params'), {
+         no_additional_properties: true,
+         disable_edit_json: true,
+         disable_properties: true,
+         disable_collapse: true,
+         startval: params,
+         schema: {
+             type: 'object',
+             title: 'Parameters',
+             properties: {
+                 start_x: {
+                     type: 'number',
+                     minimum: 0,
+                     maximum: 1,
+                 },
+                 start_y: {
+                     type: 'number',
+                     minimum: 0,
+                     maximum: 1,
+                 },
+                 offs_x: {
+                     type: 'number',
+                     minimum: 0,
+                     maximum: 0.1,
+                     format: 'range',
+                     step: 0.0001
+
+                 },
+                 offs_y: {
+                     type: 'number',
+                     minimum: 0,
+                     maximum: 0.1,
+                     format: 'range',
+                     step: 0.0001
+
+                 },
+                 num_steps: {
+                     type: 'integer',
+                     minimum: 1,
+                     maximum: 10,
+                     format: 'range'
+                 }
+             }
+         }
+     });
+
+     editor.on('change', function() {
+         params = editor.getValue();
+         draw();
+     });
 }
 </script>
 
@@ -44,6 +103,8 @@ window.onload = function() {
 <hr>
 <button id="download-svg">download svg</button>
 <button id="draw">draw</button>
+<br>
+<div id="params"></div>
 
 </body>
 </html>
diff --git a/chaostest/connected-lines.js b/chaostest/connected-lines.js
index 50350e4..144b6da 100644
--- a/chaostest/connected-lines.js
+++ b/chaostest/connected-lines.js
@@ -1,8 +1,10 @@
 
 function connected_lines_get_rnd_params() {
     return {
-        start: new paper.Point(Math.random(), Math.random()),
-        offs: new paper.Point(0.05, 0.05),
+        start_x: Math.random(),
+        start_y: Math.random(),
+        offs_x: 0.05,
+        offs_y: 0.05,
         num_steps: 5,
     };
 }
@@ -13,10 +15,13 @@ function connected_lines(params) {
         var params = connected_lines_get_rnd_params();
     }
 
+    var start = new paper.Point(params.start_x, params.start_y);
+    var offs = new paper.Point(params.offs_x, params.offs_y);
+
     var lines = [];
     for(var i=0; i<2; i++) {
-        var x = params.start.x + i*params.offs.x;
-        var y = params.start.y + i*params.offs.y;
+        var x = start.x + i*offs.x;
+        var y = start.y + i*offs.y;
         var path = new paper.Path({strokeWidth: 5, strokeColor: 'black'});
         for(var s=0; s<params.num_steps; s++) {
             x = (4*x*(1-x)) % 1;
