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

New intro text, switch sketch and 3d model vis

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

5
resources/public/style.css
View file

@ -41,6 +41,11 @@ p:first-of-type {
margin-top: 24px; margin-top: 24px;
} }
h1 ~ p:first-of-type {
margin-top: 16px
}
p:first-child { p:first-child {
margin-top: 0; margin-top: 0;
} }

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

@ -26,11 +26,11 @@
[:section#welcome-message [:section#welcome-message
{:class (str (when hidden? "hidden"))} {:class (str (when hidden? "hidden"))}
[:h1 "Hi Freund!"] [:h1 "Hi Freund!"]
[:p "Ich möchte dir kurz erklären, was dich hier erwartet: [: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 euch verbringe, hat sich ins Digitale verlagert."] 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 komischen Gefühl machen, das das hinterlässt."] [: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 "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."] [: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])} "Cool cool, weiter bitte"]]) [:button {:on-click #(dispatch [:welcome/continue])} "Klingt cool, weiter bitte"]])
(defn video-snapshot [video-elem] (defn video-snapshot [video-elem]
(let [canvas (js/document.createElement "canvas") (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! (.-predictions js/window) predictions)
(set! (.-width canvas) (.-width video)) (set! (.-width canvas) (.-width video))
(set! (.-height canvas) (.-height 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)}])) [:img {:src (.toDataURL canvas)}]))
(defn snapshot [{:keys [current-snapshot]}] (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}]) [snapshot {:current-snapshot current-snapshot}])
(case status (case status
:permission-rejected [:div "Sad :("] :permission-rejected [:div "Sad :("]
:running [running {:on-faces-detected vis/draw-wireframe :running [running {:on-faces-detected vis/draw-sketch
:halt? (some? current-snapshot)}] :halt? (some? current-snapshot)}]
;; default ;; default

12
src/heyarne/all_my_friends/visualize.cljs
View file

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