前ページで円を移動させました。このページでは、大きさを変えてみましょう。 大きさのフレームごとの変化量は .deltaScale で指定します。 PGCircle() に .deltaScale(dw:dh:) を追加します。 1 2 3 4 func design( screen:PGScreen ) { PGCircle() .deltaScale( dw:0.4, dh:-0.1 ) } 「コードを実行」を押します。 目標 横に伸びて縦に縮まる円が出たら成功です。 終わったら次のページへ進みます。
前のページでは、updateのはじめに screen.removeAllShapes() をつかって前の図形を消していました。そのため図形はタッチ位置に1つのみでした。 今回は、前のタッチ位置に描いた図形を残します。さらに新たなタッチ位置に図形を加えます。 しかし、図形が増えすぎてもいけません。.deltaLife と .deltaAlpha を使って、時間が経つと消滅するように工夫します。 design関数に screen.clearColor = .lightGrey を書きます。 背景を薄灰色に設定します。 update関数を用意します。 let touch = screen.latestTouchを書きます。 最新のタッチ情報を取得します。 PGCircle() を書きます。 PGCircle()に .position( touch.xy ) を追加します。 続けて .deltaLife( -0.05 )、 .deltaAlpha( -0.05 ) を追加します。lifeが減っていくようになります。lifeが0.0になるとPGCircleが消滅します。lifeと合わせてalphaも減らすことで、徐々に消える様子を表現します。 1 2 3 4 5 6 7 8 9 10 11 12 func design( screen:PGScreen ) { screen.clearColor = .lightGrey } func update( screen:PGScreen ) { let touch = screen.latestTouch PGCircle() .position( touch.xy ) .deltaLife( -0....
四角を描くことができました。次に四角の色を変えてみましょう。 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 ) } 「コードを実行」を押します。 目標 徐々に消えていく四角が表示されたら成功です。 終わったら次のページへ進みます。