2-6. どんどん大きく

前ページで、iterate{ } を使って四角を加速させる表現を作りました。

合わせて、スケーリング変化も加速させて、迫ってくる四角を表現しましょう。

前ページと同じコードを書きます。
.completion{ }内の $0 に .deltaScale(dx:dy:) を追加します。値は dw:1.0, dh:1.0 を指定します。
.iterate{ } 内の $0 に .deltaScale(dw:dh:) を追加します。deltaScale.width と deltaScale.height を1.02倍した値を設定します。1フレームごとに拡大量が増えていきます。

 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
40
41
42


func design( screen:PGScreen ) {
   for _ in 0 ..< 20 {
       PGRectangle()
       .position( screen.randomPoint )
       .deltaPosition(
           dx:(-1.0...1.0).randomize,
           dy:(-1.0...1.0).randomize
       )
       .scale( square: 0.0 )
       .deltaScale( dw:1.0, dh:1.0 )
       .angle( .random )
       .deltaAngle( degrees:1.0 )
       .color( .random )
       .life( .random )
       .deltaLife( -0.005 )
       .completion {
           $0
           .position( screen.randomPoint )
           .deltaPosition( 
               dx:(-1.0...1.0).randomize,
               dy:(-1.0...1.0).randomize 
           )
           .scale( square: 0.0 )
           .deltaScale( dw:1.0, dh:1.0 )
           .angle( .random )
           .color( .random )
           .life( 1.0 )
       }
       .iterate {
           $0
           .alpha( $0.life )
           .deltaPosition( 
             dx:$0.deltaPosition.x * 1.04,
             dy:$0.deltaPosition.y * 1.04
           )
           .deltaScale(
             dw:$0.deltaScale.width * 1.02,
             dh:$0.deltaScale.height * 1.02
           )
       }
   }
}

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

目標

四角がだんだん加速して迫ってくる動きが描けたら成功です。

終わったら次のページへ進みます。

目標#

目標