cljs/jeremy_website/sketches/tree.cljs

@@ -8,7 +8,7 @@
 
 ;; 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
+;; A segment has an angle and a length
 ;; 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
@@ -61,6 +61,49 @@
                        :children {}}
                       0))))
 
+(defn l-system-lines
+  [{: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)))))
 
 (defn setup []
   ;; Hue goes from 0-360, saturation/brightness from 0-100
@@ -81,37 +124,59 @@
                              :segment-length 6
                              :initial-x (* (q/width) 0.1)
                              :initial-y (* (q/height) 0.95)
-                             :l-system l-system})]
+                             :l-system l-system})
+        ;; 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})
+        ]
     {:tree tree
-     :current-branches [{:branch tree
+     ;; :to-draw lines
-                         :i 0}]
+     ;; :drawing []
-     :drawn-branches []
+     }))
-     :to-draw []
-     :drawing []
-     :drawn []}))
 
-(defn update-state [state]
+(defn old-update-state [{:keys [to-draw drawing] :as state}]
-  (let [drawn (concat (mapcat :segments (:drawn-branches state))
+  (let [batch-size 10]
-                      (mapcat #(let [i (:i %)
+    (if (> (count to-draw) 0)
-                                     segs (get-in % [:branch :segments])]
-                                 (subvec segs i))
-                              (:current-branches state)))]
       (assoc state
-           :drawn drawn)))
+             :to-draw (vec (drop batch-size to-draw))
+             :drawing (vec (concat drawing (take batch-size to-draw))))
+      state)))
 
-{:drawing [{:x1 10 :y1 15 :x2 20 :y2 25 :lerp 0.4}]
+(defn dedupe-lines [lines]
- :drawn []
+  (:lines
- :to-draw []}
+   (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)))
 
-(defn draw [{:keys [drawing drawn to-draw]}]
+(defn old-draw [{:keys [to-draw drawing]}]
   (q/background 0 0 100)
   (q/fill 0 0 0)
-  (doseq [{:keys [x1 y1 x2 y2]} drawn]
+  (let [lines (dedupe-lines drawing)]
-    (q/line x1 y1 x2 y2))
+    (doseq [line lines]
-  (doseq [{:keys [x1 y1 x2 y2 lerp]} drawing]
+      (q/stroke-weight (- 1.75 (* 0.1 (:depth line))))
-    (let [x2 (q/lerp x1 x2 lerp)
+      (q/stroke 240 0 (+ 65 (* 2 (:depth line))))
-          y2 (q/lerp y1 y2 lerp)]
+      (apply q/line ((juxt :x1 :y1 :x2 :y2) line))))
-      (q/line x1 y1 x2 y2))))
+  (when (= (count to-draw) 0)
+    (q/no-loop)))
+
+(defn draw [{:keys [tree]}]
+  (q/background 0 0 100)
+  (let [draw-tree
+        (fn draw-tree [branch]
+          (doseq [segment (:segments branch)]
+            (q/line (:x1 segment) (:y1 segment) (:x2 segment) (:y2 segment)))
+          (doseq [child (vals (:children branch))]
+            (draw-tree child)))]
+    (draw-tree tree)
+    (q/no-loop)))
 
 (defn sketch
   [{:keys [host size]}]
@@ -120,5 +185,5 @@
    :middleware [m/fun-mode]
    :size size
    :setup setup
-   :update update-state
+   ;; :update update-state
    :draw draw))

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>