四角を描くことができました。次に四角の色を変えてみましょう。 PGRectangle()に続けて.color( .red )を書きます。このように .(ドット) で続けて作成した四角に指示ができます。 1 2 3 4 func design( screen:PGScreen ) { PGRectangle() .color( .red ) } 「コードを実行」を押します。 目標 四角が赤くなれば成功です。 (+1) .red を .blue や .green などに変更してみましょう。 (+2) .color( red: 0.5, green: 0.8, blue: 0.7 )と記述すると自由に色が作れます。0.0~1.0の間で値を変更してみましょう。 終わったら次のページへ進みます。 Note: colorの初期値は .black です。 実行例
前のページでは、タッチ位置に図形を生成し、.lifeの値を用いて徐々に消えていくようにしました。 前のフレームで描いた図形が少し残るため、タッチの軌跡を表現できました。 今回は、図形の角度と大きさの変化を加えて、図形の表現を豊かにしていきましょう。 design関数に screen.clearColor = .white を書きます。 背景は白に設定します。 update関数を用意します。 if screen.touches.count == 0 { return }を書きます。 タッチしている指の数が0のとき、図形を描かないようになります。 let touch = screen.latestTouchを書きます。 最新のタッチ情報を取得します。 let d_scale = (0.5...1.0).randomizeを書き、0.5~1.0のランダム値をd_scaleに代入します。後述する.deltaScaleに用います。 PGRectangle() を書きます。 PGRectangle()に .position( touch.xy )を加えます。前ページと同様です。 続けて、.color( .random ), .scale( .zero ), .angle( .random )を追加します。図形作成時の初期値です。色、角度はランダム、大きさはゼロにします。 次に、.deltaAngle( degrees:1.0 )を追加して回転を加えます。また.deltaScale(dw:dh)を追加し、変数d_scaleを用いて拡大を行います。 .deltaLife( -0.05 )、 .deltaAlpha( -0.05 ) を前ページと同様に追加します。lifeが減っていき、同時にalphaも減らすことで透明になっていきます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 func design( screen:PGScreen ) { screen....
前ページで円の大きさをアニメーションしました。。このページでは、色の変化を楽しみましょう。 PGCircle() に続けて、.deltaColor(red:green:blue:) を追加します。 1 2 3 4 5 6 func design( screen:PGScreen ) { PGCircle() .deltaColor( red:0.002, green:0.001, blue:0.0015 ) } 「コードを実行」を押します。 目標 少しずつ色が変わっていく円がでたら成功です。 終わったら次のページへ進みます。
前ページで色を変えました。今度は大きさを変えましょう。 .color( .red )に続けて、.scale( width:200, height:300 )を追加します。 1 2 3 4 5 func design( screen:PGScreen ) { PGRectangle() .color( .red ) .scale( width:200, height:300 ) } 「コードを実行」を押します。 目標 縦長の赤い四角が表示できたら成功です。 (+1) widthとheightの値をいろいろ変えてみましょう。 (+2) .color()の色も合わせて変えてみましょう。 終わったら次のページへ進みます。 Note: scaleの初期値は width:100, height:100 です。 実行例
前のページでは、タッチで生成した図形に大きさや角度のアニメーションを加えました。 今回は、1度のタッチで複数の図形を描き、動かしてみましょう。 design関数に screen.clearColor = .white を書きます。 背景は白に設定します。 update関数を用意します。 if screen.touches.count == 0 { return }を書きます。 タッチしている指の数が0のとき、図形を描かないようになります。 let touch = screen.latestTouchを書きます。 最新のタッチ情報を取得します。 for _ in 0 ..< 4を書きます。1度のタッチで4つの図形を生成します。 for分の中でPGRectangle()を書きます。 PGRectangle()に前ページと同様の記述を追加します。ただし、let d_scaleのランダム値の範囲は(0.25...0.5).randomizeに変更します。 次に、.deltaPosition(dx:dy)を追加し、(-2.0...2.0).randomizeでランダムな方向に図形が移動するようにします。 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 = .white } func update( screen:PGScreen ) { if screen....
前ページで大きさを変えました。図形は表示位置を変えることができます。 .position( cx:100, cy:100 )を追加します。cx,cyは図形の中央の座標です。cxはcenter-x, cyはcenter-yの略です。 図形の位置をxとyのプラスとマイナスで表現します。下の図はxとyの関係を示す1つの例です。 中心は(x:0,y:0)です。xプラスは右方向へ移動し、xマイナスは左方向へ移動します。 yプラスは上方向へ移動、yマイナスは下方向へ移動します。 画面端の値は、画面サイズによって変わります（例：画面の横サイズが100だった場合、x=-50で左端、x=+50で右端になります）。 1 2 3 4 5 6 func design( screen:PGScreen ) { PGRectangle() .color( .red ) .scale( width:200, height:300 ) .position( cx:100, cy:100 ) } 「コードを実行」を押します。 目標 右上に移動した四角が表示されれば成功です。 (+1) cx, cyの値をいろいろ変えてみましょう。 終わったら次のページへ進みます。 Note: positionの初期値は cx:0, cy:0 です。 Note: 画面端の値は screen.minX, screen.maxX, screen.minY, screen.maxY で得ることができます。 実行例
前ページで色の変化を試しました。次に、図形を回してみましょう。 回転がわかるように四角 PGRectangle() を使います。 続けて .deltaAngle(degrees:) を追加します。 1 2 3 4 func design( screen:PGScreen ) { PGRectangle() .deltaAngle( degrees:1.0 ) } 「コードを実行」を押します。 目標 回転する四角がでたら成功です。 終わったら次のページへ進みます。
前ページでは回転のアニメーションを行いました。1-3で色のアニメートを扱いましたが、ここでは不透明度(アルファ値)を使って、徐々に消えるアニメーションを作ります。 四角 PGRectangle() を書きます。 続けて .deltaAlpha() を追加し、マイナスの値を指定します。 1 2 3 4 func design( screen:PGScreen ) { PGRectangle() .deltaAlpha( -0.005 ) } 「コードを実行」を押します。 目標 徐々に消えていく四角が表示されたら成功です。 終わったら次のページへ進みます。
前のページまでで、タッチ位置に複数の図形を描き、アニメーションを表現しました。 ここではマルタタッチに挑戦します。LilyPlaygroundでは、screen.touchesで複数のタッチ位置を得られます。 for文を用いて、複数の指の位置に図形を描いてみましょう。 design関数に screen.clearColor = .white を書きます。 背景は白に設定します。 update関数を用意します。 for touch in screen.touchesの繰り返しブロックを書きます。touchにはタッチの座標が順に代入されます。 forのブロックの中でPGRectangle()を書きます。加えて、前ページと同様の記述を追加します。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 func design( screen:PGScreen ) { screen.clearColor = .white } func update( screen:PGScreen ) { for touch in screen.touches { let d_scale = (0.25...0.5).randomize PGRectangle() .position( touch.xy ) .color( .random ) .scale( .zero ) ....
色, 大きさ, 位置 などを操作してきました。ここでは図形を回転させてみましょう。 .angle( degrees:45.0 )を追加します。45度回転させます。 1 2 3 4 5 6 7 func design( screen:PGScreen ) { PGRectangle() .color( .red ) .scale( width:200, height:300 ) .position( cx:100, cy:100 ) .angle( degrees: 45.0 ) } 「コードを実行」を押します。 目標 右上側で45度回転した赤い長方形が出てきたら成功です。 (+1) 色々な角度を試してみましょう。 (+2) .angle(radians:) を使ってみましょう。ラジアンで設定できます。 終わったら次のページへ進みます。 Note: angleの初期値はdegrees:0です。 実行例