iPadでのLily Playground Booksの導入手順 1.Playgrounds Appのインストール iPadでApp Storeを開き、Swift Playgroundsをインストールします。 2. 購読 Lily Playgroundの購読を開始します。購読は無料です。iPadのSafariから下のリンクに進むと、Swift Playgrounds Appが開き、購読の確認に進みます。 Lily Playgroundを購読する 2-1. 購読を開始する 「購読しますか」と聞かれます。「購読」を選択してください。 2-2. 追加されたBooks購読リスト App内の購読リストに「Lily Playground」が追加され、Booksを入手できます。 3. Bookのダウンロード 3-1. Bookの選択 LilyPG…というBookを選び、「入手」を押すと、Bookのダウンロードがはじまります。 3-2. Bookを使う マイプレイグラウンドでBookを利用できるようになりました。
macOSでのLily Playground Booksの導入手順 1.Playgrounds Appのインストール App Storeを開き、Swift Playgroundsをインストールします。 2. 購読 Lily Playgroundの購読を開始します。購読は無料です。Safariから下のリンクに進むと、Swift Playgrounds Appが開き、購読の確認に進みます。 Lily Playgroundを購読する 2-1. 購読を開始する 「購読しますか」と聞かれます。「購読」を選択してください。 2-2. 追加されたBooks購読リスト App内の購読リストに「Lily Playground」が追加され、Booksを入手できます。 3. Bookのダウンロード 3-1. Bookの選択 LilyPG…というBookを選び、「入手」を押すと、Bookのダウンロードがはじまります。 3-2. Bookを使う マイプレイグラウンドでBookを利用できるようになりました。
このBookでは、タッチに反応して図形を描くプログラミングしていきます。 タッチに合わせて動くエフェクトはとても魅力的です。表現を工夫して楽しいエフェクトを作っていきましょう。 手始めに、タッチしたところに円を描くプログラムを書きましょう。 前のBookでは実行時に1度だけ処理するdesign関数をつかいました。 このBookから、design関数に加え、update関数をつかいます。 update関数は繰り返し呼ばれる関数です。呼ばれるたびにタッチの情報を更新するため、今タッチしている位置が得られます。screen.latestTouch が最新の触れた位置の情報です。 design関数に screen.clearColor = .lightGrey を書きます。 背景を薄灰色に設定します。 update関数を用意します。 update関数のはじめに、screen.removeAllShapes() を書きます。 一度すべての図形を消す処理です。updateは繰り返し呼ばれるので前のフレームの図形が残ります。 今回は前フレームの図形を消すため、removeAllShapes()を呼びます。 let touch = screen.latestTouchを書きます。 最新のタッチ情報がtouchに入ります。 PGCircle() を書きます。 PGCircle()に .position( touch.xy ) を追加します。 touch.xyはタッチ情報のxy座標が得られます。 1 2 3 4 5 6 7 8 9 10 11 12 func design( screen:PGScreen ) { screen.clearColor = .lightGrey } func update( screen:PGScreen ) { screen.removeAllShapes() let touch = screen.latestTouch PGCircle() .position( touch.xy ) } 「コードを実行」を押します。 目標 実行後、タッチした位置に丸が描けたら成功です。...
このBookでは、LilyPlaygroundで描いた図形を動かすプログラミングを学びます。 工夫をこらして、美しいアニメーションをつくっていきましょう。 LilyPlaygroundでは、1秒間に最大60回、画面をリフレッシュします。その1回ごとに図形のパラメータを変えることで、動きを表現します。 1回ごとに加算する値を delta と呼びます。たとえば、 position の加算値は deltaPosition です。 てはじめに deltaPosition を使ってみましょう。 design関数内に、 PGCircle() を書きます。 PGCircleに .deltaPosition(dx:dy:) を追加します。 1 2 3 4 func design( screen:PGScreen ) { PGCircle() .deltaPosition( dx:0.5, dy:1.0 ) } 「コードを実行」を押します。 目標 中心から右上に移動する円が出たら成功です。 終わったら次のページへ進みます。
LilyPlaygroundへようこそ。たのしく絵を描きながら、Swiftでプログラミングを学んでいきましょう。最終的に色々な図形を自由に操って美しい表現を目指します。この1章はその第一歩です。まず画面に四角を描いてみます。 下のプログラムの入力部分に PGRectangle() と書きます。 1 2 3 func design( screen:PGScreen ) { PGRectangle() } 「コードを実行」を押したら、すこし待ちます。 目標 画面の真ん中に黒い四角が出たら成功です。 終わったら次のページへ進みます。 実行例
前ページでは life がなくなった時の処理、 .completion{ } を紹介しました。 ここでは .completion{ } を活用して、図形を再利用してアニメーションを繰り返してみましょう。 PGCircle() を書きます。 フレームごとの移動量 .deltaPosition( dx:0.0, dy:-1.0 ) を指定します。 初期ライフとして .life( 1.0 ) を指定します。またlifeに合わせて .alpha( 1.0 ) を指定します。 フレームごとの減り量として、 .deltaLife( -0.01 ) と deltaAlpha( -0.01 ) を指定します。 .completion のブロック内で図形を再設定します。 .position(), .life(), .alpha() を使って、それぞれ初期化します。 フレーバーとして .color( .random ) を追加します。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 func design( screen:PGScreen ) { PGCircle() .deltaPosition( dx:0.0, dy:-1....
前ページで終了時の操作を学びました。 ここでは、毎フレームの処理を自分で書いてみましょう。 PGCircle() を書きます。 .position(cx:cy:), deltaPosition(dx:dy:), .life(), deltaLife() を指定します。はじめの初期化です。 .completion{ } で再利用を行います。 .position(cx:cy:)、deltaPosition(dx:dy:), .life() をそれぞれ元の値に戻します。 .color() は前回と同じくランダムにします。 続けて .iterate{ } を書きます。そのブロック内で $0.deltaPosition(dx:dy:) を書きます。deltaPosition.yの値を1.08倍します。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 func design( screen:PGScreen ) { PGCircle() .position( cx:0.0, cy:200.0 ) .deltaPosition( dx:0.0, dy:-1.0 ) .life( 1.0 ) .deltaLife( -0.01 ) .completion { $0 .position( cx:0.0, cy:200.0 ) ....
前ページまでに、LilyPlaygroundでの色々なアニメーションの方法を学んできました。この章のまとめとして、ここまでに学んだ機能を自由に組み合わせ、試してみましょう。 1フレームあたりの移動量を指定する: .deltaPosition(dx:dy:) 1フレームあたりの大きさ変化を指定する: .deltaScale(dw:dh:) 1フレームあたりの色の変化量を指定する: .deltaColor(red:green:blue:) 1フレームあたりの回転量を指定する: .deltaAngle(degrees:) .deltaAngle(radians:) 1フレームあたりのアルファ変化量を指定する: .deltaAlpha() 図形のライフを指定する(0.0~1.0): .life() 1フレームあたりのライフの変化量を指定する: .deltaLife() 一定間隔で実行する($0は図形): .interval(sec:秒数) { $0.実行する処理 } ライフが0になった時実行する($0は図形): .completion { $0.実行する処理 } 毎フレーム実行する: .iterate { $0.実行する処理 } 目標 ここまで学んできたコードを使って楽しんでください。 1章はこれでおわりです。おつかれさまでした。次の章へ進みましょう。
前ページで円を移動させました。このページでは、大きさを変えてみましょう。 大きさのフレームごとの変化量は .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....