Merge pull request #326 from jeffeb3/feature/lsystem-patterns

New L-system patterns

Author: bobnik

src/common/lindenmayer.js

@@ -11,20 +11,20 @@ const shortestPath = (nodes) => {
   for (let i = 0; i < nodes.length - 1; i++) {
     const node1 = nodes[i]
     const node2 = nodes[i + 1]
-    let node1Key = node1.toString()
-    let edge12Key = edgeKey(node1, node2)
+    const node1Key = node1.toString()
+    const edge12Key = edgeKey(node1, node2)
 
     if (visited[edge12Key]) {
-      const unvisitedNode = nearestUnvisitedNode(i + 1, nodes, visited, graph)
+      const result = nearestUnvisitedNode(i + 1, nodes, visited, graph)
 
-      if (unvisitedNode != null) {
+      if (result) {
         const shortestSubPath = graph.dijkstraShortestPath(
           node1Key,
-          unvisitedNode.toString(),
+          result.node.toString(),
         )
 
         path.push(...cloneVertices(shortestSubPath.slice(1)))
-        i = nodes.indexOf(unvisitedNode) - 1
+        i = result.index - 1
       }
     } else {
       path.push(node2)
@@ -41,7 +41,7 @@ const nearestUnvisitedNode = (nodeIndex, nodes, visited, graph) => {
     const node2 = nodes[i + 1]
 
     if (!visited[edgeKey(node1, node2)]) {
-      return node2
+      return { node: node2, index: i + 1 }
     }
   }
 
@@ -98,6 +98,7 @@ export const lsystem = (config) => {
     }
     input = output
   }
+
   return output
 }
 
@@ -111,10 +112,26 @@ const lsystemDraw = (vertex, angle, config) => {
   )
 }
 
+// Skip to matching closing bracket, accounting for nesting
+const skipBranch = (instructions, startIndex) => {
+  let depth = 1
+  let i = startIndex + 1
+
+  while (i < instructions.length && depth > 0) {
+    if (instructions[i] === "[") depth++
+    else if (instructions[i] === "]") depth--
+    i++
+  }
+
+  return i - 1 // return index of matching ]
+}
+
 export const lsystemPath = (instructions, config) => {
   let vertex = new Victor(0, 0)
   let currVertices = [vertex]
   let angle = -Math.PI / 2
+  const rng = config.rng || Math.random
+  const branchProb = config.branchProbability ?? 1
 
   if (config.startingAngle) {
     angle =
@@ -125,6 +142,7 @@ export const lsystemPath = (instructions, config) => {
 
   // This will store the previous return paths we are not working on.
   let returnPaths = []
+
   for (let i = 0; i < instructions.length; i++) {
     let char = instructions[i]
 
@@ -145,11 +163,19 @@ export const lsystemPath = (instructions, config) => {
         returnPaths.slice(-1)[0].push("B")
       }
     } else if (char === "[") {
-      // open a branch
-      returnPaths.push([])
+      // Randomly skip branch based on probability
+      if (branchProb < 1 && rng() > branchProb) {
+        i = skipBranch(instructions, i)
+      } else {
+        // open a branch
+        returnPaths.push([])
+      }
     } else if (char === "]") {
       // Return to the beginning of the branch
-      let returnPath = returnPaths.pop().reverse()
+      let returnPath = returnPaths.pop()
+
+      if (!returnPath) continue
+      returnPath.reverse()
 
       for (let j = 0; j < returnPath.length; j++) {
         let revChar = returnPath[j]

src/components/SliderOption.js

@@ -45,7 +45,33 @@ const SliderOption = ({
   }
 
   const handleInputChange = (e) => {
+    const newValue = parseFloat(e.target.value)
+
     handleChange(e.target.value)
+    if (!isNaN(newValue) && newValue >= minimum && newValue <= maximum) {
+      handleChangeComplete(newValue)
+    }
+  }
+
+  const handleInputBlur = (e) => {
+    let newValue = parseFloat(e.target.value)
+
+    if (isNaN(newValue)) {
+      newValue = 0
+    } else if (newValue < minimum) {
+      newValue = minimum
+    } else if (newValue > maximum) {
+      newValue = maximum
+    }
+
+    handleChange(newValue)
+    handleChangeComplete(newValue)
+  }
+
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.target.blur()
+    }
   }
 
   const handleChangeComplete = (newValue) => {
@@ -59,6 +85,12 @@ const SliderOption = ({
   }
 
   let marks
+  const parsedValue = parseFloat(value)
+  const clampedValue = Math.min(
+    Math.max(isNaN(parsedValue) ? minimum : parsedValue, minimum),
+    maximum,
+  )
+
   if (isNaN(minimum) || isNaN(maximum)) {
     marks = {}
   } else if (option.range) {
@@ -71,7 +103,7 @@ const SliderOption = ({
   } else {
     marks = {
       [minimum]: `${minimum}`,
-      [value]: `${value}`,
+      [clampedValue]: `${clampedValue}`,
       [maximum]: `${maximum}`,
     }
   }
@@ -86,7 +118,7 @@ const SliderOption = ({
         marks={marks}
         range={option.range}
         allowCross={false}
-        value={value}
+        value={clampedValue}
         onChangeComplete={handleChangeComplete}
         onChange={handleChange}
       />
@@ -105,6 +137,8 @@ const SliderOption = ({
       value={value}
       autoComplete="off"
       onChange={handleInputChange}
+      onBlur={handleInputBlur}
+      onKeyDown={handleInputKeyDown}
     />
   )
 

src/features/shapes/lsystem/LSystem.js

@@ -1,3 +1,4 @@
+import seedrandom from "seedrandom"
 import Shape from "../Shape"
 import {
   lsystem,
@@ -28,6 +29,47 @@ const options = {
       return onMaxIterations(subtypes[state.subtype], state)
     },
   },
+  angleOffset: {
+    title: "Angle offset",
+    type: "slider",
+    min: -15,
+    max: 15,
+    step: 0.5,
+    default: 0,
+  },
+  lsystemBranchProbability: {
+    title: "Branch probability",
+    type: "slider",
+    min: 0,
+    max: 100,
+    step: 5,
+    default: 100,
+    isVisible: (model, state) => {
+      const subtype = subtypes[state.subtype]
+
+      if (!subtype) return false
+
+      const allRules = subtype.axiom + Object.values(subtype.rules).join("")
+
+      return allRules.includes("[")
+    },
+  },
+  seed: {
+    title: "Seed",
+    min: 1,
+    max: 999,
+    step: 1,
+    isVisible: (model, state) => {
+      const subtype = subtypes[state.subtype]
+
+      if (!subtype) return false
+
+      const allRules = subtype.axiom + Object.values(subtype.rules).join("")
+      const hasBranches = allRules.includes("[")
+
+      return hasBranches && (state.lsystemBranchProbability ?? 100) < 100
+    },
+  },
 }
 
 export default class LSystem extends Shape {
@@ -46,24 +88,27 @@ export default class LSystem extends Shape {
       ...{
         iterations: 3,
         subtype: "McWorter's Pentadendrite",
+        angleOffset: 0,
+        seed: 1,
+        lsystemBranchProbability: 100,
       },
     }
   }
 
   getVertices(state) {
     const shape = state.shape
     const iterations = shape.iterations || 1
-
-    // generate our vertices using a set of l-system rules
-    let config = subtypes[shape.subtype]
-
-    config.iterations = iterations
-    config.side = 5
-
-    if (config.angle === undefined) {
-      config.angle = Math.PI / 2
+    const subtype = subtypes[shape.subtype]
+    const baseAngle = subtype.angle !== undefined ? subtype.angle : Math.PI / 2
+    const offsetRadians = ((shape.angleOffset || 0) * Math.PI) / 180
+    const config = {
+      ...subtype,
+      iterations,
+      side: 5,
+      angle: baseAngle + offsetRadians,
+      rng: seedrandom(shape.seed),
+      branchProbability: (shape.lsystemBranchProbability ?? 100) / 100,
     }
-
     const path = lsystemOptimize(lsystemPath(lsystem(config), config), config)
     const scale = 18.0 // to normalize starting size
 

src/features/shapes/lsystem/subtypes.js

@@ -10,6 +10,17 @@ export const subtypes = {
     startingAngle: Math.PI,
     maxIterations: 2,
   },
+  // https://en.wikipedia.org/wiki/L-system#Example_7:_Fractal_plant
+  "Anklet of Krishna": {
+    axiom: "-X--X",
+    draw: ["F"],
+    rules: {
+      X: "XFX--XFX",
+    },
+    angle: Math.PI / 4,
+    minIterations: 2,
+    maxIterations: 6,
+  },
   // http://www.kevs3d.co.uk/dev/lsystems/
   "Cog Triangle": {
     axiom: "W----W----W",
@@ -78,6 +89,16 @@ export const subtypes = {
     angle: Math.PI / 9,
     maxIterations: 8,
   },
+  "Fractal Tree 6": {
+    axiom: "F",
+    draw: ["F"],
+    rules: {
+      F: "FF+[+F-F-F]-[-F+F+F]",
+    },
+    angle: Math.PI / 8,
+    minIterations: 2,
+    maxIterations: 5,
+  },
   // http://mathforum.org/advanced/robertd/lsys2d.html
   "Gosper (flowsnake)": {
     axiom: "A",
@@ -160,6 +181,17 @@ export const subtypes = {
     startingAngle: -Math.PI / 3,
     maxIterations: 5,
   },
+  // https://en.wikipedia.org/wiki/L%C3%A9vy_C_curve
+  "Lévy C Curve": {
+    axiom: "F",
+    draw: ["F"],
+    rules: {
+      F: "+F--F+",
+    },
+    angle: Math.PI / 4,
+    minIterations: 6,
+    maxIterations: 14,
+  },
   // http://mathforum.org/advanced/robertd/lsys2d.html
   "McWorter's Pentadendrite": {
     axiom: "F-F-F-F-F",
@@ -223,4 +255,15 @@ export const subtypes = {
     },
     maxIterations: 8,
   },
+  // https://en.wikipedia.org/wiki/Terdragon
+  Terdragon: {
+    axiom: "F",
+    draw: ["F"],
+    rules: {
+      F: "F+F-F",
+    },
+    angle: (2 * Math.PI) / 3,
+    minIterations: 3,
+    maxIterations: 10,
+  },
 }