LightTableとQuilの簡単に紹介し、 そして手軽にクリスマスツリーを書く。

どうもです。メリークリマスマス!!!

LightTableとQuilがなかなか良いねーって感じなので、そんで、簡単に紹介して、クリスマスツリーでも書きますかー、って書いてみました。

# LightTableとQuil

さて、まずは、LightTableですが、Clojureで書かれたエディタです。Clojureで書かれたエディタであって、リアルタイムにプログラムを評価して、実際に値を見ながら、ソースを編集できます。設定等もClojureで書かれており、僕はClojureを書くなら、このエディタを積極的に利用しています。(Emacsも使うけど)

http://lighttable.com/

QuilはProcessingのAPIを利用する、グラフィックライブラリであり、Creative Codingでの利用など、アート系のプログラミングをするときに、良くつかわれる、ライブラリです。

http://quil.info/

# 環境構築

leiningenで手軽にプロジェクトを作れます。


```
lein new quil advent-calendar-2015
```


# lightTableで、評価しながらQuilを書く。

さて、quilのプロジェクトを作成しましたら、LightTableを起動し、File -> Open Folderで、今回作成したプロジェクトのフォルダを開きます。

そして、Workspaceが表示されてなければ、View -> Workspaceで、Workspaceを表示させましょう。そのWorkspaceから、core.cljを選択し、LightTableに, core.cljを開いておきましょう。以下の状態になるはずです。

<img width="1021" alt="スクリーンショット 2015-12-23 21.37.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/31381/3a6e80f2-e1dc-a4ac-7718-17efee69661a.png">

その状態で、OSXの方なら、Command + Shift + Returnを押してみましょう。すると、core.cljのソース全体され、quilのwindowが開き、また、S式の評価した値の返り値、エディタの方に表示されているはずです。

<img width="951" alt="スクリーンショット 2015-12-23 21.42.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/31381/9b4a09e4-f14d-9149-63f3-a587275f13f3.png">

途中、なんとなく、(+ 1 2)も書いておきました。すばらしいですね。

さて、コードを少し書き変えてみましょう。ここでは、draw-stateのbackgroundを書き変えます。そして、書き換えた箇所にカーソルがあることを確認しながら、Command + Returnをしてみましょう。すると、quilが再起動せずに、quilのwindowの画面が変化していることが確認できると思います。実行時にコードが起き変わったのですね。

<img width="1064" alt="スクリーンショット 2015-12-23 21.48.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/31381/34600e2a-b332-590e-d9fb-00d5161f35e0.png">

このような感じで、Command + ReturnやCommand + Shift + Returnを押しながら、実行時にコードを起き変えながら、Quilを楽しんでみましょう。

# クリスマスツリーを書く。

さて、クリスマスツリーをちゃっちゃと書きました。

```clj
(ns advent-calendar-2015.core
  (:require [quil.core :refer :all]
            [quil.middleware :as m]))

(def w 700)
(def h 700)

(defn setup []
  ; Set frame rate to 30 frames per second.
  (frame-rate 2)

   {:frames 0})

(defn update-state [state]
  ; Update sketch state by changing circle color and position.
  {:frames (+ (:frames state) 1)})

(defn draw-state [state]
  (background 70)
  (no-stroke)


  (loop [y 0]
    (when (<= y h)
      (loop [x 0]
        (when (<= x w)
          (fill 20 400 200)


          (if (< (abs (- x (/ w 2))) (- (* y 0.4) 25))
            (if (or (< y (- h 80)) (< (abs (- x (/ w 2))) 50))
              (let [size (* (rand) 7)]
                (ellipse x y  size size))
              (ellipse x y 1 1)
              )
            (ellipse x y 1 1))
          (recur (+ x 5))))
      (recur (+ y 5)))))



(defsketch advent-calendar-2015
  :title "You spin my circle right round"
  :size [w h]
  ; setup function called only once, during sketch initialization.
  :setup setup
  ; update-state is called on each iteration before draw-state.
  :update update-state
  :draw draw-state
  :features [:keep-on-top]
  ; This sketch uses functional-mode middleware.
  ; Check quil wiki for more info about middlewares and particularly
  ; fun-mode.
  :middleware [m/fun-mode])
```

このように表示されます。(ぜひ、星を書いてみてください)


<img width="959" alt="スクリーンショット 2015-12-23 21.59.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/31381/300bde1b-2fea-b524-9f1c-fcc656a5fbeb.png">

メリークリスマス!!!