ClojureのグラフィカルツールseesawとQuilを用いた実装
POC等の活動をagileに行う為に簡易なUIを使いたい場合がある。”JavascriptとReactによるフロントエンド開発“等で述べているように、WEBサーバーを立ち上げて、html/Havascript/CSS等で描いていく手法を用いることが最もフレキシブルな(と格好良い)UIを実現できる手段となるが、もう少しお手軽にデスクトップアプリとして作りたい場合に利用できるClojureのライブラリーとしてseesawがある。これはJavaのグラフィカルライブラリであるSwingをClojureで利用できるようにしたものとなる。
seesawで何ができるのかはClojure/West2012のスライド資料を見ると理解できる。まずClojure環境の立ち上げは””Clojureを始めよう“や”SublimeText4とVS code、LightTableでのClojureの開発環境立ち上げ“を参照のこと。実際の使用例はseesawのgitのページをcopyし
> git clone https://github.com/clj-commons/seesaw
ダウンロードしたファイルのトップディレクトリに移動して、
> lein examples
とサンプルプログラムを動作させると以下のような画面が現れ、44個のサンプルデモを見ることができる。
あとは見てみたいサンプル名を選んで”Launch”を押すと画面が現れる。例えば”clock”を選ぶと時刻が表示され
“explorer”を選択すると、現在のディレクトリのファイル一覧UIを起動させることができる。
具体的なソースファイルは”/src/seesaw/”以下で見ることができる。
実際のseesawの使い方としてはProjectファイルのproject.cljのdedenciesらに[seesaw “1.5.0”]を加え
(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})*
後はsrcのメインファイルである”src/hello_seaswa/core.clj”で以下のようにメインフレームの描画を設定すると
(ns hello-seesaw.core
(:use seesaw.core))
(native!)
(def f (frame :title "Get to know Seesaw"))
(-> f pack! show!)
以下のような画面が表示される。
画面が表示されている状態で以下のようにすると
(config f :title)
(config! f :title "No RLY, get to know Seesaw!")
(config! f :content "This is some content")
以下のような結果が表示される。
また以下のようにすると
(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")
フォントやバックグラウンドの色を変えることができる。
UIを作る際には基本的には以下のようにwindowを設定してshow!コマンドで見る形となる。
(def window (seesaw/frame
:title "First Example"
:content "hello world"
:width 200
:height 50))
(seesaw/show! window)
その他の動作に関しては、リンク先のtutorialを参照のこと。
また、”Clojureで模様を作る“に紹介されているがグラフィクスを作成することもできる。以下のようなコードを書くと
(ns hello-seesaw.core
(:require
[seesaw
[core :refer :all]
[graphics :refer :all]]))
(defprotocol Shape
(painter [this]))
(def h 500)
(def w 500)
(defn view
"Shapeの集合を描画する。"
[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
"x,yの中点を返す"
[x y]
(mapv (fn [x y] (/ (+ x y) 2)) x y))
(defn parts
"三角形を4つの部分に分割する。中央の三角形を緑にする。"
[^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
"partsをn回適用する事で、三角形を分割する"
[n ^Triangle x ]
(nth (iterate #(mapcat parts %) [x]) n))
(view (parts-n 3 (triangle [100 100] [250 400] [400 100])))
結果として以下のような模様を生成することができる。
その他のClojureでのグラフィクスのライブラリとしては有名なものとしてはQuilがある。
Clojure Quilは、Clojureプログラミング言語で書かれた2Dグラフィックスおよびアニメーションを作成するためのライブラリとなる。Quilは、ProcessingというJavaベースの2DグラフィックスライブラリのClojureラッパーで、Quilを使用すると、Clojureで記述されたプログラムを使用して、2Dグラフィックスおよびアニメーションを作成することができる。
Clojure Quilは、Processingの機能の多くをサポートしており。これには、描画機能、色、形状、座標、変換、マウス、キーボード、タイミングなどが含まれます。Quilは、スケッチを定義するための独自のマクロと関数を提供する。
Quilは、JavaとClojureの両方の機能を活用しています。Javaによって、Windows、macOS、Linuxなどのオペレーティングシステム上で動作するクロスプラットフォームとなり、Processingの高速で強力なグラフィックスエンジンを利用することができ、Clojureによって、Quilは強力なデータ構造、関数、マクロ、およびラムダ式を使用してプログラムを表現できる。
Quilと数学的アルゴリズムを組み合わせてフラクタル/カオスを可視化したり
様々なGUIを作成したり
様々なアニメーションを作成することができる(Creative computing with Clojure)。
Quilは、そのようなコンピュータグラフィックスだけでなく、”ユーザーインターフェースとデータビジュアライゼーション技術“で述べたデータビジュアライゼーション、”数学と音楽とコンピューター“で述べた音楽プログラミング、”ジェネレーティブアートとプログラムとアルゴリズム“で述べたプログラマブルアート、およびその他の創造的なプロジェクトにも用いられる。
以下にQuilの簡単なサンプルコードを示す。
(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)
このコードは、マウスの位置に円を描画するシンプルなスケッチとなる。 setup
関数は、スケッチを初期化するために1回だけ実行され、draw
関数は、スケッチをアニメーションするためにフレームごとに実行される。最後の行は、Clojure Quilのdefsketch
マクロを使用して、スケッチを定義している。defsketch
マクロには、スケッチのタイトル、setup
関数、draw
関数が含まれる。
このスケッチを実行するには、Clojure REPLでClojure Quilをロードしてから、スケッチをロードするために (example)
を評価すると、スケッチウィンドウが開き、マウスを動かすと円が描画されるものとなる。
コメント
[…] ClojureのグラフィカルツールseesawとQuilを用いた実装 […]
[…] ClojureのグラフィカルツールseesawとQuilを用いた実装 […]
[…] また”ClojureのグラフィカルツールseesawとQuilを用いた実装“に述べているグラフィックスと組み合わせたアートも作られている。 […]