Implementation using Clojure’s graphical tools seesaw and Quill

Machine Learning Artificial Intelligence Semantic Web Ontology Digital Transformation Web Technology Knowledge Information Processing Reasoning Technology DX Case Study Arts Clojure Java Mathematics data visualization  Navigation of this blog

Implementation using Clojure’s graphical tools seesaw and Quill

We may want to use a simple UI to do POC and other activities agilely.” As described in “Front-end development with Javascript and React” and other articles, setting up a web server and using html/Havascript/CSS to draw the UI is the most flexible (and cool) way to achieve a UI, but if you want to make it a little easier If you want to create a desktop application, seesaw is a Clojure library that you can use. This is a version of Swing, a Java graphical library, that can be used with Clojure.

The slides from Clojure/West2012 will give you an idea of what seesaw can do. To start with, see “Getting Started with Clojure” and “Setting up a Clojure development environment with SublimeText4, VS code, and LightTable” for details on setting up a Clojure environment. For an example of actual use, copy the seesaw git page and click

> git clone https://github.com/clj-commons/seesaw

Navigate to the top directory of the downloaded file and click

> lein examples

and run the sample program, the following screen appears and 44 sample demos can be viewed.

Then select the name of the sample you want to see and press “Launch” to open the screen. For example, if you select “clock”, the time will be displayed and

Select “explorer” to launch the file listing UI for the current directory.

The source files can be found under “/src/seesaw/”.

For actual usage of seesaw, add [seesaw “1.5.0”] to the project.clj of the Project file.

(defproject hello-seesaw "0.1.0-SNAPSHOT"
  :description "FIXME: write description"
  :url "http://example.com/FIXME"
  :license {:name "EPL-2.0 OR GPL-2.0-or-later WITH Classpath-exception-2.0"
            :url "https://www.eclipse.org/legal/epl-2.0/"}
  :dependencies [[org.clojure/clojure "1.11.1"]
                 [seesaw "1.5.0"]]
  :repl-options {:init-ns hello-seesaw.core})*

After that, set up the main frame drawing in the main src file “src/hello_seaswa/core.clj” as follows

(ns hello-seesaw.core
  (:use seesaw.core))

(native!)

(def f (frame :title "Get to know Seesaw"))

(-> f pack! show!)

The following screen will appear.

With the screen displayed, do the following

(config f :title)

(config! f :title "No RLY, get to know Seesaw!")

(config! f :content "This is some content")

The following results are displayed

Also, if you do the following

(def lbl (label "I'm another label"))

(config! f :content lbl)

(defn display [content]
  (config! f :content content)
  content)

(display lbl)

(config! lbl :background :pink :foreground "#00f")

(config! lbl :font "ARIAL-BOLD-21")

The font and background colors can be changed.

When creating a UI, you basically set up a window as shown below and view it with the show!

(def window (frame
   :title "First Example"
   :content "hello world"
   :width 200
   :height 50))

(show! window)

For other operations, please refer to the linked tutorial.

You can also create graphics as described in “Creating Patterns with Clojure“. If you write the following code

(ns hello-seesaw.core
  (:require 
    [seesaw
     [core :refer :all]
     [graphics :refer :all]]))

(defprotocol Shape
  (painter [this]))

(def h 500)

(def w 500)

(defn view
"Draw a set of Shapes."
  [coll]
  (let [draw (fn [c g]
               ;; flip y-axis
               (scale g 1 -1)
               (translate g 0 (- (height c)))
               (doseq [x coll] ((painter x) c g)))
        cvs (canvas :paint draw)
        f (frame :width w :height h :content cvs)]
    (show! f)))

(defrecord Triangle [a b c color]
  Shape
  (painter [_]
    (fn [_ g] (draw g
                    (polygon  a b c)
                    (style :foreground :black :background color)))))

;; constructor

(defn triangle [a b c &{:keys [color]}]
  (->Triangle a b c color))

(defn mid
  "Return the midpoint of x,y"
  [x y]
  (mapv (fn [x y] (/ (+ x y) 2)) x y))

(defn parts
  "Divide the triangle into four parts. Make the central triangle green."
  [^Triangle {:keys [a b c]}]
  (list (triangle a (mid a b) (mid a c))
        (triangle b (mid b c) (mid b a))
        (triangle c (mid c a) (mid c b))
        (triangle (mid a b) (mid b c) (mid c a) :color :green)))

(defn parts-n
  　"Divides a triangle by applying parts n times."
  [n ^Triangle x ]
  (nth (iterate #(mapcat parts %) [x]) n))

(view (parts-n 3 (triangle [100 100] [250 400] [400 100])))

The following patterns can be generated as a result.

Other well-known libraries for graphics in Clojure include Quil.

Clojure Quil is a library for creating 2D graphics and animations written in the Clojure programming language. Quil is a Clojure wrapper for a Java-based 2D graphics library called Processing. Quil allows users to create 2D graphics and animations using programs written in Clojure.

Clojure Quil supports many of the features of Processing. This includes drawing functions, colors, shapes, coordinates, transformations, mouse, keyboard, timing, etc. Quil provides its own macros and functions for defining sketches.

Quil leverages the capabilities of both Java and Clojure: Java makes it cross-platform, running on operating systems such as Windows, macOS, and Linux; Processing’s fast and powerful graphics engine and Clojure allows Quil to express programs using powerful data structures, functions, macros, and lambda expressions.

Combine Quil with mathematical algorithms to visualize fractals/chaos and

Create various GUIs and

Various animations can be created (Creative computing with Clojure).

Quil is used not only for computer graphics as such, but also for data visualization as described in “User Interface and Data Visualization Techniques” music programming as described in “Mathematics, Music, and Computers” programmable art as described in “Generative Art, Programs, and Algorithms” and other creative projects. Programmable Art” and other creative projects.

A simple sample of Quil code is shown below.

(ns example
  (:require [quil.core :as q]))

(defn setup []
  (q/frame-rate 60))

(defn draw []
  (q/background 255)
  (q/ellipse (q/mouse-x) (q/mouse-y) 50 50))

(q/defsketch example
  :title "Example Sketch"
  :setup setup
  :draw draw)

This code would be a simple sketch that draws a circle at the mouse position. The setup function is executed only once to initialize the sketch, and the draw function is executed every frame to animate the sketch. The last line defines the sketch using Clojure Quil’s defsketch macro, which contains the sketch title, the setup function, and the draw function.

To execute this sketch, load Clojure Quil with the Clojure REPL and then evaluate (example) to load the sketch, which shall open the sketch window and draw a circle when the mouse is moved.