graphics-with-clojure.md

Creative coding with Clojure

Clojure is a very versatile language and can generate data visualizations and graphics from data.

• Quil - generate 2D graphics and animations
• Thi.ng - computational design tools
• play.cljc - making games (OpenGL and WebGL)
• Oz - data visualization and scientific document processing library

Scalable Vector Graphics

Clojure can generate Scalable Vector Graphics (SVG), which are images drawn from a collection of points and paths. SVG images keep their quality when made larger or smaller. Using SVG images for the web and responsive design is highly recommended.

This example of an SVG image is made from:

• a green circle and a smaller blue circle
• a white curvy path

(defn concentric-circles []
  [:svg {:style {:border "1px solid"
                 :background "white"
                 :width "150px"
                 :height "150px"}}
   [:circle {:r 50, :cx 75, :cy 75, :fill "green"}]
   [:circle {:r 30, :cx 75, :cy 75, :fill "blue"}]
   [:path {:stroke-width 12
           :stroke "white"
           :fill "none"
           :d "M 30,40 C 100,40 50,110 120,110"}]])

Note::

Add another path to the code to make a curvy lambda symbol

---

Add the following path to the above code to make a curvy lambda symbol

   [:path {:stroke-width 12
           :stroke "white"
           :fill "none"
           :d "M 75,75 C 50,90 50,110 35,110"}]

Or simply replace the code with this example

(defn concentric-circles []
  [:svg {:style {:border "1px solid"
                 :background "white"
                 :width "150px"
                 :height "150px"}}
   [:circle {:r 50, :cx 75, :cy 75, :fill "green"}]
   [:circle {:r 30, :cx 75, :cy 75, :fill "blue"}]
   [:path {:stroke-width 12
           :stroke "white"
           :fill "none"
           :d "M 30,40 C 100,40 50,110 120,110"}]
   [:path {:stroke-width 12
           :stroke "white"
           :fill "none"
           :d "M 75,75 C 50,90 50,110 35,110"}]])