横に並べる繰り返し を行いました。さらにそれを縦に展開しましょう。

  1. 前ページのプログラムに続き、繰り返し文(for文)をもう1つ使って円を縦にも並べます。繰り返し回数を7にします。

  2. .position(cx: に繰り返しカウンタのxに70を掛け算した値を加算します。

  3. .position(cy: に繰り返しカウンタのyに70を掛け算した値を加算します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

func design( screen:PGScreen ) {
   for y in 0 ..< 7 {
       for x in 0 ..< 7 {
           PGCircle()
           .color( .blue )
           .scale( width:50, height:50 )
           .position( cx:-210 + x * 70,
                      cy:-210 + y * 70 )
       }
   }
}
  1. 「コードを実行」を押します。

目標

  • 縦横に並んだたくさんの円が表示されたら成功です。
  • (+1) 繰り返し回数、また.positionでの掛け算の値を変えてみましょう。
  • (+2) 円を別の形状に変えてみましょう。

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

実行例

result-1-2-3.png