Moved to basic SVG

master
Abhinav Sarkar 9 years ago
parent 6d78cdad2f
commit b367dfe6cb
  1. 5
      resources/public/index.html
  2. 70
      src/cljs/frpong/core.cljs

@ -10,7 +10,10 @@
<body>
<div>FPS: <span id="fps"></span></div>
<div>Position: <span id="pos"></span></div>
<div style="position: absolute" id="ball">O</div>
<svg style="width: 300px; height: 200px; border: 1px black solid" id="canvas">
<circle id="ball" r="5" cx="5" cy="100"/>
</svg>
<!-- pointing to cljsbuild generated js file -->
<script src="js/frpong.js"></script>
<script type="text/javascript">frpong.core.init()</script>

@ -9,26 +9,26 @@
;;
;; Signal Diagram
;;
;; +---------------------+
;; | +-------------+ |
;; | | | |
;; v v | |
;; +----------+ vel-chan | |
;; +-->|c-detector+----------+ |
;; | +----------+ | |
;; | +-----------------+ |
;; | | +-----------------+
;; | | | |
;; | v v |
;; +---------+ frame-chan +------+ tick-chan | +----------+ pos-chan |
;; |frame-gen+------------>|ticker+-----------+-->|positioner+--------------+
;; +---------+ +------+ +----------+ |
;; +---------------------+
;; |
;; v
;; +----------+
;; | renderer |
;; +----------+
;; +---------------------+
;; | +-------------+ |
;; | | | |
;; v v | |
;; +----------+ vel-chan | |
;; +-->|c-detector+----------+ |
;; | +----------+ | |
;; | +-----------------+ |
;; | | +-----------------+
;; | | | |
;; | v v |
;; +---------+ frame-chan +------+ tick-chan | +----------+ pos-chan |
;; |frame-gen+------------>|ticker+-----------+-->|positioner+--------------+
;; +---------+ +------+ +----------+ |
;; +---------------------+
;; |
;; v
;; +----------+
;; | renderer |
;; +----------+
(defn positioner [tick-chan vel-chan pos-chan-in pos-chan-out]
(go-loop
@ -38,19 +38,15 @@
pos-next [(+ x (* vel-x tick)) (+ y (* vel-y tick))]]
(>! pos-chan-out pos-next))))
(defn collision-detector [width height tick-chan pos-chan vel-chan-in vel-chan-out]
(defn collision-detector [width height padding tick-chan pos-chan vel-chan-in vel-chan-out]
(go-loop
(let [tick (<! tick-chan)
[vel-x vel-y] (<! vel-chan-in)
[x y] (<! pos-chan)
[xn yn] [(+ x (* vel-x tick)) (+ y (* vel-y tick))]]
(>! vel-chan-out
(cond
(< xn 0) [(- vel-x) vel-y]
(< yn 0) [vel-x (- vel-y)]
(> xn width) [(- vel-x) vel-y]
(> yn height) [vel-x (- vel-y)]
:else [vel-x vel-y])))))
[xn yn] [(+ x (* vel-x tick)) (+ y (* vel-y tick))]
vel-xn (if (and (> xn padding) (< xn (- width padding))) vel-x (- vel-x))
vel-yn (if (and (> yn padding) (< yn (- height padding))) vel-y (- vel-y))]
(>! vel-chan-out [vel-xn vel-yn]))))
(defn ^:export init []
(let [frame-chan (h/frame-chan)
@ -58,10 +54,11 @@
fps-chan (h/map-chan #(/ 1000 %) (h/diff-chan frame-chan2))
width 100
height 100
init-pos [0 50]
init-vel [0.05 0.05]
width 300
height 200
padding 5
init-pos [5 100]
init-vel [0.1 0.12]
[tick-chan-pos tick-chan-collsion] (h/dup-chan (h/diff-chan frame-chan1))
@ -71,7 +68,8 @@
vel-chan (chan)
[vel-chan-pos vel-chan-collision] (h/dup-chan vel-chan)]
(positioner tick-chan-pos vel-chan-pos pos-chan-pos pos-chan)
(collision-detector width height tick-chan-collsion pos-chan-collision vel-chan-collision vel-chan)
(collision-detector width height padding
tick-chan-collsion pos-chan-collision vel-chan-collision vel-chan)
(go (>! pos-chan init-pos))
(go (>! vel-chan init-vel))
@ -80,5 +78,5 @@
(let [[x y] (map int (<! pos-chan-render))]
(dom/set-text! (dom/by-id "fps") (<! fps-chan))
(dom/set-text! (dom/by-id "pos") [x y])
(dom/set-style! (dom/by-id "ball") "left" (str (+ 50 x) "px"))
(dom/set-style! (dom/by-id "ball") "top" (str (+ 50 y) "px"))))))
(dom/set-attr! (dom/by-id "ball") "cx" x)
(dom/set-attr! (dom/by-id "ball") "cy" y)))))

Loading…
Cancel
Save