3-4. うねる発光体

前のページ

ここでは、ぼやけた円と加算合成をつかって、発光体を表現してみます。

 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

func design( screen:PGScreen ) {
    screen.clearColor = .darkGrey
    
    for _ in 0 ..< 80 {
        PGAddBlurryCircle()
        .color( .random )
        .position( screen.randomPoint )
        .scale( square: 100.0 )
        .deltaScale( dw: 0.5, dh: 0.5 )
        .alpha( 0 )
        .life( .random )
        .deltaLife( -0.003 )
        .iterate {
            $0.alpha( sin( $0.life * Float.pi ) )
        }
        .completion {
            $0
            .color( .random )
            .position( screen.randomPoint )
            .scale( square: 100.0 )
            .life( 1.0 )
            .alpha( 0 )
        }
    }
}

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

2. forで80個の加算合成のぼやけた縁 PGAddBlurryCircle() を書きます。

3. 初期設定のコードを書きます。
   • .color( .random )
     • 色。ランダムを設定します。
   • .position( screen.randomPoint )
     • 位置。画面内のランダム座標を設定します。
   • .scale( square:100.0 )
     • 大きさ。100.0ポイントを設定します。
   • .deltaScale( dw:0.5, dy:0.5 )
     • 毎フレーム、0.5ポイント拡大します。
   • .alpha( 0 )
     • アルファ。透明から開始します。
   • .life( .random )
     • ライフ。0.0~1.0のランダムから開始します。
   • .deltaLife( -0.003 )
     • 毎フレーム、lifeを0.003減少します。

4. .iterate{ } を用意して、毎フレームのalphaの処理を計算します。
   • .alpha( sin( $0.life * Float.pi ) )
     • lifeに合わせたサイン値です。

上記の計算で、.life=1.0で透明、0.5のときにもっとも濃くなり、0.0で透明に戻ります。

5. .completion{ } を用意して、図形を再利用します。
   • .color( .random )
     • 色をランダムに再設定します。
   • .position( screen.randomPoint )
     • 画面内のランダム座標に再配置します。
   • .scale( square:100 )
     • 大きさを縦横100ポイントに戻します。
   • .life( 1.0 )
     • ライフを1.0に回復します。
   • .alpha( 0 )
     • アルファを透明に戻します。

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

目標

• ゆったり発光体が動くエフェクトが表示されたら成功です。

次のページ

• Note: sin() は、ラジアン値を渡すとサインの値を返します。
• sin( 0 ) = 0.0
• sin( 0.5π ) = 1.0
• sin( 1.0π ) = 0.0