3-5. 噴水

前のページと同様、ぼやけた円と加算合成を用いて、噴水のような表現を考えてみます。

 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


func design( screen:PGScreen ) {
    screen.clearColor = .darkGrey
    
    for _ in 0 ..< 1000 {
        PGAddBlurryCircle()
        .color( LLColor( 0.16, 0.3, 0.5, 0.8 ) )
        .position( 
            cx:(-10...10).randomize,
            cy:screen.minY - (0.0...48.0).randomize
        ) 
        .deltaPosition( 
            dx:(-2.0...2.0).randomize,
            dy:(19.0...20.0).randomize
        )
        .scale( square: 48.0 )
        .life( .random )
        .deltaLife( -0.008 )
        .iterate {
            $0.deltaPosition( 
                dx:$0.deltaPosition.x,
                dy:$0.deltaPosition.y - 0.35
            )
        }
        .completion {
            $0
            .position(
                cx:(-10...10).randomize,
                cy:screen.minY - (0.0...48.0).randomize
            ) 
            .deltaPosition(
                dx:(-2.0...2.0).randomize,
                dy:(19.0...20.0).randomize 
            )
            .life( 1.0 )
        }
    }
}

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

forで1000個の加算合成のぼやけた円 PGAddBlurryCircle() を書きます。

初期設定のコードを書きます。
- .color( LLColor( 0.16, 0.3, 0.5, 0.8 ) )
  - 色。水色を設定します。
- .position( cx:(-10...10).randomize, cy:screen.minY - (0.0...48.0).randomize )
  - 位置。x方向は中央付近, y方向は画面下へ配置します。
- .deltaPosition( dx:(-2.0...2.0).randomize, dy:(19.0...20.0).randomize )
  - 毎フレーム、x方向に-2.0~2.0ポイントのランダムに移動, y方向に約20ポイント移動します。（少し左右に振れつつ、上方向へ飛び上がります）
- .scale( square:48.0 )
  - 大きさ。48.0ポイントを設定します。
- .alpha( 0 )
  - アルファ。透明を設定します。
- .life( .random )
  - ライフ。0.0~1.0のランダムを設定します。
- .deltaLife( -0.008 )
  - 毎フレーム、lifeを0.008減少します。

.iterate{ } を用意して、毎フレームのdeltaPositionを変化します。
- .deltaPosition( dx:$0.deltaPosition.x, dy:$0.deltaPosition.y - 0.35 )
  - x方向の移動量は変化なし, y方向の移動量を-0.35していきます。

上記の計算により、だんだんと上方向への移動量が減り、下に落ちるようになります。

.completion{ } を用意して、図形を再利用します。
- .position( cx:(-10...10).randomize, cy:screen.minY - (0.0...48.0).randomize )
  - 位置をx方向は中央付近, y方向は画面下へ戻します。
- .deltaPosition( dx:(-2.0...2.0).randomize, dy:(19.0...20.0).randomize )
  - 毎フレームの移動量を初期値にもどします。
- .life( 1.0 )
  - ライフを1.0に回復します。

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

目標

噴水のようなエフェクトが表示されたら成功です。

目標#

目標