Limit number of derivations per ruleset

index.html

@@ -7,9 +7,9 @@
         <title>L-systems</title>
         <style> body {padding: 0; margin: 0;} </style>
         <script src="libs/p5.min.js"></script>
-        <script src="libs/stringbuffer.js"></script>
-        <script src="libs/lsystem.js"></script>
-        <script src="libs/turtle.js"></script>
+        <script src="src/stringbuffer.js"></script>
+        <script src="src/lsystem.js"></script>
+        <script src="src/turtle.js"></script>
         <script src="src/scenes.js"></script>
         <script src="src/sketch.js"></script>
     </head>

src/scenes.js

@@ -6,6 +6,7 @@ const SCENES = [
             '-': '-',
             '+': '+'
         },
+        maxDerivations: 5,
         angle: 90,
         distance: 600,
         decay: 4,
@@ -20,6 +21,7 @@ const SCENES = [
             '-': '-',
             '+': '+'
         },
+        maxDerivations: 5,
         angle: 90,
         distance: 600,
         decay: 4,
@@ -34,6 +36,7 @@ const SCENES = [
             '-': '-',
             '+': '+'
         },
+        maxDerivations: 5,
         angle: 90,
         distance: 600,
         decay: 2,
@@ -49,6 +52,7 @@ const SCENES = [
             '-': '-',
             '+': '+'
         },
+        maxDerivations: 5,
         angle: 90,
         distance: 100,
         decay: 2,
@@ -63,6 +67,7 @@ const SCENES = [
             '-': '-',
             '+': '+'
         },
+        maxDerivations: 5,
         angle: 90,
         distance: 50,
         decay: 2,
@@ -77,6 +82,7 @@ const SCENES = [
             '-': '-',
             '+': '+'
         },
+        maxDerivations: 5,
         angle: 90,
         distance: 50,
         decay: 2,
@@ -91,6 +97,7 @@ const SCENES = [
             '-': '-',
             '+': '+'
         },
+        maxDerivations: 5,
         angle: 90,
         distance: 50,
         decay: 2,
@@ -105,6 +112,7 @@ const SCENES = [
             '-': '-',
             '+': '+'
         },
+        maxDerivations: 5,
         angle: 90,
         distance: 50,
         decay: 2,
@@ -119,6 +127,7 @@ const SCENES = [
             '-': '-',
             '+': '+'
         },
+        maxDerivations: 5,
         angle: 90,
         distance: 50,
         decay: 2,
@@ -133,6 +142,7 @@ const SCENES = [
             '-': '-',
             '+': '+'
         },
+        maxDerivations: 5,
         angle: 90,
         distance: 50,
         decay: 2,

src/sketch.js

@@ -7,6 +7,7 @@
 const BACKGROUND_COLOR = [0, 0, 0];
 
 // define L-system state
+let clicks = 1;
 let currentScene = 0;
 let lsystem;
 
@@ -40,36 +41,20 @@ function draw()
 }
 
 
-/**
- * p5.js key pressed callback.
- */
-function keyPressed()
-{
-    // right arrow is pressed: move to next scene
-    if (keyCode === RIGHT_ARROW)
-    {
-        // get next scene index
-        currentScene + 1 === SCENES.length ? currentScene = 0 : currentScene++;
-
-        // setup next scene
-        loadScene();
-
-        // call p5.js drawing function
-        redraw();
-    }
-}
-
-
 /**
  * p5.js mouse clicked callback.
  */
 function mouseClicked()
 {
-    // derivate next L-system state
-    lsystem.derive();
+    if (clicks === SCENES[currentScene].maxDerivations)
+    {
+        nextScene();
+        clicks = 0;
+    }
 
-    // call p5.js drawing function
-    redraw();
+    else
+        nextDerivation();
+        clicks += 1;
 }
 
 
@@ -93,3 +78,32 @@ function loadScene()
         scene.decay
     );
 }
+
+
+/**
+ * Forward sketch to next scene.
+ */
+function nextScene()
+{
+    // get next scene index
+    currentScene + 1 === SCENES.length ? currentScene = 0 : currentScene++;
+
+    // setup next scene
+    loadScene();
+
+    // call p5.js drawing function
+    redraw();
+}
+
+
+/**
+ * Get L-system next derivation.
+ */
+function nextDerivation()
+{
+    // derivate next L-system state
+    lsystem.derive();
+
+    // call p5.js drawing function
+    redraw();
+}