New intro text, switch sketch and 3d model vis

src/heyarne/all_my_friends/views.cljs

@@ -26,11 +26,11 @@
   [:section#welcome-message
    {:class (str (when hidden? "hidden"))}
    [:h1 "Hi Freund!"]
-   [:p "Ich möchte dir kurz erklären, was dich hier erwartet:
-Seit der globalen Covid19-Pandemie sind wir alle dazu gezwungen, auf physischen Kontakt weitgehend zu verzichten. Ein Großteil der Zeit, die ich mit euch verbringe, hat sich ins Digitale verlagert."]
-   [:p "Das fühlt sich sicher bald komplett normal an -- vorher möchte ich aber gerne irgendwas mit dem komischen Gefühl machen, das das hinterlässt."]
-   [:p "Ich würde mich freuen, wenn du mir dabei hilfst. Folge dazu einfach den Anweisungen. Das Ergebnis wird hoffentlich eine schöne Sammlung von Webcambildern und 3D-Modellen eurer Köpfe."]
-   [:button {:on-click #(dispatch [:welcome/continue])} "Cool cool, weiter bitte"]])
+   [:p "Ich habe eine kleine App gebaut, um mit einem komischen Gefühl umzugehen, dass sich in letzter Zeit bei mir eingestellt hat:
+Seit der globalen Covid19-Pandemie sind wir alle dazu gezwungen, auf physischen Kontakt weitgehend zu verzichten. Ein Großteil der Zeit, die ich mit Freunden hat sich ins Digitale verlagert."]
+   [:p "Das fühlt sich sicher bald komplett normal an -- vorher möchte ich aber gerne irgendwas mit dem Gefühl machen, das das hinterlässt. Wer ein Audiosample mit einem Frequenzbereich von bis zu 22 kHz aufnehmen möchte, muss auf 44 kHz samplen, und wer ein Foto mit einer Webcam macht bekommt... was jetzt genau?"]
+   [:p "Du machst mit der App ein Selfie. Darauf wird etwas algorithmisches Voodoo gegossen und heraus kommt ein 3D-Modell, dass du mir schicken kannst."]
+   [:button {:on-click #(dispatch [:welcome/continue])} "Klingt cool, weiter bitte"]])
 
 (defn video-snapshot [video-elem]
   (let [canvas (js/document.createElement "canvas")
@@ -47,7 +47,8 @@ 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))
-    (vis/draw-sketch ctx predictions)
+    (.putImageData ctx video 0 0)
+    (vis/draw-wireframe ctx predictions)
     [:img {:src (.toDataURL canvas)}]))
 
 (defn snapshot [{:keys [current-snapshot]}]
@@ -82,7 +83,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 vis/draw-wireframe
+       :running [running {:on-faces-detected vis/draw-sketch
                           :halt? (some? current-snapshot)}]
 
        ;; default

src/heyarne/all_my_friends/visualize.cljs

@@ -3,7 +3,7 @@
 
 (defn draw-wireframe [ctx predictions]
   ;; remove previous results
-  (.clearRect ctx 0 0 (.. ctx -canvas -width) (.. ctx -canvas -height))
+  #_(.clearRect ctx 0 0 (.. ctx -canvas -width) (.. ctx -canvas -height))
 
   ;; draw and append new results
   (set! (.-strokeStyle ctx) "white")
@@ -15,6 +15,7 @@
       (.stroke))))
 
 (defn- draw-path [ctx path]
+  (.beginPath ctx)
   (.moveTo ctx (aget path 0 0) (aget path 0 1))
   (doseq [[x y] (rest path)]
     (.lineTo ctx x y))
@@ -22,9 +23,14 @@
   ctx)
 
 (defn draw-sketch [ctx predictions]
-  (set! (.-strokeStyle ctx) "pink")
+  ;; remove previous results
+  (.clearRect ctx 0 0 (.. ctx -canvas -width) (.. ctx -canvas -height))
+
+  (set! (.-strokeStyle ctx) "white")
   (set! (.-lineWidth ctx) 2)
   (set! (.-lineWidth ctx) "round")
+  (.setLineDash ctx #js [1 1])
+
   (doseq [prediction predictions]
     (->
      (draw-path ctx (.slice (j/get-in prediction [:annotations :leftEyebrowLower]) 2))
@@ -36,6 +42,6 @@
      (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])
+     #_(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)))))