[WIP] Begin implementing drawing the tree

cljs/jeremy_website/sketches/tree.cljs

@@ -6,49 +6,61 @@
 (defn degrees->radians [deg]
   (* deg (/ js/Math.PI 180)))
 
-(defn l-system-lines
+;; The tree branch object
+;; A branch has a coordinate, a list of segments and a map of child branches
+;; A segment has an x1, y1, x2, y2
+;; The child branch map's keys are the segment index at which the
+;; child branch originates, and the values are the child branch itself
+(defn l-system-tree
   [{:keys [segment-length initial-angle initial-x initial-y l-system]}]
-  (vec
-   (:lines
-    (reduce
-     (fn [{:keys [x y angle angle-stack position-stack depth lines] :as state}
-          symbol]
-       (condp = symbol
-         "F" (let [new-x (+ x (* segment-length
-                                 (js/Math.cos (degrees->radians angle))))
-                   new-y (+ y (* (- segment-length)
-                                 (js/Math.sin (degrees->radians angle))))
-                   line {:x1 x :y1 y :x2 new-x :y2 new-y}]
-               (assoc state
-                      :x new-x
-                      :y new-y
-                      :lines (conj lines (assoc line :depth depth))))
-         "+" (assoc state :angle (+ angle 25))
-         "-" (assoc state :angle (- angle 25))
-         "*" (assoc state :angle (+ angle 20))
-         "/" (assoc state :angle (- angle 20))
-         ">" (assoc state :angle (+ angle 15))
-         "<" (assoc state :angle (- angle 15))
-         "[" (assoc state
-                    :angle-stack (conj angle-stack angle)
-                    :position-stack (conj position-stack [x y])
-                    :depth (inc depth))
-         "]" (assoc state
-                    :angle (peek angle-stack)
-                    :angle-stack (pop angle-stack)
-                    :x (first (peek position-stack))
-                    :y (second (peek position-stack))
-                    :position-stack (pop position-stack)
-                    :depth (dec depth))
-         state))
-     {:angle initial-angle
-      :angle-stack [initial-angle]
-      :x initial-x
-      :y initial-y
-      :position-stack [[initial-x initial-y]]
-      :depth 0
-      :lines []}
-     (:state l-system)))))
+  (let [make-tree
+        (fn make-tree [segment-length x y angle symbols branch idx]
+          (let [[symbol & rest-symbols] symbols]
+            (condp = symbol
+              nil [branch rest-symbols]
+              "F" (let [new-x (+ x (* segment-length
+                                      (js/Math.cos (degrees->radians angle))))
+                        new-y (+ y (* (- segment-length)
+                                      (js/Math.sin (degrees->radians angle))))
+                        branch (assoc branch
+                                      :segments
+                                      (conj (:segments branch)
+                                            {:x1 x
+                                             :y1 y
+                                             :x2 new-x
+                                             :y2 new-y}))]
+                    (recur segment-length new-x new-y angle rest-symbols branch (inc idx)))
+              "+" (recur segment-length x y (+ angle 25) rest-symbols branch idx)
+              "-" (recur segment-length x y (- angle 25) rest-symbols branch idx)
+              "*" (recur segment-length x y (+ angle 20) rest-symbols branch idx)
+              "/" (recur segment-length x y (- angle 20) rest-symbols branch idx)
+              ">" (recur segment-length x y (+ angle 15) rest-symbols branch idx)
+              "<" (recur segment-length x y (- angle 15) rest-symbols branch idx)
+              "[" (let [[new-branch rest-symbols] (make-tree segment-length
+                                                             x
+                                                             y
+                                                             angle
+                                                             rest-symbols
+                                                             {:x x
+                                                              :y y
+                                                              :segments []
+                                                              :children {}}
+                                                             0)
+                        branch (assoc-in branch [:children idx] new-branch)]
+                    (recur segment-length x y angle rest-symbols branch idx))
+              "]" [branch rest-symbols]  ;; stop processing current branch and pop to parent call
+              (recur segment-length x y angle rest-symbols branch idx))))]
+    (first (make-tree segment-length
+                      initial-x
+                      initial-y
+                      initial-angle
+                      (:state l-system)
+                      {:x initial-x
+                       :y initial-y
+                       :segments []
+                       :children {}}
+                      0))))
+
 
 (defn setup []
   ;; Hue goes from 0-360, saturation/brightness from 0-100
@@ -65,44 +77,41 @@
                                                     "F" -> "FF")
                                             :random-fn (partial q/random 1)})
                      ((apply comp (repeat 6 l-system/step))))
