                                     nil
                                     (conj (vec (project-point position velocity)) mass)))
                                 splatter)]
-    {:air path
-     :path (map #(conj %1 %2) projected-path masses)
+    {:colour (pick-a-colour)
+     :air-path path
+     :canvas-path (map #(conj %1 %2) projected-path masses)
      :splatter (filter #(not-any? nil? %) (partition-by nil? projected-splatter))}))
 
 
-;; lets draw these things
+
+
+
+
+;; ## Rendering the canvas
+
+;; We need to know the available size for the outputted image to fit
+;; in. To work this out we are going to have to interface with
+;; JavaScript directly. Luckily ClojureScript makes this very easy
+;; using the js namespace.
+
+(def image-width (.-clientWidth (.querySelector js/document "#pollock")))
+
+;; Now we have the width of the image we can use the dimensions of the
+;; space to work out the pixel size of the image and how to convert
+;; between metres and pixels.
+
+(def pixels-in-a-metre
+  (let [[width _ _] space]
+    (/ image-width width)))
+
+(defn metres-to-pixels [metres]
+  (Math/floor (* metres pixels-in-a-metre)))
+
+;; We can now use this function to work out the size the sketch should
+;; be and how to convert a position in metres over to a position to be
+;; drawn in the image.
 
 (def sketch-size
-  (let [[width _ height] space-in-pixels]
-    [width height]))
+  (let [[width _ height] space]
+    [(metres-to-pixels width)
+     (metres-to-pixels height)]))
 
 (defn position-to-pixel [[i j k]]
-  [(Math/floor (metres-to-pixels i))
-   (Math/floor (metres-to-pixels k))])
-
+  [(metres-to-pixels i)
+   (metres-to-pixels k)])
+
+
+;; Now the dimensions of the image our calculated we can use Quil to
+;; define the sketch that we will draw into. We also need to define a
+;; function that will initialise the image into the state we want it.
+;; This function will be run when the sketch is defined.
+
+(defn setup-image []
+  (apply q/background canvas-colour)
+  (q/fill 0))
+
+(q/defsketch pollock
+  :setup setup-image
+  :host "pollock"     ;; the id of the <canvas> element
+  :size sketch-size)
+
+;; To draw the trails of paint across the canvas we need draw a path
+;; following the defined positions, which takes into account the
+;; amount of paint at each position and uses this to set with width of
+;; the path. In order to do this cleanly in Quil we need to consider
+;; the path as pairs of positions that we shall draw paths between
+;; using the initial paint amount as the stroke-weight. This allows
+;; for a smooth decrease in the width of the path.
 
 (defn draw-path [path]
   (doall

     projected-velocity]))


;; splatter
;; now that we know the impact velocity of a point, we know need to
;; work out whether that impact should splatter


                             (js/setInterval (fn []
                                               (if (> @fill-count 500)
                                                 (js/clearInterval @interval-ref)
                                                 (do (fling-and-render) (swap! fill-count inc)))) 100))))

