diff --git a/src/heyarne/all_my_friends/client.cljs b/src/heyarne/all_my_friends/client.cljs index b08410f..1856cdf 100644 --- a/src/heyarne/all_my_friends/client.cljs +++ b/src/heyarne/all_my_friends/client.cljs @@ -1,24 +1,9 @@ (ns heyarne.all-my-friends.client - (:require [applied-science.js-interop :as j] - [reagent.dom :as dom] + (:require [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}] - (.querySelector js/document "#app"))) + (dom/render [views/app] (.querySelector js/document "#app"))) (defonce app (init)) diff --git a/src/heyarne/all_my_friends/views.cljs b/src/heyarne/all_my_friends/views.cljs index a4dbe78..ccc07fb 100644 --- a/src/heyarne/all_my_friends/views.cljs +++ b/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") - (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))) + (vis/draw-sketch ctx predictions) [: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 diff --git a/src/heyarne/all_my_friends/visualize.cljs b/src/heyarne/all_my_friends/visualize.cljs new file mode 100644 index 0000000..5053baf --- /dev/null +++ b/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)))))