collageでチェックを描く

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

#1. 四角形を描画する
赤い四角を描きます。

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で指定したいときは、

    rect 20 20
        |> filled (rgb 255 0 0)  
        |> move (0, 0)

のように0~255で設定できます。
(RGBA、HSLなどでも設定できます。詳しく知りたい方は公式リファレンスを参照してください。

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

#2. 四角形をたくさん描画する
collageの第三引数はForm型のリストです。記述しただけ表示されます。

      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を使って描くこともできます。

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にすることができます。

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. 四角形をもっとたくさん描画する
チェック柄を作成します。とりあえず横に長い列を作ります。

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にします。

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]        
             )

これを縦に並べたら完成です。

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. 良さ気なチェックを描画する
四角形が真っ青で味気がないので色を変えます。

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)
だとあんまり綺麗じゃなかったので。。。