 (defn module-critter [critter] 
     (let [{:keys [x y]} critter]
         [:g.module-critter 
-            {:style {:transition "transform 100ms"
+            {:style {:transition "transform 500ms"
                      :transform (translate x y)}}
             [:circle {:r 20 :style {:fill "brown"}}]]))
 


(def add-point (to-point-fn +))
(def subtract-point (to-point-fn -))

(defn abs-point [a] 
    assoc a :x (Math/abs (:x a))
            :y (Math/abs (:y a)))

(defn move-towards [r start end]
    (let [angle (:angle (cartesian->polar (subtract-point start end)))
          diff (polar->cartesian {:angle angle :r r})]
        (subtract-point start diff)))

(defn move-critters! [] 
    (let [{:keys [width height critters]} @app-state
          critter-target (center-of-points critters)
          move-towards-target #(move-towards 10 % critter-target)
          next-critters (map move-towards-target critters)]
        (swap! app-state assoc :critters next-critters)))

(defn app-loop! [] 
    (js/setTimeout (fn [] 
        (move-critters!)
        (app-loop!)) 
    100))


(defn translate [x y] (str "translate(" x "px," y "px)"))

;; define your app data so that it doesn't get over-written on reload

(defn init-critters []
    (let [names ["Slipper" "Allegra" "Squeaky" "Sarah Jane" "Totoro"
        ]]
        (map #(hash-map 
            :name % 
            :x (rand-int 500) 
            :y (rand-int 500)
            :velocity {:r 0 :angle 0}) 
        names)))

(defonce app-state (atom {
    :critters (init-critters)
