Moved to basic SVG
parent
6d78cdad2f
commit
b367dfe6cb
|
@ -10,7 +10,10 @@
|
||||||
<body>
|
<body>
|
||||||
<div>FPS: <span id="fps"></span></div>
|
<div>FPS: <span id="fps"></span></div>
|
||||||
<div>Position: <span id="pos"></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 -->
|
<!-- pointing to cljsbuild generated js file -->
|
||||||
<script src="js/frpong.js"></script>
|
<script src="js/frpong.js"></script>
|
||||||
<script type="text/javascript">frpong.core.init()</script>
|
<script type="text/javascript">frpong.core.init()</script>
|
||||||
|
|
|
@ -9,26 +9,26 @@
|
||||||
;;
|
;;
|
||||||
;; Signal Diagram
|
;; Signal Diagram
|
||||||
;;
|
;;
|
||||||
;; +---------------------+
|
;; +---------------------+
|
||||||
;; | +-------------+ |
|
;; | +-------------+ |
|
||||||
;; | | | |
|
;; | | | |
|
||||||
;; v v | |
|
;; v v | |
|
||||||
;; +----------+ vel-chan | |
|
;; +----------+ vel-chan | |
|
||||||
;; +-->|c-detector+----------+ |
|
;; +-->|c-detector+----------+ |
|
||||||
;; | +----------+ | |
|
;; | +----------+ | |
|
||||||
;; | +-----------------+ |
|
;; | +-----------------+ |
|
||||||
;; | | +-----------------+
|
;; | | +-----------------+
|
||||||
;; | | | |
|
;; | | | |
|
||||||
;; | v v |
|
;; | v v |
|
||||||
;; +---------+ frame-chan +------+ tick-chan | +----------+ pos-chan |
|
;; +---------+ frame-chan +------+ tick-chan | +----------+ pos-chan |
|
||||||
;; |frame-gen+------------>|ticker+-----------+-->|positioner+--------------+
|
;; |frame-gen+------------>|ticker+-----------+-->|positioner+--------------+
|
||||||
;; +---------+ +------+ +----------+ |
|
;; +---------+ +------+ +----------+ |
|
||||||
;; +---------------------+
|
;; +---------------------+
|
||||||
;; |
|
;; |
|
||||||
;; v
|
;; v
|
||||||
;; +----------+
|
;; +----------+
|
||||||
;; | renderer |
|
;; | renderer |
|
||||||
;; +----------+
|
;; +----------+
|
||||||
|
|
||||||
(defn positioner [tick-chan vel-chan pos-chan-in pos-chan-out]
|
(defn positioner [tick-chan vel-chan pos-chan-in pos-chan-out]
|
||||||
(go-loop
|
(go-loop
|
||||||
|
@ -38,19 +38,15 @@
|
||||||
pos-next [(+ x (* vel-x tick)) (+ y (* vel-y tick))]]
|
pos-next [(+ x (* vel-x tick)) (+ y (* vel-y tick))]]
|
||||||
(>! pos-chan-out pos-next))))
|
(>! 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
|
(go-loop
|
||||||
(let [tick (<! tick-chan)
|
(let [tick (<! tick-chan)
|
||||||
[vel-x vel-y] (<! vel-chan-in)
|
[vel-x vel-y] (<! vel-chan-in)
|
||||||
[x y] (<! pos-chan)
|
[x y] (<! pos-chan)
|
||||||
[xn yn] [(+ x (* vel-x tick)) (+ y (* vel-y tick))]]
|
[xn yn] [(+ x (* vel-x tick)) (+ y (* vel-y tick))]
|
||||||
(>! vel-chan-out
|
vel-xn (if (and (> xn padding) (< xn (- width padding))) vel-x (- vel-x))
|
||||||
(cond
|
vel-yn (if (and (> yn padding) (< yn (- height padding))) vel-y (- vel-y))]
|
||||||
(< xn 0) [(- vel-x) vel-y]
|
(>! vel-chan-out [vel-xn vel-yn]))))
|
||||||
(< yn 0) [vel-x (- vel-y)]
|
|
||||||
(> xn width) [(- vel-x) vel-y]
|
|
||||||
(> yn height) [vel-x (- vel-y)]
|
|
||||||
:else [vel-x vel-y])))))
|
|
||||||
|
|
||||||
(defn ^:export init []
|
(defn ^:export init []
|
||||||
(let [frame-chan (h/frame-chan)
|
(let [frame-chan (h/frame-chan)
|
||||||
|
@ -58,10 +54,11 @@
|
||||||
|
|
||||||
fps-chan (h/map-chan #(/ 1000 %) (h/diff-chan frame-chan2))
|
fps-chan (h/map-chan #(/ 1000 %) (h/diff-chan frame-chan2))
|
||||||
|
|
||||||
width 100
|
width 300
|
||||||
height 100
|
height 200
|
||||||
init-pos [0 50]
|
padding 5
|
||||||
init-vel [0.05 0.05]
|
init-pos [5 100]
|
||||||
|
init-vel [0.1 0.12]
|
||||||
|
|
||||||
[tick-chan-pos tick-chan-collsion] (h/dup-chan (h/diff-chan frame-chan1))
|
[tick-chan-pos tick-chan-collsion] (h/dup-chan (h/diff-chan frame-chan1))
|
||||||
|
|
||||||
|
@ -71,7 +68,8 @@
|
||||||
vel-chan (chan)
|
vel-chan (chan)
|
||||||
[vel-chan-pos vel-chan-collision] (h/dup-chan vel-chan)]
|
[vel-chan-pos vel-chan-collision] (h/dup-chan vel-chan)]
|
||||||
(positioner tick-chan-pos vel-chan-pos pos-chan-pos pos-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 (>! pos-chan init-pos))
|
||||||
(go (>! vel-chan init-vel))
|
(go (>! vel-chan init-vel))
|
||||||
|
@ -80,5 +78,5 @@
|
||||||
(let [[x y] (map int (<! pos-chan-render))]
|
(let [[x y] (map int (<! pos-chan-render))]
|
||||||
(dom/set-text! (dom/by-id "fps") (<! fps-chan))
|
(dom/set-text! (dom/by-id "fps") (<! fps-chan))
|
||||||
(dom/set-text! (dom/by-id "pos") [x y])
|
(dom/set-text! (dom/by-id "pos") [x y])
|
||||||
(dom/set-style! (dom/by-id "ball") "left" (str (+ 50 x) "px"))
|
(dom/set-attr! (dom/by-id "ball") "cx" x)
|
||||||
(dom/set-style! (dom/by-id "ball") "top" (str (+ 50 y) "px"))))))
|
(dom/set-attr! (dom/by-id "ball") "cy" y)))))
|
||||||
|
|
Loading…
Reference in New Issue