Clojure Course - Introduction

Challenge: Polygon

Connect the dots in clockwise order

Solution in Clojure language:


(defn points
  "Create a number of random coordinates"
  [n]
  (partition 2 (repeatedly (* n 2) #(- 170 (rand-int 340)))))

(defn angle
  "Calculate the angle of a point compared to Origin"
  [[x y]]
  (Math/atan2 y x))

(defn setup
  "Configure the canvas 2d context"
  [wall]
  (.clearRect wall 0 0 340 340)
  (set! (.-fillStyle wall) "orange")
  (.fillRect wall 170 0 1 340)
  (.fillRect wall 0 170 340 1)
  (set! (.-fillStyle wall) "purple")
  (set! (.-strokeStyle wall) "red"))

(defn cart
  "Draw something on the wall by cartesian coordinates"
  [draw wall]
  (do (.save wall)
    (.translate wall 170 170)
    (.scale wall 1 -1)
    (draw)
    (.restore wall)))

(defn draw-dots
  "Returns a function that draws all dots"
  [coords wall]
  #(doall (map (fn [[x y]] (do
                         (.beginPath wall)
                         (.arc wall x y 3 0 7)
                         (.fill wall))) coords)))

(defn draw-line
  "Returns a function that connects all the dots"
  [[[x0 y0] & coords] wall]
  #(do (.beginPath wall)
     (.moveTo wall x0 y0)
     (doall (map (fn [[x y]] (.lineTo wall x y)) coords))
     (.closePath wall)
     (.stroke wall)))

(let [n (.-value (.querySelector js/document "input"))
      coords (sort-by angle (points n))
      wall (.getContext (.querySelector js/document "canvas") "2d")]
  (setup wall)
  (cart (draw-dots coords wall) wall)
  (cart (draw-line coords wall) wall)
  coords)

What is happening here?

The Clojure code above is compiled to Javascript in real time. This is the power of ClojureScript. We can manipulate the DOM with Clojure, use Javascript functions, and draw on the canvas.

Cool, right? :)

[clj] polygon challenge