縦横に並べる を発展させて、複数の図形を描きます。 前ページのプログラムに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....
前ページで、iterate{ } を使って四角を加速させる表現を作りました。 合わせて、スケーリング変化も加速させて、迫ってくる四角を表現しましょう。 前ページと同じコードを書きます。 .completion{ }内の $0 に .deltaScale(dx:dy:) を追加します。値は dw:1.0, dh:1.0 を指定します。 .iterate{ } 内の $0 に .deltaScale(dw:dh:) を追加します。deltaScale.width と deltaScale.height を1.02倍した値を設定します。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 38 39 40 41 42 func design( screen:PGScreen ) { for _ in 0 ....
ここまで2-5の図形パターン, 2-6の色パターン などを学んできました。おさらいとして、自由にコードを書いてみましょう。forや``if`｀を使って複数の図形をたくさん書いてみてください。 四角を描く: PGRectangle() 三角を描く: PGTriangle() 円を描く: PGCircle() ぼかし円を描く: PGBlurryCircle() 繰り返し処理: for a in 0 ..< 繰り返し回数 { 繰り返す処理 } 条件分岐: if 条件 { 条件を満たした時 } else { 条件を満たさない時 } 目標 色々な形を描いたり、繰り返し・条件分岐を使って楽しんでください。 終わったら次のページへ進みます。
前のページ 前のページの仕組みを応用して、図形に触れた時反応するエフェクトをつくってみましょう。 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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 func design( screen:PGScreen ) { screen....