チェック模様を題材に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]
)
四角形を列で並べる関数を作成しました。
これを2個組み合わせたものを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)
だとあんまり綺麗じゃなかったので。。。