3-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
33
34
35
36
37
38
39


func design( screen:PGScreen ) {
    screen.clearColor = .darkGrey
    
    for _ in 0 ..< 160 {
        PGAddMask( "mask-smoke" )
        .color( LLColor( 0.9, 0.34, 0.22, 1.0 ) )
        .position(
            cx:(-50 ... 50).randomize,
            cy:(-120 ... -110).randomize
        )
        .deltaPosition( 
            dx:(-1.0...1.0).randomize,
            dy:(0.5...4.5).randomize 
        )
        .scale( square: 80.0 )
        .deltaScale( dw: 0.5, dh: 0.5 )
        .angle( .random )
        .deltaAngle( degrees:(-2.0...2.0).randomize )
        .life( .random )
        .deltaLife( -0.01 )
        .iterate {
            if $0.life < 0.5 {
               $0.alpha( $0.life )
            }
            else {
               $0.alpha( (1.0 - $0.life) )
            }
        }
        .completion {
            $0
            .position( 
                cx:(-50 ... 50).randomize,
                cy:(-120 ... -110).randomize 
            )
            .scale( square: 80.0 )
            .life( 1.0 )
        }
    }
}

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

forで160個の加算合成マスク画像 PGAddMask() を書きます。画像ファイルはmask-smokeを指定します。

初期設定のコードを書きます。
- .color( LLColor( 0.9, 0.34, 0.22, 1.0 ) )
  - 色。少しオレンジがかった赤を設定します。
- .position( cx:(-50...50).randomize, cy:(-120... -110).randomize )
  - 位置。x方向は-50~50のランダム座標, y方向は-120~-110のランダム座標を設定します。 (xはある程度のブレがあり、yはほとんど違いのない位置になります)
- .deltaPosition( dx:(-1.0...1.0).randomize, dy:(0.5...4.5).randomize )
  - 毎フレーム、x方向に-1.0~1.0のランダムな等速移動量、y方向に0.5~4.5のランダムな等速移動量を設定します。 (yのプラスが大きいので、画面上方向へ大きく移動します)
- .scale( square:80.0 )
  - 大きさ。80.0ポイントを設定します。
- .deltaScale( dw:0.5, dy:0.5 )
  - 毎フレーム、0.5ポイント拡大します
- .angle( .random )
  - 角度。0.0~1.0のランダムから開始します。
- .deltaAngle( degrees:(-2.0...2.0).randomize )
  - 毎フレーム、-2.0~2.0度のランダム値で等速に回転します。
- .life( .random )
  - ライフ。0.0~1.0のランダムから開始します。
- .deltaLife( -0.01 )
  - 毎フレーム、lifeを0.01減少します。

.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:(-50...50).randomize, cy:(-120... -110).randomize )
  - x方向は-50~50のランダム座標、 y方向は-120~-110のランダム座標に再配置します。
- .scale( square:80 )
  - 大きさを縦横80ポイントに戻します。
- .life( 1.0 )
  - ライフを1.0に回復します。

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

目標

炎が立ち上がるエフェクトが表示されたら成功です。

目標#

目標