2-5. 離した時に光線を描く

ここでは趣向を変えて、指を離した時に指の移動した方向に光の線を描きます。

 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.x - release.startPos.x
            let dy = release.y - release.startPos.y
            let angle = Double( atan2( dy, dx ) )
            let base_size = Float( 40 + 10 * k )
            
            PGAddBlurryCircle()
            .color( LLColor( 0.2, 0.4, 0.6, 1.0 ) )
            .position( release.startPos )
            .angle( radians:angle )
            .deltaPosition( 
                dx: dx * 0.08,
                dy: dy * 0.08
            )
            .deltaLife( -0.02 )
            .scale( square: base_size )
            .iterate {                
                $0.deltaPosition.x *= 0.93
                $0.deltaPosition.y *= 0.93
                 
                let speed = sqrt(
                    $0.deltaPosition.x * $0.deltaPosition.x + 
                    $0.deltaPosition.y * $0.deltaPosition.y
                ) 
                 
                $0
                .width( base_size * ( 1.0 + speed / 10.0 ) )
                .alpha( $0.life )
            }
        }
    }
}

design関数に screen.clearColor = .darkGrey を書きます。背景は濃い灰色です。

update関数を用意します。

for release in screen.releasesでリリースのループを作ります。離れた指をとらえます。

3のループ内でfor k in 0 ..< 4を書き、加算合成のブラー円PGAddBlurryCircle()を作ります。ブラー円を4つ重ねます。

図形の初期化に用いる値を計算し、変数に代入します。
- let dx = release.x - release.startPos.x
  - タッチを始めた位置(release.startPos)、指を離した位置(release)のx方向の距離をdxに代入します。
- let dy = release.y - release.startPos.y
  - タッチを始めた位置(release.startPos)、指を離した位置(release)のy方向の距離をdyに代入します。
- let angle = Double( atan2( dy, dx ) )
  - dx, dyを使って図形の角度を計算します。atan2という関数で角度が得られます。
- let base_size = Float( 40 + 10 * k )
  - 4つのブラー円の大きさです。kを使って少しずつ大きくした円を重ねます。

図形の初期設定のコードを書きます。
- .color( LLColor( 0.2, 0.4, 0.6, 1.0 ) )
  - 色。薄青を設定します。
- .position( release.startPos )
  - 位置。タッチした初期位置を設定します。
- .angle( radians:angle )
  - 角度。計算したangleを設定します。進む方向に傾けます。
- .deltaPosition( dx: dx * 0.08, dy: dy * 0.08 )
  - 位置の変化量。計算したdx,dyを0.08倍して設定します。
- .deltaLife( -0.02 )
  - ライフの変化量。50フレームで図形が消えるようにします。
- .scale( square: base_size )
  - 大きさ。計算したbase_sizeを設定します。

.iterate{ } を用意して、毎フレームで計算を行います。
- $0.deltaPosition.x *= 0.93
  - x移動量に0.93を掛けて、フレームごとに移動量を減らしていきます。
- $0.deltaPosition.y *= 0.93
  - y移動量に0.93を掛けて、フレームごとに移動量を減らしていきます。
- let speed = sqrt( $0.deltaPosition.x * $0.deltaPosition.x + $0.deltaPosition.y * $0.deltaPosition.y )
  - deltaPositionからスピードを計算します。
- $0.width( base_size * ( 1.0 + speed / 10.0 ) )
  - スピードによって図形の幅を変えます。速度に合わせて図形が伸びます。
- .alpha( $0.life )
  - アルファをライフと同じ値にします。

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

目標

実行後、指を離した時に、光線が飛ぶ表現ができれば成功です。

目標#

目標