3-2. 煙を焚く

煙を表現するコードをつくりましょう。

 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


func design( screen:PGScreen ) {
    screen.clearColor = .darkGrey
    
    for _ in 0 ..< 60 {
        PGMask( "mask-smoke" )
        .color( .white )
        .position( 
            cx:(-150...150).randomize,
            cy:(-150...150).randomize
        )
        .scale( square:(80...160).randomize )
        .deltaScale( dw:1, dh:1 )
        .angle( .random )
        .life( .random )
        .deltaLife( -0.005 )
        .iterate {
           if $0.life < 0.5 {
              $0.alpha( $0.life )
           }
           else {
              $0.alpha( (1.0 - $0.life) )
           }
        }     
        .completion {
            $0
            .position( 
                cx:(-150...150).randomize,
                cy:(-150...150).randomize
            )
            .scale( square:80 )
            .angle( .random )
            .life( 1.0 )
        }
    }
}

screen.clearColor = .darkGrey で背景を暗灰色にします。

forで60個のマスク画像 PGMask() を書きます。画像ファイルはmask-smokeを指定します。

初期設定のコードを書きます。
- .color( .white )
  - 色。白を設定します。
- .position( cx:(-150...150).randomize, cy:(-150...150).randomize )
  - 位置。-150~150ポイントのランダム座標を設定します。
- .scale( square:(80...160).randomize )
  - 大きさ。80~160ポイントのランダムなサイズを設定します。
- .deltaScale( dw:1, dy:1 )
  - 毎フレーム、1ポイント拡大します。
- .angle( .random )
  - 角度。0.0~1.0のランダムから開始します。
- .life( .random )
  - ライフ。0.0~1.0のランダムから開始します。
- .deltaLife( -0.005 )
  - 毎フレーム、lifeを0.005減少します。

.iterate{ } を用意して、毎フレームのalphaの処理を計算します。
- .life が0.5より小さいとき、 $0.life * 2.0 を設定します。
- .life が0.5以上のとき、 (1.0 - $0.life) * 2.0 を設定します。

上記の計算により、lifeが0.5の時、もっとも濃く描画します。lifeが0.5より少ない、あるいは多いときは薄くなります。

.completion{ } を用意して、図形を再利用します。
- .position( cx:(-150...150).randomize, cy:(-150...150).randomize )
  - -150~150のランダム座標に再配置します。
- .scale( square:80 )
  - 大きさを縦横80ポイントに戻します。
- .angle( .random )
  - 角度を異なるランダム値に再設定します。
- .life( 1.0 )
  - ライフを1.0に回復します。

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

目標

煙が立つエフェクトが表示されたら成功です。

目標#

目標