Clojurescript: functional way to make a bouncing ball - oop

Question

I'm learning Clojurescript while comparing it to Javascript and rewritting some scripts.
In Javascript I've created a canvas with a ball in it, that when it gets to the canvas' borders, it bounces back. I've made the same in Clojurescript, it works, but I need to create atoms outside the function, so I can keep track of the state. If I want to create more balls, I will need to replicate those atoms. At that point the code will be ugly. How should I change the code so I can create multiple balls and each with it's own state?
Here is the Javascript code:
// Circle object
function Circle(pos_x, pos_y, radius, vel_x, vel_y){
// Starting variables
this.radius = radius;
this.pos_x = pos_x;
this.pos_y = pos_y;
this.vel_x = vel_x;
this.vel_y = vel_y;
// Draw circle on the canvas
this.draw = function(){
c.beginPath();
c.arc(this.pos_x, this.pos_y, this.radius, 0, Math.PI * 2, false);
c.strokeStyle = this.color;
c.lineWidth = 5;
c.fillStyle = this.color_fill;
c.fill();
c.stroke();
};
// Update the circle variables each time it is called
this.update = function(){
// Check if it goes out of the width
if(this.pos_x + this.radius > canvas.width || this.pos_x - this.radius < 0){
// Invert velocity = invert direction
this.vel_x = -this.vel_x;
}
// Check if it goies out of the height
if(this.pos_y + this.radius > canvas.height || this.pos_y - this.radius < 0){
this.vel_y = -this.vel_y;
}
// Apply velocity
this.pos_x += this.vel_x;
this.pos_y += this.vel_y;
// Draw circle
this.draw();
};
};
// Create a single circle
let one_circle = new Circle(300, 300, 20, 1, 1);
function animate(){
requestAnimationFrame(animate);
// Clear canvas
c.clearRect(0, 0, canvas.width, canvas.height);
// Update all the circles
one_circle.update();
}
animate();
Here is the Clojurescript code:
(def ball-x (atom 300))
(def ball-y (atom 300))
(def ball-vel-x (atom 1))
(def ball-vel-y (atom 1))
(defn ball
[pos-x pos-y radius]
(.beginPath c)
(.arc c pos-x pos-y radius 0 (* 2 Math/PI))
(set! (.-lineWidth c) 5)
(set! (.-fillStyle c) "red")
(.fill c)
(.stroke c))
(defn update-ball
[]
(if (or (> (+ #ball-x radius) (.-width canvas)) (< (- #ball-x radius) 0))
(reset! ball-vel-x (- #ball-vel-x)))
(if (or (> (+ #ball-y radius) (.-height canvas)) (< (- #ball-y radius) 60))
(reset! ball-vel-y (- #ball-vel-y)))
(reset! ball-x (+ #ball-x #ball-vel-x))
(reset! ball-y (+ #ball-y #ball-vel-y))
(ball #ball-x #ball-y 20))
(defn animate
[]
(.requestAnimationFrame js/window animate)
(update-ball))
(animate)
Edit: I've tried a new approach to the problem, but this doesn't work. The ball is created, but it doesn't move.
(defrecord Ball [pos-x pos-y radius vel-x vel-y])
(defn create-ball
[ball]
(.beginPath c)
(.arc c (:pos-x ball) (:pos-y ball) (:radius ball) 0 (* 2 Math/PI))
(set! (.-lineWidth c) 5)
(set! (.-fillStyle c) "red")
(.fill c)
(.stroke c))
(def balls (atom {}))
(reset! balls (Ball. 301 300 20 1 1))
(defn calculate-movement
[ball]
(let [pos-x (:pos-x ball)
pos-y (:pos-y ball)
radius (:radius ball)
vel-x (:vel-x ball)
vel-y (:vel-y ball)
new-ball (atom {:pos-x pos-x :pos-y pos-y :radius radius :vel-x vel-x :vel-y vel-y})]
; Check if out of boundaries - width
(if (or (> (+ pos-x radius) (.-width canvas)) (< (- pos-x radius) 0))
(swap! new-ball assoc :vel-x (- vel-x)))
; Check if out of boundaries - height
(if (or (> (+ pos-y radius) (.-height canvas)) (< (- pos-y radius) 60))
(swap! new-ball assoc :vel-y (- vel-y)))
; Change `pos-x` and `pos-y`
(swap! new-ball assoc :pos-x (+ pos-x (#new-ball :vel-x)))
(swap! new-ball assoc :pos-x (+ pos-y (#new-ball :vel-y)))
(create-ball #new-ball)
(println #new-ball)
#new-ball))
(defn animate
[]
(.requestAnimationFrame js/window animate)
(reset! balls (calculate-movement #balls)))
(animate)

Answer 1

I'd maintain all of the balls as a collection in an atom. Each ball could be represented as a defrecord, but here we'll just keep them as maps. Let's define two balls:
(def balls (atom [{:pos-x 300
:pos-y 300
:radius 20
:vel-x 1
:vel-y 1}
{:pos-x 500
:pos-y 200
:radius 20
:vel-x -1
:vel-y 1}]))
I'd define a function that can draw a single ball:
(defn draw-ball [ball]
(let [{:keys [pos-x pos-y radius]} ball]
(set! (.-fillStyle c) "black")
(.beginPath c)
(.arc c pos-x pos-y radius 0 (* 2 Math/PI))
(.fill c)))
While we are at it, let's define a function to clear the canvas:
(defn clear-canvas []
(.clearRect c 0 0 (.-width canvas) (.-height canvas)))
Now, let's define a function that can update a single ball:
(defn update-ball [ball]
(let [{:keys [pos-x pos-y radius vel-x vel-y]} ball
bounce (fn [pos vel upper-bound]
(if (< radius pos (- upper-bound radius))
vel
(- vel)))
vel-x (bounce pos-x vel-x (.-width canvas))
vel-y (bounce pos-y vel-y (.-height canvas))]
{:pos-x (+ pos-x vel-x)
:pos-y (+ pos-y vel-y)
:radius radius
:vel-x vel-x
:vel-y vel-y}))
With the above, we can define our animate loop
(defn animate []
(.requestAnimationFrame js/window animate)
(let [updated-balls (swap! balls #(map update-ball %))]
(clear-canvas)
(run! draw-ball updated-balls)))
The key ideas are:
each entity (ball) is represented as a map
we have defined separate functions to draw and update the ball
everything is stored in a single atom
Some advantages:
the draw function is easy to test in isolation
the update function is easy to test at the REPL (arguably, it could be cleaned up further by passing in the canvas width and height, so that it is pure)
since all of the state is in a single atom, it is easy to reset! it with some new desired state (maybe to add new balls, or just for debugging purposes)

Answer 2

With the help of #Carcigenicate, this is a working script.
;;; Interact with canvas
(def canvas (.getElementById js/document "my-canvas"))
(def c (.getContext canvas "2d"))
;;; Set width and Height
(set! (.-width canvas) (.-innerWidth js/window))
(set! (.-height canvas) (.-innerHeight js/window))
(defrecord Ball [pos-x pos-y radius vel-x vel-y])
; Making the atom hold a list to hold multiple balls
(def balls-atom (atom []))
; You should prefer "->Ball" over the "Ball." constructor. The java interop form "Ball." has a few drawbacks
; And I'm adding to the balls vector. What you had before didn't make sense.
; You put an empty map in the atom, then immedietly overwrote it with a single ball
(doseq [ball (range 10)]
(swap! balls-atom conj (->Ball (+ 300 ball) (+ 100 ball) 20 (+ ball 1) (+ ball 1))))
; You called this create-ball, but it doesn't create anything. It draws a ball.
(defn draw-ball [ball]
; Deconstructing here for clarity
(let [{:keys [pos-x pos-y radius]} ball]
(.beginPath c)
(.arc c pos-x pos-y radius 0 (* 2 Math/PI))
(set! (.-lineWidth c) 5)
(set! (.-fillStyle c) "red")
(.fill c)
(.stroke c)))
(defn draw-balls [balls]
(doseq [ball balls]
(draw-ball ball)))
(defn out-of-boundaries
[ball]
"Check if ball is out of boundaries.
If it is, returns a new ball with inversed velocities."
(let [{:keys [pos-x pos-y vel-x vel-y radius]} ball]
;; This part was a huge mess. The calls to swap weren't even in the "if".
;; I'm using cond-> here. If the condition is true, it threads the ball. It works the same as ->, just conditionally.
(cond-> ball
(or (> (+ pos-x radius) (.-width canvas)) (< (- pos-x radius) 0))
(update :vel-x -) ; This negates the x velocity
(or (> (+ pos-y radius) (.-height canvas)) (< (- pos-y radius) 60))
(update :vel-y -)))) ; This negates the y velocity
; You're mutating atoms here, but that's very poor practice.
; This function should be pure and return the new ball
; I also got rid of the draw call here, since this function has nothing to do with drawing
; I moved the drawing to animate!.
(defn advance-ball [ball]
(let [{:keys [pos-x pos-y vel-x vel-y radius]} ball
; You had this appearing after the bounds check.
; I'd think that you'd want to move, then check the bounds.
moved-ball (-> ball
(update :pos-x + vel-x)
(update :pos-y + vel-y))]
(out-of-boundaries moved-ball)))
; For convenience. Not really necessary, but it helps things thread nicer using ->.
(defn advance-balls [balls]
(mapv advance-ball balls))
(defn animate
[]
(swap! balls-atom
(fn [balls]
(doto (advance-balls balls)
(draw-balls)))))
(animate)