LoginSignup
1
2

More than 5 years have passed since last update.

## Clojureでお絵描き~quilの使い方~

Posted at

Clojureにはquilというプロセッシングをラップしたライブラリーがあります。
quilを使えば、アートを描いたり、関数のグラフを描いたりと、使い方は多様です。

今日は、そんな楽しいライブラリーであるquilをご紹介したいと思います。

基本的使い方

quilには

defsketch

というマクロがあり、このマクロ中に必要な情報を書き込むことで
グラフィックスを描画しています。

  (q/defsketch test
    :size [500 500]

    :setup (fn  [] (q/background 255)) ;; 背景を白色に設定

    :draw (fn [] (q/with-fill [0 0 200]
                   (q/rect 100 100 200 200)) ;; (100,100),(200,200)を頂点とする青色の長方形
            ))

これで以下のようなグラフィックスが生成されました。

image.png

2D primitives

quilには数多くの関数が用意されていますが、
その中でも二次元の基礎的図形を描画するものを
いくつか紹介します。

関数   アウトプット
ellipse  楕円
arc 円弧
line 直線
  (q/defsketch test
    :size [500 500 ]

    :setup (fn  [] (q/background 255))

    :draw (fn []
            (q/with-fill [200 0 0]
              (q/ellipse 100 100 50 50))

            (q/with-fill [0 200 0]
              (q/arc 100 100 300 300  0 1/2))

            ))

ellipse-and-arc.png

適切に関数を作っていくと、全てを一度に
defsketchの中にかくより楽になります。

  (defn draw-circle [x y r fill]
    (q/with-fill fill (q/ellipse x y r r )))

  (defn rand-color [] [(rand-int 255) (rand-int 255) (rand-int 255)])

  (defn rand-circles [] (doseq [i (range 0 500 50)] (draw-circle i i 50 (rand-color))))

  (q/defsketch test
    :size [500 500 ]

    :setup (fn  []
             (q/background 255)
             (rand-circles))

rand-circle.png

図形の移動と回転

with-translation, with-rotationというマクロを使うと、
図形を平行移動・回転させることができます。

translate, rotateという関数もありますが、これらの関数を使うと
直後の図形だけでなく、その後の図形全てを移動させてしまうので
少し使いにくいかもしれません。

以下ではwith-translation, with-rotationを使って図形の移動を
やってみました。

: 長方形を[400 0]だけ平行移動。

  (q/defsketch translation-demo
    :size [500 500]
    :setup (fn []
             (q/rect 0 0 100 100)
             (q/with-translation [400 0] (q/rect 0 0 100 100))))

trans.png

以下では平行移動した長方形を原点中心に少しずつ回転させています。
結果としてトランプのカードを並べたような絵ができました。

  (q/defsketch translation-rotation-demo
    :size [500 500 ]

    :setup (fn  []
             (q/background 255)

             (doseq [angle (range 0 360 10)]
               (q/with-rotation [(q/radians angle)]
                 (q/with-translation [0 400](q/rect 0 0 100 100))))))

cards.png

まとめ

quilの公式サイトにはquilで制作された美しいアートが掲載されています。
興味があれば、是非見てみてください。

本日の内容は以上になります。最後までお読みいただきありがとうございました。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2