3-6. ぼたん雪の降る夜

ぼやけた円を雪にみたてて、これを降らせてみましょう。

 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


func design( screen:PGScreen ) {
    screen.clearColor = LLColor( 0.0, 0.05, 0.2, 1.0 )
    
    for _ in 0 ..< 80 {
        let size = (10.0 ... 50.0).randomize
        let speed = size / 50.0
        let c = LLColor( 0.9, 0.95, 1.0, Float( speed ) )
        
        PGBlurryCircle()
        .color( c )
        .position( 
            cx:(screen.minX...screen.maxX).randomize,
            cy:(screen.minY-200...screen.maxY+200).randomize
        )
        .deltaPosition( 
            dx:(-0.5 ... 0.5).randomize * speed,
            dy:(-8.0 ... -6.5).randomize * speed
        )
        .scale( square:size )
        .iterate {
            if $0.position.y < Float( screen.minY - 200.0 ) {
                $0
                .position( 
                    cx:(screen.minX...screen.maxX).randomize,
                    cy:screen.maxY + 200
                )
            }
        }    
    }
}

screen.clearColor = LLColor( 0.0, 0.05, 0.2, 1.0 ) で背景を群青色にします。

forで、80回繰り返します。

forの中に、初期設定に必要な変数をつくります。
- let size = (10.0 ... 50.0).randomize
  - 大きさ用の変数。10.0~50.0のランダム値をつくり、代入します。
- let speed = size / 50.0
  - 速度用の変数。sizeに合わせて0.2~1.0の値をつくり、代入します。
- let c = LLColor( 0.9, 0.95, 1.0, Float( speed ) )
  - 色用の変数。少し青みがかった白をつくり、代入します。またアルファにspeedの値を設定します。

forの中で、ぼやけた円 PGBlurryCircle() をつくります。

初期設定のコードを書きます。
- .color( c )
  - 色。変数cを指定します。
- .position( cx:(screen.minX...screen.maxX).randomize, cy:(screen.minY-200...screen.maxY+200).randomize )
  - 位置。x方向は左端~右端のランダム、 y方向は上端-200~下端+200ポイントのランダム座標に設定します。（画面全体から縦にはみ出した範囲にランダムに配置されます）。
- .deltaPosition( dx:(-0.5 ... 0.5).randomize * speed, dy:(-8.0 ... -6.5).randomize * speed )
  - 毎フレームの移動量。x方向は左右-0.5~0.5ポイントのランダム、 y方向は-8.0~-6.5のランダムに変数speedを掛け算した値を設定します。
- .scale( square:size )
  - 大きさ。変数sizeを設定します。

.iterate{ } を用意して、図形の再利用のタイミングをうかがいます。
- if $0.position.y < Float( screen.minY - 200.0 ) { ... }
  - 図形が画面の下端から200ポイントはみ出したとき、{ }の中の処理を行います。
- .position( cx:(screen.minX...screen.maxX).randomize, cy:screen.maxY+200.randomize )
  - x方向は左端~右端のランダム、 y方向は上端+200ポイントの位置に再配置します。

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

目標

雪が降るエフェクトが表示されたら成功です。

Note: このサンプルは、.iterate{ }で図形の再利用をしています。.life = 0.0 で図形を再利用する時は、.completion{ }を使います。それ以外のタイミングで再利用する時、.iterate{ } で実現が可能です。

目標#

目標