2-7. 複数図形で視覚表現

前ページで、四角が迫ってくるアニメーションを表現しました。このように基本動作を組み合わせて、さまざまな表現が可能です。この章の締めくくりに、四角以外の形状も混ぜてみる例を紹介します。

図形オブジェクトを入れる let shape:PGActor! を書きます。
shape の形を決めるため、ランダム値 let rnd を作成します。
rndの値を使って、 if、else if、else の条件分岐を書きます。条件によって shape に異なる形(円、四角、三角)を作成して、格納します。
前ページと同じ動作のコードを shape に対して記述します。

 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
43
44
45
46
47
48
49
50
51
52
53
54
55


func design( screen:PGScreen ) {
   for _ in 0 ..< 20 {
       let shape:PGActor!
       let rnd = (0.0...3.0).randomize

       if rnd < 1.0 {
          shape = PGRectangle()
       }
       else if rnd < 2.0 {
          shape = PGTriangle()
       }
       else {
          shape = PGCircle()
       }
        
       shape
       .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
           )
       }
   }
}

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

目標

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

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

Note: let shape:PGActor! は、PGActorオブジェクトを格納する定数です。中身はありません。 ! はオプショナルといいます。中身がない可能性のあるオブジェクトをつくります。後から色々な形を入れるため、この仕組みを使っています。

Note: PGActor はプロトコルという仕組みです。 PGRectangle、 PGCircle、 PGTriangle の3つの図形は、 PGActorプロトコルを使用しています。そのため、PGActorオブジェクトの定数に格納することができます。

目標#

目標