-        lines (l-system-lines {:initial-angle (- 90 25)
-                               :segment-length 6
-                               :initial-x (* (q/width) 0.1)
-                               :initial-y (* (q/height) 0.95)
-                               :l-system l-system})]
-    {:to-draw lines
-     :drawing []}))
+        tree (l-system-tree {:initial-angle (- 90 25)
+                             :segment-length 6
+                             :initial-x (* (q/width) 0.1)
+                             :initial-y (* (q/height) 0.95)
+                             :l-system l-system})]
+    {:tree tree
+     :current-branches [{:branch tree
+                         :i 0}]
+     :drawn-branches []
+     :to-draw []
+     :drawing []
+     :drawn []}))
 
-(defn update-state [{:keys [to-draw drawing] :as state}]
-  (let [batch-size 10]
-    (if (> (count to-draw) 0)
-      (assoc state
-             :to-draw (vec (drop batch-size to-draw))
-             :drawing (vec (concat drawing (take batch-size to-draw))))
-      state)))
+(defn update-state [state]
+  (let [drawn (concat (mapcat :segments (:drawn-branches state))
+                      (mapcat #(let [i (:i %)
+                                     segs (get-in % [:branch :segments])]
+                                 (subvec segs i))
+                              (:current-branches state)))]
+    (assoc state
+           :drawn drawn)))
 
-(defn dedupe-lines [lines]
-  (:lines
-   (reduce (fn [{:keys [lines already-seen] :as state} line]
-             (if-not (contains? already-seen ((juxt :x1 :y1 :x2 :y2) line))
-               (assoc state
-                      :already-seen (conj already-seen ((juxt :x1 :y1 :x2 :y2) line))
-                      :lines (conj lines line))
-               state))
-           {:lines []
-            :already-seen #{}}
-           lines)))
+{:drawing [{:x1 10 :y1 15 :x2 20 :y2 25 :lerp 0.4}]
+ :drawn []
+ :to-draw []}
 
-(defn draw [{:keys [to-draw drawing]}]
+(defn draw [{:keys [drawing drawn to-draw]}]
   (q/background 0 0 100)
   (q/fill 0 0 0)
-  (let [lines (dedupe-lines drawing)]
-    (doseq [line lines]
-      (q/stroke-weight (- 1.75 (* 0.1 (:depth line))))
-      (q/stroke 240 0 (+ 65 (* 2 (:depth line))))
-      (apply q/line ((juxt :x1 :y1 :x2 :y2) line))))
-  (when (= (count to-draw) 0)
-    (q/no-loop)))
+  (doseq [{:keys [x1 y1 x2 y2]} drawn]
+    (q/line x1 y1 x2 y2))
+  (doseq [{:keys [x1 y1 x2 y2 lerp]} drawing]
+    (let [x2 (q/lerp x1 x2 lerp)
+          y2 (q/lerp y1 y2 lerp)]
+      (q/line x1 y1 x2 y2))))
 
 (defn sketch
   [{:keys [host size]}]

src/index.html

@@ -41,7 +41,7 @@
                 <p>
                     Connect with me on
                     <a href="https://twitter.com/jeremydormitzer">Twitter</a>,
-                    <a href="https://mastodon.technology/jdormit">Mastodon</a> or
+                    <a href="https://mastodon.technology/@jdormit">Mastodon</a> or
                     <a href="https://linkedin.com/in/jeremydormitzer">LinkedIn</a>.
                 </p>
             </div>