collageでチェックを描く

チェック模様を題材にcollageの使い方についてのメモ
これを表示させます。

<img width="308" alt="スクリーンショット 2015-12-06 13.15.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/51404/ba68005c-7dfb-0ef1-027e-41f378504ded.png">


#1. 四角形を描画する
赤い四角を描きます。
<img width="925" alt="スクリーンショット 2015-11-29 14.10.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/51404/d61e3e1d-dc89-f081-e017-4d1eb23aaa01.png">

```hs
import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)

main : Element
main =
  collage 100 100 [
    rect 20 20
        |> filled red 
        |> move (0, 0)
 ]
```
これで縦100、横100のcollageに20×20の赤い四角形を原点に描くことができます。
###■collage
図形などを記述するためのキャンバス的なものです。
第一引数が横サイズ、第二引数が縦サイズ、第三引数が描画する図形(Form型)のリストとなります。

###■rect
四角形を定義します。縦横サイズ(Float)を引数に持ちます。

###■filled
色を設定します。
"blue"、"yellow"などもありますが、RGBで指定したいときは、

```hs
    rect 20 20
        |> filled (rgb 255 0 0)  
        |> move (0, 0)
```
のように0~255で設定できます。
(RGBA、HSLなどでも設定できます。詳しく知りたい方は[公式リファレンス](http://package.elm-lang.org/packages/elm-lang/core/3.0.0/Color#Color)を参照してください。

###■move
描画位置を設定します。collageの原点は左上ではなく中心です。注意しましょう。
ちなみに引数はどちらもFloat型です。

#2. 四角形をたくさん描画する
collageの第三引数はForm型のリストです。記述しただけ表示されます。
<img width="1216" alt="スクリーンショット 2015-11-29 17.56.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/51404/de50801a-c3f7-4196-abe8-2f649bd2a401.png">

```hs
      collage 100 100 [
    rect 40 40
        |> filled blue
        |> move (0, 0),
    rect 20 20
        |> filled red 
        |> move (0, 0),
    rect 20 20
        |> filled green 
        |> move (40, 0)
 ]
```

記述した順番に描画されます。重ねたりする場合は注意が必要です。
mapを使って描くこともできます。

<img width="1027" alt="スクリーンショット 2015-11-29 18.02.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/51404/bd8334b9-90df-c6fc-e6e7-096edf0328ff.png">

```hs
main : Element
main =
  collage 300 300 (List.map(\n-> rect  20 20 
             |> filled red
             |> move (2*20*toFloat n-100, 0) )[0..5] )
```

groupを使うとリストをまとめて一つのFormにすることができます。

```hs
main : Element
main =
  collage 300 300 [group(List.map(\n-> rect  20 20 
             |> filled red
             |> move (2*20*toFloat n-100, 0) )[0..5] )]
```

#3. 四角形をもっとたくさん描画する
チェック柄を作成します。とりあえず横に長い列を作ります。

<img width="1063" alt="スクリーンショット 2015-12-06 12.43.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/51404/351323d3-e618-98f7-fa8a-7574b6e2f467.png">

```hs
rectGroup : Float->Float -> Form 
rectGroup size  collageWidth = 
 let x = round(collageWidth/size) in
 group (
      List.map(\n-> rect  size size 
             |> filled  blue
             |> move (2*size*toFloat n-collageWidth/2+size/2, 0) )[0..x]
      )       
```

四角形を列で並べる関数を作成しました。
これを２個組み合わせたものをFormにします。

```hs
rectGroup : Float->Float -> Form 
rectGroup size  collageWidth = 
 let x = round(collageWidth/size) in
 group (
      List.map(\n-> rect  size size 
             |> filled blue 
             |> move (2*size*toFloat n-collageWidth/2+size/2, 0) )[0..x]
 ++List.map(\n-> rect  size size 
             |> filled blue
             |> move (2*size*toFloat n-collageWidth/2+size/2+size, size) )[0..x]        
             )
```

これを縦に並べたら完成です。
<img width="1110" alt="スクリーンショット 2015-12-06 13.04.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/51404/e6441eba-72f6-8d57-2a7e-b1278656524f.png">



```hs
import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)

main : Element
main =
  let 
      size = 20
      collageWidth  = 300 
      collageHeight = 300 
  in 
  collage collageWidth collageHeight (
      List.map(\n->rectGroup size collageWidth 
                         |>move(0, size*2*n-collageHeight+size))
      [0..collageWidth/size]) 
 
rectGroup : Float->Float -> Form 
rectGroup size  collageWidth = 
 let x = round(collageWidth/size) in
 group (
      List.map(\n-> rect  size size 
             |> filled blue 
             |> move (2*size*toFloat n-collageWidth/2+size/2, 0) )[0..x]
 ++List.map(\n-> rect  size size 
             |> filled blue
             |> move (2*size*toFloat n-collageWidth/2+size/2+size, size) )[0..x]        
             )
```


#4. 良さ気なチェックを描画する
四角形が真っ青で味気がないので色を変えます。
<img width="1064" alt="スクリーンショット 2015-12-06 13.14.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/51404/975ad464-f0e7-198c-86d3-97439fb6a831.png">

```hs
rectGroup : Float->Float -> Form 
rectGroup size  collageWidth = 
 let x = round(collageWidth/size) in
 group (
      List.map(\n-> rect  size size 
--             |> filled  blue
             |> filled  (hsl (degrees((360 * toFloat n)/toFloat x)) 0.7 0.5)
             |> move (2*size*toFloat n-collageWidth/2+size/2, 0) )[0..x]
 ++List.map(\n-> rect  size size 
--             |> filled  blue
             |> filled  (hsl (degrees((360 * toFloat n)/toFloat x)) 0.7 0.5)
             |> move (2*size*toFloat n-collageWidth/2+size/2+size, size) )[0..x]        
             )
```

hslのなかでdegreesを使っていますが、0~1の範囲で変化すればなんでも良いです。
```(hsl ((360 * toFloat n)/toFloat x) 0.7 0.5)```
だとあんまり綺麗じゃなかったので。。。