Swift

横に並べる繰り返し を行いました。さらにそれを縦に展開しましょう。 前ページのプログラムに続き、繰り返し文(for文)をもう1つ使って円を縦にも並べます。繰り返し回数を7にします。 .position(cx: に繰り返しカウンタのxに70を掛け算した値を加算します。 .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) 繰り返し回数、また.positionでの掛け算の値を変えてみましょう。 (+2) 円を別の形状に変えてみましょう。 終わったら次のページへ進みます。 実行例

前ページで、四角のアニメーションにスケーリングの変化を加えました。 次に、ランダムな移動を加えてみましょう。 前ページと同じコードを書きます。 PGRectangle()に .deltaPosition(dx:dy:) を追加します。値は(-1.0…1.0).randomizeを指定します。 .completion{ } 内の$0に .deltaPosition(dx:dy:) を追加します。値は(-1.0…1.0).randomizeを指定します。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 func design( screen:PGScreen ) { for _ in 0 ..< 20 { PGRectangle() .position( screen.randomPoint ) .deltaPosition( dx:(-1.0...1.0).randomize, dy:(-1.0...1.0).randomize ) .scale( square: 0.0 ) .deltaScale( dw:1.0, dh:1.0 ) .color( .random ) ....

前ページで、四角の移動のアニメーションを加えました。 次に、回転を加えてみましょう。 前ページと同じコードを書きます。 PGRectangle()に .angle() を追加します。値はランダムを指定します。 続けて .deltaAngle(degrees:) を追加します。値は1.0を指定します。 .completion{ } 内の$0に .angle() を追加し、ランダムで初期化します。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 func design( screen:PGScreen ) { for _ in 0 ..< 20 { PGRectangle() .position( screen.randomPoint ) .deltaPosition( dx:(-1.0...1.0).randomize, dy:(-1.0...1.0).randomize ) .scale( square: 0.0 ) ....

縦横に並べる を発展させて、複数の図形を描きます。 前ページのプログラムにif文を追加して、条件によって描く形を変えます。ここではxが偶数の時に円、奇数の時に三角を描くようにします。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 func design( screen:PGScreen ) { for y in 0 ..< 7 { for x in 0 ..< 7 { if x % 2 == 0 { PGCircle() .color( .blue ) .scale( width:50, height:50 ) .position( cx:-210 + x * 70, cy:-210 + y * 70 ) } else { PGTriangle() ....

前のページ このページでは、なぞった位置から炎が立ち上がるエフェクトを作ってみましょう。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 func design( screen:PGScreen ) { screen.clearColor = .darkGrey } func update( screen:PGScreen ) { for touch in screen.touches { for _ in 0 ..< 2 { PGAddMask( "mask-smoke" ) .color( LLColor( 1.0, 0.4, 0.3, 1....

前ページで、四角のアニメーション表現を一通り作成しました。 ここでは、アニメーションを少し工夫してみます。毎フレームの処理を参考に、 .iterate{ } で計算を加えて四角を加速させましょう。 前ページと同じコードを書きます。 .iterate{ } 内の$0 に .deltaPosition(dx:dy:) を追加します。deltaPosition.x と deltaPosition.y を 1.04倍した値 を設定します。1フレームごとに移動量が増えていきます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 func design( screen:PGScreen ) { for _ in 0 ..< 20 { PGRectangle() .position( screen.randomPoint ) ....

前回のプログラム の条件を工夫すると、チェッカー模様にできます。条件だけ変えてみましょう。 前ページのプログラムのif文の条件を変えます。条件には (x + y) % 2 == 0 を入れます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 func design( screen:PGScreen ) { for y in 0 ..< 7 { for x in 0 ..< 7 { if (x + y) % 2 == 0 { PGCircle() .color( .blue ) .scale( width:50, height:50 ) .position( cx:-210 + x * 70, cy:-210 + y * 70 ) } else { PGTriangle() ....

前のページ ここでは趣向を変えて、 指を離した時に指の移動した方向に光の線を描きます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 func design( screen:PGScreen ) { screen.clearColor = .darkGrey } func update( screen:PGScreen ) { for release in screen.releases { for k in 0 ..< 4 { let dx = release....

2-3で並べた円 の色を変えてみましょう。.colorの値の計算にfor文のカウンタx, yを使います。 .colorの値にxとyを用いて計算します。 1 2 3 4 5 6 7 8 9 10 11 12 13 func design( screen:PGScreen ) { for y in 0 ..< 7 { for x in 0 ..< 7 { PGCircle() .color( red: Double( x ) / 7.0, green: Double( y ) / 7.0, blue: Double( x + y ) / 14.0 ) .scale( width:50, height:50 ) .position( cx:-210 + x * 70, cy:-210 + y * 70 ) } } } 「コードを実行」を押します。 目標 丸の色が徐々に変わって表示されたら成功です。 終わったら次のページへ進みます。...

前のページ ここでは、もともとある図形をタッチ位置に誘導するエフェクトを表現してみます。今回は、design関数を用います。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 func design( screen:PGScreen ) { screen.clearColor = .black for _ in 0 ..< 150 { let speed = (1....