4-1. 重ねて模様をつくる

前章まで、Lily Playgroundでの図形や画像の描き方を紹介しました。この章は、ここまで学んだ図形を並べて、模様を作っていきたいと思います。きれいな模様を描いていきましょう。

x,yの2重のfor文をつくり、その中で円が規則的に並ぶようにコードを書きます。
円の色を交互に変えるように、条件分岐で色を変化させましょう。変数var cをつくります。cには色(LLColor.clear)を入れます。
チェッカーの条件にならって、cの値を変えてみましょう。条件ごとにオレンジ色( 1.0, 0.5, 0.0, 1.0 )と、明るい緑色( 0.2, 0.8, 0.2, 1.0 ) をcに入れます。
c を円の .color に使います。すると「c の色が変わる = 円の色が変わる」ことになります。手順3の条件で cの色は互い違いになったので、円の色も互い違いにできます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


func design( screen:PGScreen ) {
   for y in 0 ..< 9 {
       for x in 0 ..< 9 {
           var c = LLColor.clear

           if (x + y) % 2 == 0 {
               c = LLColor( 1.0, 0.5, 0.0, 1.0 )
           }
           else {
               c = LLColor( 0.2, 0.8, 0.2, 1.0 )
           } 

           PGCircle()
           .scale( square:100 )
           .position( cx: -200 + x * 50,
                      cy: -200 + y * 50 ) 
           .color( c )
           .alpha( 0.33 )
       }
   }
}

「コードを実行」を押します。

目標

重ねた円による模様が表現できたら成功です。

終わったら次のページへ進みます。

Note: LLColorは色値です。順に red, green, blue, alpha の4つの値を指定してください。

Note: var cは変数で、cは変数名と呼びます。決めた形式の値を格納できます。今回は始めにLLColor.clearを入れたため、LLColor格納用の変数cとなります。

目標#

実行例#

目標

実行例