near/heyarne.all-my-friends.app
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Refactor drawing code into separate namespace

Browse source
This commit is contained in:
heyarne 2020-05-08 10:03:23 +02:00
commit 670e211faf
3 changed files with 49 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/heyarne/all_my_friends/client.cljs
View file

@ -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))

33
src/heyarne/all_my_friends/views.cljs
View file

@ -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

41
src/heyarne/all_my_friends/visualize.cljs Normal file
View file

@ -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)))))