色, 大きさ, 位置 などを操作してきました。ここでは図形を回転させてみましょう。 .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です。 実行例
前のページでは、マルチタッチを試しました。 Lily Playgroundではタッチしたときのように、指が離れた瞬間をとることもできます。 screen.releasesで指が離れた瞬間に異なるエフェクトを加えてみましょう。 準備として、前回のコードを用意してあります。ここにコードを追加していきます。 screen.touchesのループの下に、screen.releasesのfor文を追加します。使い方はscreen.touchesと同様です。 screen.releasesのfor文の中に、for _ in 0 ..< 32を書きます。 上の32回のループの中で、PGRectangle()を書きます。.position()にrelease.xyを設定して、指を離した位置に図形を描きます。 続いて、.deltaPosition(dx:dy:), .color(), .scale(), .angle(),.deltaAngle(degrees:), .deltaScale(dw:dh:), .deltaLife(), .deltaAlpha()を追加します。ランダムに図形が散らばるアニメーションです。 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 func design( screen:PGScreen ) { screen....
前ページまでのアニメーションを組み合わせてみましょう。 四角PGRectangle() を使います。 続けて .deltaPosition(dx:dy:), .deltaScale(dw:dh:), .deltaColor(red:green:blue:), .deltaAngle(degrees:), .deltaAlpha() を追加して、以下の例のように書きます。 1 2 3 4 5 6 7 8 9 10 func design( screen:PGScreen ) { PGRectangle() .deltaPosition( dx:0.2, dy:0.5 ) .deltaScale( dw:0.4, dh:-0.1 ) .deltaColor( red:0.002, green:0.003, blue:0.001 ) .deltaAngle( degrees:2.0 ) .deltaAlpha( -0.002 ) } 「コードを実行」を押します。 目標 形、位置、色を変えながら消えていく四角が表示されたら成功です。 終わったら次のページへ進みます。 Note: ここまでで取り扱ったdeltaシリーズの関数は初期値は0です。0であるため、フレームが進んでも値は変化しません。 実行例
1-2で色を取り扱いましたが、色の操作の1つとしてalpha（透明度)の操作があります。ここでは図形を透かしてみます。 PGRectangleに.alpha( 0.3 )を追加します。 PGRectangleの前にあるscreen.clearColor = .whiteを.lightGreyに書き換えます。 1 2 3 4 5 6 7 8 9 func design( screen:PGScreen ) { screen.clearColor = .lightGrey PGRectangle() .color( .red ) .scale( width:200, height:300 ) .angle( degrees: 45.0 ) .alpha( 0.3 ) } 「コードを実行」を押します。 目標 薄い灰色の背景に透けた赤の四角が表示されたら成功です。 終わったら次のページへ進みます。 Note: alphaは0.0(透明)~1.0(不透明)の値を指定します。初期値は1.0です。 例えば0.5で半分透明になります。 なおalphaは.colorのalpha:でも変更できます。 Note: screen.clearColor = .色 で背景色を変えられます。 screen.clearColor = LLColor(赤値,緑値,青値,アルファ値)で色値を指定して自由な色を作れます。 例(オレンジ色): screen.clearColor = LLColor( 1.0, 0.5, 0.0, 1.0 ) 実行例
前ページ まででLilyで基本的な図形操作ができるようになりました。ここで一度整理して、次の章にのぞみます。 背景の色を変える: screen.clearColor = .lightGrey 四角を描く: PGRectangle() 色を変える: .color( .cyan ) .color( red:0.5, green:0.7, blue:1.0 ) 大きさを変える: .scale( width:200, height:300 ) 位置を変える: .position( cx: -150, cy:100 ) 回転させる: .angle( degrees:45.0 ) : 360度法 .angle( radians:45.0 * Double.pi / 180.0 ) : 弧度法 上記の二つの式は同じ効果が得られます。 図形を透過する: .alpha( 0.5 ) 目標 自由に色々試してみましょう。楽しめたらベストです。 1章はこれでおわりです。おつかれさまでした。次の章へ進みましょう。
前のページまでで、タッチに反応させてエフェクトをつくるコードを学びました。この章のまとめとして、ここまでに学んだ機能を自由に組み合わせ、試してみましょう。 Lily Playgroundで毎フレーム呼ばれる関数: func update( screen:PGScreen ) { ... } 最新のタッチ位置を取得する: screen.latestTouch タッチの数を得る: screen.touches.count タッチしている位置をすべて取得する: for touch in screen.touches { ... } 指を離した位置を取得する: for relase in screen.releases { ... } 目標 ここまで学んできたコードを使って楽しんでください。 1章はこれでおわりです。おつかれさまでした。次の章へ進みましょう。
前ページまでに、基本的なdeltaの使い方を紹介しました。ここでは一定間隔で実行する処理を紹介します。 四角 PGRectangle() を使います。サイズは .scale( square:200 ) を指定して大きめにします（見やすくするためです）。 .deltaAngle(degrees:) を追加し、回転させます。 .inteval(sec:) を追加し、続けて { } で処理ブロックを書きます。 作った処理ブロックの中に $0 と、続けて .color( .random ) を書きます。 1 2 3 4 5 6 7 8 9 func design( screen:PGScreen ) { PGRectangle() .scale( square:200 ) .deltaAngle( degrees:1.0 ) .interval( sec:1.0 ) { $0 .color( .random ) } } 「コードを実行」を押します。 目標 回転しながら、1秒ごとに色がランダムに変化する四角が表示されたら成功です。 終わったら次のページへ進みます。 Note: .interval(sec:) の後ろの処理ブロックはクロージャと呼ばれる関数です。intervalがsecで指定した秒数ごとに、クロージャを繰り返して処理します。 Note: $0 はSwiftの省略表記です。クロージャに渡される最初の値という意味になります。渡されるものは処理によって変わります。 .interval(sec:) の場合、 $0 はintervalを呼んでいる図形自身です。
前ページでは、一定間隔の処理を行いました。さて、ここでは少しテーマを変えましょう。 LilyPlaygroundの図形は、 life の値を持っています。 life が0.0以下になると図形が消えます。試してみましょう。 PGCircle() を書きます。 .life( 1.0 ) を追加し、初期のライフを指定します。 .deltaLife( -0.005 ) を記述して、フレームごとのライフの減り量を指定します。 1 2 3 4 5 func design( screen:PGScreen ) { PGCircle() .life( 1.0 ) .deltaLife( -0.005 ) } 「コードを実行」を押します。 目標 円が表示されたあと、3~4秒待って円が消えたら成功です。 終わったら次のページへ進みます。 Note: life の初期値は1.0です。life の値は0.0~1.0です。フレームの更新時、 life の値をチェックします。その時 life が0.0以下になった図形を削除します。
前ページで、 life を紹介しました。 life が0.0になった時、図形が消える前の終了処理を行えます。 .completion{ } を使ってみましょう。 PGCircle() を書きます。 初期ライフとして .life( 1.0 ) を指定します。またlifeに合わせて .alpha( 1.0 ) を指定します。 フレームごとの減り量として、 .deltaLife( -0.005 ) と deltaAlpha( -0.005 ) を指定します。 .completion のブロック内で $0 と、続けて .life( 1.0 ) を指定して1.0に戻します。 アルファ値も .alpha( 1.0 ) で戻します。 1 2 3 4 5 6 7 8 9 10 11 12 func design( screen:PGScreen ) { PGCircle() .life( 1.0 ) .deltaLife( -0.005 ) .alpha( 1.0 ) .deltaAlpha( -0.005 ) ....
前の章で、タッチ位置の使い方の基礎を学びました。 この章では、これまで学んだことを応用して、タッチ時のエフェクトのバライエティを生み出していきましょう。 このページでは、BlurryCircleの加算合成で光の粒を表現し、鮮やかに拡散する光のエフェクトをつくります。 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 func design( screen:PGScreen ) { screen.clearColor = .darkGrey } func update( screen:PGScreen ) { for touch in screen.touches { for _ in 0 ..< 8 { let speed = (2.0...4.0).randomize let rad = (0.0...2.0 * Double.pi).randomize PGAddBlurryCircle() .color( LLColor( 0....