3-8. 跳ね返る円

壁に跳ね返るボールを表現してみましょう。

 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 = .black
    
    for _ in 0 ..< 20 {
        let speed = (4.0...8.0).randomize
        let radians = (0.0...2.0).randomize * Double.pi
        let dx = speed * cos( radians )
        let dy = speed * sin( radians )
        
        PGAddCircle()
        .color( .random )
        .position( 
            cx: (screen.minX + 30 ... screen.maxX - 30).randomize,
            cy: (screen.minY + 30 ... screen.maxY - 30).randomize
        )
        .deltaPosition( 
            dx:dx,
            dy:dy
        )
        .scale( square:60 )
        .iterate {
            if $0.position.x - 30 <= Float( screen.minX ) {
                $0.deltaPosition.x *= -1
            }
            
            if Float( screen.maxX ) <= $0.position.x + 30 {
                $0.deltaPosition.x *= -1
            }
            
            if $0.position.y - 30 <= Float( screen.minY ) {
                $0.deltaPosition.y *= -1
            }
            
            if Float( screen.maxY ) <= $0.position.y + 30 {
                $0.deltaPosition.y *= -1
            }
        }    
    }
}

screen.clearColor = .black で背景を黒にします。

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

forの中に、初期設定に必要な変数をつくります。
- let speed = (4.0...8.0).randomize
  - 速度用の変数。4.0~8.0のランダム値をつくり、代入します。
- let radians = (0.0...2.0).randomize * Double.pi
  - 進行方向の角度の変数。0~2πのランダムの値をつくり、代入します。
- let dx = speed * cos( radians )
  - x方向の移動量の変数。変数radiansのコサイン値とspeedを掛け算した値を代入します。
- let dy = speed * sin( radians )
  - y方向の移動量の変数。変数radiansのサイン値とspeedを掛け算した値を代入します。

forの中で、加算合成の円 PGAddCircle() をつくります。

PGAddCircleの初期設定のコードを書きます。円の大きさは60ポイント、半径が30ポイントになります。
- .color( .random )
  - 色。ランダムな色を設定します。
- .position( cx: (screen.minX + 30 ... screen.maxX - 30).randomize, cy: (screen.minY + 30 ... screen.maxY - 30).randomize )
  - 位置。x方向は左端+30~右端-30のランダム、 y方向は上端-30~下端+30ポイントのランダム座標に設定します。
- .deltaPosition( dx:dx, dy:dy )
  - 毎フレームの移動量。x方向は変数dx、 y方向は変数dyの値を設定します。
- .scale( square:60 )
  - 大きさ。60ポイントを設定します。

.iterate{ } を用意します。位置によって図形の移動方向を変えます。
- if $0.position.x - 30 <= Float( screen.minX ) { ... }
  - 図形の中央x座標 - 30ポイント(円の半径)が、画面の左端に到達したとき、{ }の中の処理を行います。
- Float( screen.maxX ) <= $0.position.x + 30 { ... }
  - 図形の中央x座標 + 30ポイント(円の半径)が、画面の右端に到達したとき、{ }の中の処理を行います。
- $0.deltaPosition.x *= -1
  - x方向の移動量の正負を逆にします。
- if $0.position.y - 30 <= Float( screen.minX ) { ... }
  - 図形の中央y座標 - 30ポイント(円の半径)が、画面の下端に到達したとき、{ }の中の処理を行います。
- Float( screen.maxX ) <= $0.position.y + 30 { ... }
  - 図形の中央y座標 + 30ポイント(円の半径)が、画面の上端に到達したとき、{ }の中の処理を行います。
- $0.deltaPosition.y *= -1
  - y方向の移動量の正負を逆にします。

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

目標

ボールが画面端で跳ね返る絵が表示されたら成功です。

目標#

目標