2-3. キラキラ輝く軌跡

このページでは、タッチした軌跡がキラキラと光るエフェクトを表現してみます。

 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" )
        .color( LLColor( 1.0, 0.6, 0.4, 1.0 ) )
        .position( 
            cx: touch.x + Float( dx ),
            cy: touch.y + Float( dy )
        )
        .alpha( 0.0 )
        .scale( square:24.0 )
        .deltaScale(
            dw:0.5,
            dh:0.5
        )
        .deltaAngle( degrees:(0.5...1.0).randomize )
        .deltaLife( -0.03 )
        .iterate {
            $0.alpha = sin( $0.life * Float.pi )
        }
    }
}

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

update関数を用意します。

for touch in screen.touchesでタッチのループを作ります。触れている指すべてをとらえます。

初期化のための値を計算し、変数に代入します。
- let max_dist = 80.0
  - タッチ位置からの最大距離。80.0を代入します。
- let radians = (0.0...2.0).randomize * Double.pi
  - 進行方向の角度。0~2πラジアン(=0~360度)のランダムの値を代入します。
- let d2 = max_dist * (0.0...1.0).randomize
  - タッチ位置からの距離。最大値に0.0~1.0を掛けた値を代入します。
- let dx = d2 * cos( radians )
  - x方向移動量。d2にradiansのコサイン値をかけて代入します。
- let dy = d2 * sin( radians )
  - y方向移動量。d2にradiansのサイン値をかけて代入します。

PGAddMask( "mask-sparkle" )で輝きのマスクを描きます。

初期設定のコードを書きます。
- .color( LLColor( 1.0, 0.6, 0.4, 1.0 ) )
  - 色。明るめの橙を設定します。
- .position( cx: touch.x + Float( dx ), cy: touch.y + Float( dy ) )
  - 位置。タッチ位置にdx,dyを足した値を設定します。タッチ位置からmax_dist半径内のいずこかに位置するようになります。
- .alpha( 0.0 )
  - アルファ値。0.0を設定し初期は透明にします。
- .scale( square:24.0 )
  - 大きさ。24.0で固定にします。
- .deltaScale( dw:0.5, dh:0.5 )
  - 大きさの変化量。縦横とともに0.5ずつ大きくしていきます。
- .deltaAngle( degrees:(0.5...1.0).randomize )
  - 角度の変化量。0.5~1.0のランダム値を設定します。
- .deltaLife( -0.03 )
  - ライフの変化量。-0.03で30フレーム強で消えるようにします。

.iterate{ } を用意して、毎フレームで計算を行います。
- $0.alpha = sin( $0.life * Float.pi )
  - lifeの値を用いてサイン値を計算し、アルファ値を変化させます。
上記の計算により、始まりはalpha = 0.0、life = 0.5の時にalpha = 1.0、life = 0.0になるとalpha = 0.0になり、始まりと終わりで透明になります。

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

目標

実行後、タッチの軌跡にキラキラ輝くエフェクトが出れば成功です。

目標#

目標