Refactor drawing code into separate namespace

src/heyarne/all_my_friends/client.cljs

@@ -1,24 +1,9 @@
 (ns heyarne.all-my-friends.client
-  (:require [applied-science.js-interop :as j]
+  (:require [reagent.dom :as dom]
-            [reagent.dom :as dom]
             [heyarne.all-my-friends.views :as views]))
 
-(defn draw-results [ctx _video predictions]
-  ;; remove previous results
-  (.clearRect ctx 0 0 (.. ctx -canvas -width) (.. ctx -canvas -height))
-
-  ;; draw and append new results
-  (set! (.-strokeStyle ctx) "white")
-  (doseq [prediction predictions
-          [x y _] (j/get prediction :scaledMesh)]
-    (doto ctx
-      (.beginPath)
-      (.arc x y 1 0 (* 2 Math/PI))
-      (.stroke))))
-
 (defn ^:dev/after-load init []
   (println "Initializing…")
-  (dom/render [views/app {:on-faces-detected draw-results}]
+  (dom/render [views/app] (.querySelector js/document "#app")))
-              (.querySelector js/document "#app")))
 
 (defonce app (init))

src/heyarne/all_my_friends/views.cljs

@@ -1,7 +1,8 @@
 (ns heyarne.all-my-friends.views
   (:require [reagent.core :as r]
             [applied-science.js-interop :as j]
-            [heyarne.all-my-friends.facemesh :refer [webcam-facemesh]]))
+            [heyarne.all-my-friends.facemesh :refer [webcam-facemesh]]
+            [heyarne.all-my-friends.visualize :as vis]))
 
 ;; minimalistic re-frame-like event handling
 
@@ -39,12 +40,6 @@ Seit der globalen Covid19-Pandemie sind wir alle dazu gezwungen, auf physischen
     (.drawImage ctx video-elem 0 0 (.-width canvas) (.-height canvas))
     (.getImageData ctx 0 0 (.-width canvas) (.-height canvas))))
 
