2-6. タッチに集まるパーティクル

ここでは、もともとある図形をタッチ位置に誘導するエフェクトを表現してみます。今回は、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.5...4.0).randomize
        let radians = (0.0...2.0).randomize * Double.pi
        let dx = speed * cos( radians )
        let dy = speed * sin( radians )
        
        PGAddBlurryCircle()
        .color( LLColor( 0.4, 0.7, 0.7, 1.0 ) )
        .position( 
            cx: (screen.minX + 10 ... screen.maxX - 10).randomize,
            cy: (screen.minY + 10 ... screen.maxY - 10).randomize
        )
        .deltaPosition( 
            dx:dx,
            dy:dy
        )
        .scale( square:20 )
        .iterate {
            if $0.position.x - 10 <= Float( screen.minX ) {
                $0.deltaPosition.x *= -1
            }
            
            if Float( screen.maxX ) <= $0.position.x + 10 {
                $0.deltaPosition.x *= -1
            }
            
            if $0.position.y - 10 <= Float( screen.minY ) {
                $0.deltaPosition.y *= -1
            }
            
            if Float( screen.maxY ) <= $0.position.y + 10 {
                $0.deltaPosition.y *= -1
            }
            
            if 0　< screen.touches.count {
                let touch = screen.touches[0]
                let dx = (touch.x - $0.position.x) * 0.04
                let dy = (touch.y - $0.position.y) * 0.04
                
                $0.position.x += dx
                $0.position.y += dy
            }
        }    
    }
}

func update( screen:PGScreen ) {

}

design関数に screen.clearColor = .balck を書きます。背景は黒にします。

update関数を用意します。今回update関数は空です。

design関数の背景色の後にfor _ in 0 ..< 150のループを書き、加算合成のブラー円PGAddBlurryCircle()を作ります。

図形の初期化に用いる値を計算し、変数に代入します。
- let speed = (1.5...4.0).randomize
  - スピードを計算します。1.5~4.0のランダム値を代入します。
- let radians = (0.0...2.0).randomize * Double.pi
  - 進む方向の角度を計算します。0~360度のランダム値です。
- let dx = speed * cos( radians )
  - x方向の移動量を計算します。
- let dy = speed * sin( radians )
  - y方向の移動量を計算します。

図形の初期設定のコードを書きます。
- .color( LLColor( 0.4, 0.7, 0.7, 1.0 ) )
  - 色。薄緑色を設定します。
- .position( cx: (screen.minX + 10 ... screen.maxX - 10).randomize, cy: (screen.minY + 10 ... screen.maxY - 10).randomize )
  - 位置。画面全体にランダムに配置します。
- .deltaPosition( dx:dx, dy:dy )
  - 位置の変化量。計算したdx,dyを設定します。
- .scale( square:20 )
  - 大きさ。固定値20を設定します。

.iterate{ } を用意して、毎フレームの計算を行います。
- if $0.position.x - 10 <= Float( screen.minX ) { ... }
  - 画面左端に図形がある時、処理を行います。
  - $0.deltaPosition.x *= -1
    - x方向の移動量を反転します。
- if Float( screen.maxX ) <= $0.position.x + 10 { ... }
  - 画面右端に図形がある時、処理を行います。
  - $0.deltaPosition.x *= -1
    - x方向の移動量を反転します。
- if $0.position.y - 10 <= Float( screen.minY ) { ... }
  - 画面上橋に図形がある時、処理を行います。
  - $0.deltaPosition.y *= -1
    - y方向の移動量を反転します。
- if Float( screen.maxY ) <= $0.position.y + 10 { ... }
  - 画面下端に図形がある時、処理を行います。
  - $0.deltaPosition.y *= -1
    - y方向の移動量を反転します。
- if 0 < screen.touches.count { ... }
  - タッチの状態を調べます。タッチがあるとき処理を行います。
  - let touch = screen.touches[0]
    - タッチの位置を1つ取得します。
  - let dx = (touch.x - $0.position.x) * 0.04
    - 図形に加えるx方向の移動量を計算します。
  - let dy = (touch.y - $0.position.y) * 0.04
    - 図形に加えるy方向の移動量を計算します。
  - $0.position.x += dx
    - 計算したdxを図形のx座標に加えます。
  - $0.position.y += dy
    - 計算したdyを図形のy座標に加えます。

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

目標

実行後、タッチした場所に図形が集まるエフェクトができれば成功です。

目標#

目標