前のページ このページでは、タッチした軌跡がキラキラと光るエフェクトを表現してみます。 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 ) { screen.clearColor = .darkGrey } func update( screen:PGScreen ) { for touch in screen.touches { let max_dist = 80.0 let radians = (0.0...2.0).randomize * Double.pi let d2 = max_dist * (0.0...1.0).randomize let dx = d2 * cos( radians ) let dy = d2 * sin( radians ) PGAddMask( "mask-sparkle" ) ....
横に並べる繰り返し を行いました。さらにそれを縦に展開しましょう。 前ページのプログラムに続き、繰り返し文(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 ) } } } 「コードを実行」を押します。 目標 丸の色が徐々に変わって表示されたら成功です。 終わったら次のページへ進みます。...