2-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


func design( screen:PGScreen ) {
    screen.clearColor = .darkGrey
}

func update( screen:PGScreen ) {
    for touch in screen.touches {
        for _ in 0 ..< 16 {
            PGAddBlurryCircle()
            .color( LLColor( 0.16, 0.3, 0.5, 0.8 ) )
            .position( 
                cx: touch.x + (-5.0...5.0).randomize,
                cy: touch.y + (-5.0...5.0).randomize
            ) 
            .deltaPosition( 
                dx:(-1.0...1.0).randomize,
                dy:(1.0...3.0).randomize
            )
            .scale( square: 24.0 )
            .iterate {
                $0.deltaPosition.y -= 0.25
                
                if $0.position.y < Float( screen.minY ) {
                    $0.life( 0.0 )
                }
            }
        }
    }
}

design関数に screen.clearColor = .darkGrey を書きます。背景は濃い灰色です。

update関数を用意します。

for touch in screen.touchesでタッチのループを作ります。触れている指すべてをとらえます。

3のループ内でfor _ in 0 ..< 16を作り、加算合成のブラー円PGAddBlurryCiecle()を作ります。

初期設定のコードを書きます。
- .color( LLColor( 0.16, 0.3, 0.5, 0.8 ) )
  - 色。重なると薄青になるような色を指定します。
- .position( cx: touch.x + (-5.0...5.0).randomize, cy: touch.y + (-5.0...5.0).randomize )
  - 位置。タッチ位置から-5.0~5.0のブレがある範囲を設定します。
- .deltaPosition( dx:(-1.0...1.0).randomize, dy:(1.0...3.0).randomize )
  - 毎フレームの移動量。dxは左右方向にわずかな移動,dyは上方向に向いた移動を行うよう設定します。
- .scale( square: 24.0 )
  - 大きさ。24.0で固定です。

.iterate{ } を用意して、毎フレームのdeltaPositionを変化します。
- $0.deltaPosition.y -= 0.25
  - y方向の移動量を-0.25していきます。

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

if $0.position.y < Float( screen.minY )で画面の一番下に到達したかを判定します。
- 画面下に到達したら$0.life( 0.0 )で、図形を消去します。

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

目標

実行後、タッチの軌跡が描ければ成功です。

目標#

目標