       )
     )
   )
-  
+
+(defn circles-colliding? [c1 c2]
+  (let [dx (- (:x c1) (:x c2))
+        dy (- (:y c1) (:y c2))
+        dist (Math/sqrt (+ (* dx dx) (* dy dy)))]
+    (< dist (+ (:radius c1) (:radius c2)))
+    ))
+
+(defn update-circle-delta [state]
+  (for [shape state]
+    (if (< 1 (count (filter (partial circles-colliding? shape) state)))
+      (-> shape 
+          (update :dx #(- %))
+          (update :dy #(- %))
+          )
+      shape
+      )
+    ))
+
 (defn test-delta [shape]
   (if (out-of-bounds? shape :horizontal)
     (assoc (assoc shape :dy 0) :dx 0)

  (if (or (>= (:y (:end line)) (.-innerHeight js/window)) (<= (:end line 0)))
    (swap! state (merge (update line :dy #(- %))))))

(defn render! [old-state]
  (let [new-state (-> old-state
                      (update-deltas)
                      (update-positions))]
    (clear!)
    (reset! state new-state)
    (draw! @state))
   (.requestAnimationFrame js/window #(render! @state))
)

(render! @state)

(defn add-lines! [old-state x y]
  (let [new-state (-> old-state
                      (conj {:type :line :start {:x x :y y} :end {:x x :y y} :dx 0 :dy 1 :color "#fff"})
                      (conj {:type :line :start {:x x :y y} :end {:x x :y y} :dx 0 :dy -1 :color "#fff"})
                      (conj {:type :line :start {:x x :y y} :end {:x x :y y} :dx -1 :dy 0 :color "#fff"})
                      (conj {:type :line :start {:x x :y y} :end {:x x :y y} :dx 1 :dy 0 :color "#fff"})
                      )]
    (reset! state new-state)
    ))

            [
             ;;{:type :rectangle :x 300 :y 300 :h 400 :w 400 :dx 5 :dy 2 :color "#ccc"}
             ;;{:type :rectangle :x 400 :y 400 :h 200 :w 200 :dx 5 :dy 2 :color "#aaa"}
              ;; {:type :rectangle :x 450 :y 450 :h 100 :w 100 :dx 5 :dy 2 :color "#cac"}
              ;; {:type :rectangle :x 300 :y 300 :h 100 :w 100 :dx 5 :dy 2 :color "#aba"}
              ;; {:type :rectangle :x 600 :y 600 :h 100 :w 100 :dx 5 :dy 2 :color "#b3b"}
              ;; {:type :rectangle :x 600 :y 300 :h 100 :w 100 :dx 5 :dy 2 :color "#efe"}
              ;; {:type :rectangle :x 300 :y 600 :h 100 :w 100 :dx 5 :dy 2 :color "#f5f"}
             ;;{:type :circle :x 100 :y 100 :radius 30 :dx 5 :dy 2 :color "#aaa"}
              ;; {:type :line :start {:x 100 :y 500} :end {:x 100 :y 500} :dx 0 :dy 0.2 :color "#fff"}             
              ;; {:type :line :start {:x 100 :y 500} :end {:x 100 :y 500} :dx 0 :dy -0.2 :color "#fff"}
              ;; {:type :line :start {:x 100 :y 500} :end {:x 100 :y 500} :dx 0.2 :dy 0 :color "#fff"}
              ;; {:type :line :start {:x 100 :y 500} :end {:x 100 :y 500} :dx -0.2 :dy 0 :color "#fff"}            
             
             ]
            ))

