Rotacija in zamikanje

project.clj

@@ -15,7 +15,8 @@
                  [ring "1.7.0-RC1"]
                  [compojure "1.6.1"]
                  [reagent "0.8.1"]
-                 [secretary "1.2.3"]]
+                 [secretary "1.2.3"]
+                 [cljsjs/rc-slider "8.6.1-0"]]
 
   :plugins [[lein-figwheel "0.5.16"]
             [lein-cljsbuild "1.1.7" :exclusions [[org.clojure/clojure]]]]

src/sliva/data.cljs

@@ -2,16 +2,12 @@
   (:require [cljs.core.async :refer [chan]]
             [reagent.core :as reagent]))
 
-;; App state atom
-(def appstate
-  (reagent/atom
-   {:clients []
-    :vtic (chan)
-    :vizual {:animiraj false
+
+(def initial-vizual-params
   ;;;;; ☭☭☭☭☭☭☭☭☭☭☭☭☭☭ ;;;;;;
   ;; ☭☭☭☭ Parametri razni ☭☭☭☭ ;;
   ;;;;; ☭☭☭☭☭☭☭☭☭☭☭☭☭☭ ;;;;;;
-             :odmik-kamere 100
+  {:odmik-kamere 100
    :rotacija-kamere 1
    :bg-barva 0x000000
    :FOV 140
@@ -22,9 +18,19 @@
    :rotacija-x 0.006
    :rotacija-y 0.001
    :rotacija-z 0.003
+   :center-x 0
+   :center-y 0
+   :center-z 0
    :zamik-barve 0.0000666
    :zacetna-barva 0.333
    :saturacija 1
    :svetlost 0.4
    :w-diff 0.5
-             :gostota-obj 2}}))
+   :gostota-obj 2})
+
+;; App state atom
+(def appstate
+  (reagent/atom
+   {:clients []
+    :vtic (chan)
+    :vizual (merge {:animiraj false} initial-vizual-params)}))

src/sliva/gfx.cljs

@@ -51,8 +51,14 @@
     (.push koti (js/THREE.Vector3. zamik 0 0) (js/THREE.Vector3. 0 -zamik 0))
 
     (let [obj (js/THREE.Line. geo mat (.-LineSegments js/THREE))
+          position (.-position obj)
           novi-objekti (conj (take (get-param :obj-limit) (get-param :objekti))
                              obj)]
+      (-> position
+          (.setX (get-param :center-x))
+          (.setY (get-param :center-y))
+          (.setZ (get-param :center-z)))
+
       (.add scena obj)
 
       ;; pucaj sceno ane
@@ -111,7 +117,15 @@
   (.removeEventListener js/window "resize" on-window-resize false)
   (.removeChild container (.-firstChild container)))
 
-(defn spin-objects [[cas x y z]]
-  (update-param :rotacija-x (fn [old] (+ old (/ x 1000))))
-  (update-param :rotacija-y (fn [old] (+ old (/ y 1000))))
-  (update-param :rotacija-z (fn [old] (+ old (/ z 1000)))))
+(defn spin-objects [[cas a b g]]
+  ;; (update-param :rotacija-x (fn [old] (+ old (/ x 1000))))
+  ;; (update-param :rotacija-y (fn [old] (+ old (/ y 1000))))
+  ;; (update-param :rotacija-z (fn [old] (+ old (/ z 1000)))))
+  (set-param :rotacija-x (/ a 10000))
+  (set-param :rotacija-y (/ b 10000))
+  (set-param :rotacija-z (/ g 10000)))
+
+(defn displace-objects [[cas x y z]]
+  (update-param :center-x (fn [old] (+ old (* x 10))))
+  (update-param :center-y (fn [old] (+ old (* y 10))))
+  (update-param :center-z (fn [old] (+ old (* z 10)))))

src/sliva/pages/gibanica.cljs

@@ -11,7 +11,7 @@
         gibZ (.-z pospesek)
         cas (-> (js/Date.)
                 (.valueOf))]
-    (send-message "gibanica" cas gibX gibY gibZ)))
+    (send-message "motion" cas gibX gibY gibZ)))
 
 (defn start-motion-track []
   (.addEventListener js/window "devicemotion" motion-track))
@@ -19,12 +19,36 @@
 (defn stop-motion-track []
   (.removeEventListener js/window "devicemotion" motion-track))
 
+(defn rotation-track [event]
+  (let [alpha (.-alpha event)
+        beta (.-beta event)
+        gamma (.-gamma event)
+        cas (-> (js/Date.)
+                (.valueOf))]
+    (send-message "rotation" cas alpha beta gamma)))
+
+(defn start-rotation-track []
+  (.addEventListener js/window "deviceorientation" rotation-track))
+
+(defn stop-rotation-track []
+  (.removeEventListener js/window "deviceorientation" rotation-track))
+
 (defn gibanica []
   (reagent/create-class
    {:display-name "gibanica"
-    :reagent-render (fn [] [:div
-                           [:h1 "gibaj me!"]
-                           [navigation]])
-    :component-did-mount #(start-motion-track)
-    :component-will-unmount #(stop-motion-track)}))
+    :component-did-mount (fn []
+                           (start-motion-track)
+                           (start-rotation-track))
+    :component-will-unmount (fn []
+                              (stop-motion-track)
+                              (stop-rotation-track))
+    :reagent-render
+    (fn []
+      [:div
+       [:h3 "gibaj me!"]
+       (let [vizual [:vizual @appstate]]
+         [:input {:type "range"
+                  :min 0
+                  :max 50}])
+       [navigation]])}))
 

src/sliva/pages/navigation.cljs

@@ -2,7 +2,7 @@
 
 (defn navigation []
   [:div
-   [:h2 "Navigation"]
+   [:h3 "Navigation"]
    [:ul
     [:li [:a {:href "#/hub"} "Hub"]]
     [:li [:a {:href "#/visual"} "Visual"]]

src/sliva/server/handlers.clj

@@ -34,7 +34,8 @@
                 (println "command" cmd args)
                 (condp = cmd
                   "ping" (>! ws-ch "pong")
-                  "gibanica" (send-all "spin" args)
+                  "motion" (send-all "displace" args)
+                  "rotation" (send-all "spin" args)
                   (println "DEBUG: msg ignored: " cmd)))
               (recur))))))))
 ;;(close! ws-ch)))))

src/sliva/socket.cljs

@@ -3,7 +3,7 @@
             [clojure.string :as str]
             [cljs.core.async :refer [<! >! put! close!]]
             [sliva.data :refer [appstate]]
-            [sliva.gfx :refer [spin-objects]])
+            [sliva.gfx :refer [spin-objects displace-objects]])
   (:require-macros [cljs.core.async.macros :refer [go go-loop]]))
 
 (defn handle-message [msg-str]
@@ -13,6 +13,7 @@
       "pong" (console.log "hura, server se odziva")
       "open" (swap! appstate assoc :clients (conj (:clients @appstate) (first args)))
       "spin" (spin-objects args)
+      "displace" (displace-objects args)
       (console.info "msg ingored: " msg))))
 
 (defn send-message [& message]