-(defn draw-path [ctx path]
-  (.moveTo ctx (aget path 0 0) (aget path 0 1))
-  (doseq [[x y] (rest path)]
-    (.lineTo ctx x y))
-  (.stroke ctx))
-
 (defn preview [{{:keys [video predictions]} :snapshot}]
   (let [canvas (js/document.createElement "canvas")
         ctx (.getContext canvas "2d")]
@@ -52,23 +47,7 @@ Seit der globalen Covid19-Pandemie sind wir alle dazu gezwungen, auf physischen
     (set! (.-predictions js/window) predictions)
     (set! (.-width canvas) (.-width video))
     (set! (.-height canvas) (.-height video))
-    (set! (.-strokeStyle ctx) "pink")
+    (vis/draw-sketch ctx predictions)
-    (set! (.-lineWidth ctx) 2)
-    (set! (.-lineWidth ctx) "round")
-    #_(.putImageData ctx video 0 0)
-    (doseq [prediction predictions]
-      (draw-path ctx (.slice (j/get-in prediction [:annotations :leftEyebrowLower]) 2))
-      (draw-path ctx (j/get-in prediction [:annotations :leftEyeLower0]))
-      (draw-path ctx (j/get-in prediction [:annotations :leftEyeUpper0]))
-      (draw-path ctx (.slice (j/get-in prediction [:annotations :rightEyebrowLower]) 2))
-      (draw-path ctx (j/get-in prediction [:annotations :rightEyeLower0]))
-      (draw-path ctx (j/get-in prediction [:annotations :rightEyeUpper0]))
-      (draw-path ctx (.slice (j/get-in prediction [:annotations :lipsUpperOuter]) 3 -3))
-      (draw-path ctx (.slice (j/get-in prediction [:annotations :lipsLowerInner]) 3 -3))
-      (draw-path ctx (.slice (j/get-in prediction [:annotations :lipsLowerOuter]) 1 -2))
-      (draw-path ctx (.concat (j/get-in prediction [:annotations :noseTip])
-                              (j/get-in prediction [:annotations :midwayBetweenEyes])))
-      (draw-path ctx (.slice (j/get-in prediction [:annotations :silhouette]) 5 -5)))
     [:img {:src (.toDataURL canvas)}]))
 
 (defn snapshot [{:keys [current-snapshot]}]
@@ -89,11 +68,11 @@ Seit der globalen Covid19-Pandemie sind wir alle dazu gezwungen, auf physischen
                                               (swap! result assoc
                                                      :video video
                                                      :predictions predictions)
-                                              (on-faces-detected ctx video predictions))
+                                              (on-faces-detected ctx predictions))
                          :halt? halt?}]
        [:button {:on-click #(dispatch [:running/snapshot (update @result :video video-snapshot)])} "Cheese"]])))
 
-(defn app [{:keys [on-faces-detected]}]
+(defn app []
   (let [state @state
         status (:status state)
         current-snapshot (get-in state [:snapshots :current])]
@@ -103,7 +82,7 @@ Seit der globalen Covid19-Pandemie sind wir alle dazu gezwungen, auf physischen
        [snapshot {:current-snapshot current-snapshot}])
      (case status
        :permission-rejected [:div "Sad :("]
-       :running [running {:on-faces-detected on-faces-detected
+       :running [running {:on-faces-detected vis/draw-wireframe
                           :halt? (some? current-snapshot)}]
 
        ;; default

src/heyarne/all_my_friends/visualize.cljs

@@ -0,0 +1,41 @@
+(ns heyarne.all-my-friends.visualize
+  (:require [applied-science.js-interop :as j]))
+
+(defn draw-wireframe [ctx predictions]
+  ;; remove previous results
+  (.clearRect ctx 0 0 (.. ctx -canvas -width) (.. ctx -canvas -height))
+
+  ;; draw and append new results
+  (set! (.-strokeStyle ctx) "white")
+  (doseq [prediction predictions
+          [x y _] (j/get prediction :scaledMesh)]
+    (doto ctx
+      (.beginPath)
+      (.arc x y 1 0 (* 2 Math/PI))
+      (.stroke))))
+
+(defn- draw-path [ctx path]
+  (.moveTo ctx (aget path 0 0) (aget path 0 1))
+  (doseq [[x y] (rest path)]
+    (.lineTo ctx x y))
+  (.stroke ctx)
+  ctx)
+
+(defn draw-sketch [ctx predictions]
+  (set! (.-strokeStyle ctx) "pink")
+  (set! (.-lineWidth ctx) 2)
+  (set! (.-lineWidth ctx) "round")
+  (doseq [prediction predictions]
+    (->
+     (draw-path ctx (.slice (j/get-in prediction [:annotations :leftEyebrowLower]) 2))
+     (draw-path (j/get-in prediction [:annotations :leftEyeLower0]))
+     (draw-path (j/get-in prediction [:annotations :leftEyeUpper0]))
+     (draw-path (.slice (j/get-in prediction [:annotations :rightEyebrowLower]) 2))
+     (draw-path (j/get-in prediction [:annotations :rightEyeLower0]))
+     (draw-path (j/get-in prediction [:annotations :rightEyeUpper0]))
+     (draw-path (.slice (j/get-in prediction [:annotations :lipsUpperOuter]) 3 -3))
+     (draw-path (.slice (j/get-in prediction [:annotations :lipsLowerInner]) 3 -3))
+     (draw-path (.slice (j/get-in prediction [:annotations :lipsLowerOuter]) 1 -2))
+     (draw-path (.concat (j/get-in prediction [:annotations :noseTip])
+                         (j/get-in prediction [:annotations :midwayBetweenEyes])))
+     (draw-path (.slice (j/get-in prediction [:annotations :silhouette]) 5 -5)))))