3-9. 花火

このページでは、次のBooksで紹介する新しい仕組みを先取りし、花火を表現します。

 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 = LLColor( 0.0, 0.05, 0.2, 1.0 )
}

func update( screen:PGScreen ) {
    if (0.0...1.0).randomize < 0.97 { return }
    
    let size = (10.0...20.0).randomize
    let speed = size / 4.0
    let pos = screen.randomPoint
    let c = LLColor.random
   
    for _ in 0 ..< 150 {
        let radians = (0.0...2.0).randomize * Double.pi
        let speed2 = speed * (0.65...1.0).randomize
        let dx = speed2 * cos( radians )
        let dy = speed2 * sin( radians )
        
        PGAddBlurryCircle()
        .color( c )
        .position( pos )
        .deltaPosition( 
            dx:dx,
            dy:dy
        )
        .deltaLife( -0.005 )
        .scale( square:size )
        .iterate {
            $0
            .deltaPosition( 
                dx:$0.deltaPosition.x * 0.985,
                dy:$0.deltaPosition.y * 0.985
            )
            .cy( $0.cy - 1.5 )
            .alpha( $0.life )
        }        
    }
}

func design( screen:PGScreen ) { } に加えて、func update( screen:PGScreen ) { } 関数を追加します。このupdateが新しい仕組みです。毎フレーム繰り返し処理される関数です。

design( screen:PGScreen ) 内に screen.clearColor = LLColor( 0.0, 0.05, 0.2, 1.0 ) を書き、背景を群青色にします。design( screen:PGScreen )のコードはこれで完了です。

update( screen:PGScreen )内に処理を書いていきます。まず図形をつくる確率を調整します。
- if (0.0...1.0).randomize < 0.97 { return }
  - 97%の確率で何もせず、update関数を終了(return)します。

update( screen:PGScreen )は毎秒最大60回実行されます。上記の処理により、updateが呼ばれたら3%の確率で処理を継続します。

この後図形をたくさんつくりますが、その準備として、図形で共通で使う変数をつくります。
- let size = (10.0...20.0).randomize
  - 大きさ用の変数。10.0~20.0のランダム値をつくり、代入します。
- let speed = size / 4.0
  - 速度用の変数。sizeを4.0で割った値をつくり、代入します。
- let pos = screen.randomPoint
  - 図形の位置の変数。画面内のランダム位置を代入します。この変数を使い、同じ座標に複数の図形をつくります。
- let c = LLColor.random
  - 色の変数。ランダムの値を代入します。この変数を使い、複数の図形を同じ色にします。

forを150回繰り返します。

forの中で、図形1つずつの初期設定用の変数をつくります。
- let radians = (0.0...2.0).randomize * Double.pi
  - 進行方向の角度の変数。0~2πのランダムの値をつくり、代入します。
- let speed2 = speed * (0.65...1.0).randomize
  - 図形ごとの速度用の変数。共通の変数speedに0.65~1.0のランダム値を掛け算し、代入します。
- let dx = speed2 * cos( radians )
  - x方向の移動量の変数。変数radiansのコサイン値とspeed2を掛け算した値を代入します。
- let dy = speed 2* sin( radians )
  - y方向の移動量の変数。変数radiansのサイン値とspeed2を掛け算した値を代入します。

加算合成の円 PGAddCircle() をつくります。

PGAddCircleの初期設定のコードを書きます。
- .color( c )
  - 色。変数cを設定します。
- .position( pos )
  - 位置。変数posを設定します。
- .deltaPosition( dx:dx, dy:dy )
  - 毎フレームの移動量。x方向は変数dx、 y方向は変数dyの値を設定します。
- .deltaLife( -0.005 )
  - 毎フレーム、lifeを0.005減少します。
- .scale( square:size )
  - 大きさ。変数sizeを設定します。

.iterate{ } を用意します。位置によって図形の移動方向を変えます。
- .deltaPosition( dx:$0.deltaPosition.x * 0.985, dy:$0.deltaPosition.y * 0.985 )
  - 毎フレームの移動量を0.985倍します。だんだんと移動がゆっくりになります。
- .cy( $0.cy - 1.5 )
  - y方向の位置を-1.5ずつ移動します。等速で画面の下へ移動します。
- .alpha( $0.life )
  - アルファの値をライフに合わせて設定します。

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

目標

不定期に花火が画面に表示されたら成功です。

Note: このページのコードでupdate( screen:PGScreen )関数を使いました。各図形の毎フレームの処理は .iterate{ }を使いますが、プログラム全体の毎フレームの処理は update( screen:PGScreen ) を使います。例えば、今回の花火のように、図形に関係なく、フレームごとに処理したいときに有効です。

Note: .cy は、.position.y と同じものです。

目標#

目標