2-1. 拡散光エフェクト

前の章で、タッチ位置の使い方の基礎を学びました。

この章では、これまで学んだことを応用して、タッチ時のエフェクトのバライエティを生み出していきましょう。

このページでは、BlurryCircleの加算合成で光の粒を表現し、鮮やかに拡散する光のエフェクトをつくります。

 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 ) {
    screen.clearColor = .darkGrey
}

func update( screen:PGScreen ) {
    for touch in screen.touches {
        for _ in 0 ..< 8 {
            let speed = (2.0...4.0).randomize
            let rad  = (0.0...2.0 * Double.pi).randomize
            
            PGAddBlurryCircle()
            .color( LLColor( 0.4, 0.6, 0.95, 1.0 ) )
            .position( touch.xy )
            .deltaPosition( 
                dx: speed * cos( rad ),
                dy: speed * sin( rad ) 
            )
            .scale(
                width:(5.0...40.0).randomize,
                height:(5.0...40.0).randomize )
            .angle( .random )
            .deltaAngle( degrees: (-2.0...2.0).randomize )
            .life( 1.0 )
            .deltaLife( -0.016 )
            .alpha( 1.0 )
            .deltaAlpha( -0.016 )
        }
    }
}

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

update関数を用意します。

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

さらに、touchのループの中でfor _in 0 ..< 8で8回ループを行い、加算合成のブラー円PGAddBlurryCiecle()を作ります。

図形を動かすため、スピードと角度を計算した変数speed,radを作ります。
- speedは2.0~4.0のランダム値、radは0~2πのラジアンのランダム値です。

初期設定のコードを書きます。
- .color( LLColor( 0.4, 0.6, 0.95, 1.0 ) )
  - 色。薄青を設定します。
- .position( touch.xy )
  - 位置。タッチ位置を設定します。
- .deltaPosition( dx: speed * cos( rad ), dy: speed * sin( rad ) )
  - 毎フレームの移動量。speedとradを用いて、タッチ位置から360度方向にランダムに飛び散ります。
- .scale( width:(5.0...40.0).randomize, height:(5.0...40.0).randomize )
  - 大きさ。5.0~40.0のランダム値です。縦と横のサイズを一致させないことでランダムの楕円になります。
- .angle( .random )
  - 角度。ランダムを設定します。
- .deltaAngle( degrees: (-2.0...2.0).randomize )
  - 毎フレームの角度変化量。-2.0~2.0度でランダムに回転します。
- .life( 1.0 )
  - ライフ。1.0から開始します。
- .deltaLife( -0.016 )
  - 毎フレームのライフ変化量。-0.016で約60フレームでライフが0になります。
- .alpha( 1.0 )
  - アルファ。1.0を設定します。
- .deltaAlpha( -0.016 )
  - 毎フレームのアルファ変化量。-0.016で約60フレームで透明になります。

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

目標

実行後、タッチ位置から青い光が飛び散れば成功です。

目標#

目標