Swift

前のページでは、マルチタッチを試しました。 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.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( width:0.0, height:0.0 ) .angle( .random ) .deltaAngle( degrees:1.0 ) .deltaScale( dw:d_scale, dh:d_scale ) .deltaLife( -0.01 ) .deltaAlpha( -0.01 ) } for release in screen.releases { for _ in 0 ..< 32 { let d_scale = (0.25...0.5).randomize PGRectangle() .position( release.xy ) .deltaPosition( dx:(-2.0...2.0).randomize, dy:(-2.0...2.0).randomize ) .color( .random ) .scale( .zero ) .angle( .random ) .deltaAngle( degrees:1.0 ) .deltaScale( dw:d_scale, dh:d_scale ) .deltaLife( -0.01 ) .deltaAlpha( -0.01 ) } } } 「コードを実行」を押します。 目標 実行後、タッチの軌跡を描き、指を離したときに図形が散るエフェクトが描けたら成功です。 終わったら次のページへ進みます。 ...

前ページまでのアニメーションを組み合わせてみましょう。 四角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 ) } 「コードを実行」を押します。 目標 形、位置、色を変えながら消えていく四角が表示されたら成功です。 終わったら次のページへ進みます。 ...

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 ) } 「コードを実行」を押します。 目標 薄い灰色の背景に透けた赤の四角が表示されたら成功です。 終わったら次のページへ進みます。 ...

前ページ までで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秒ごとに色がランダムに変化する四角が表示されたら成功です。 終わったら次のページへ進みます。 ...

前ページでは、一定間隔の処理を行いました。さて、ここでは少しテーマを変えましょう。 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 ) .completion { $0 .life( 1.0 ) .alpha( 1.0 ) } } 「コードを実行」を押します。 目標 円が表示されたあと、3~4秒待って円が消え、また表示されるのを繰り返したら成功です。 終わったら次のページへ進みます。 ...

前の章で、タッチ位置の使い方の基礎を学びました。 この章では、これまで学んだことを応用して、タッチ時のエフェクトのバライエティを生み出していきましょう。 このページでは、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.4, 0.6, 0.95, 1.0 ) ) .position( touch.xy ) .deltaPosition( dx: speed * cos( rad ), dy: speed * sin( rad ) ) .scale( width:(5.0...40.0).randomize, height:(5.0...40.0).randomize ) .angle( .random ) .deltaAngle( degrees: (-2.0...2.0).randomize ) .life( 1.0 ) .deltaLife( -0.016 ) .alpha( 1.0 ) .deltaAlpha( -0.016 ) } } } design関数に screen.clearColor = .darkGrey を書きます。背景は濃い灰色です。 update関数を用意します。 for touch in screen.touchesでタッチのループを作ります。触れている指すべてをとらえます。 さらに、touchのループの中でfor _in 0 ..< 8で8回ループを行い、 加算合成のブラー円PGAddBlurryCiecle()を作ります。 図形を動かすため、スピードと角度を計算した変数speed,radを作ります。 speedは2.04.0のランダム値、radは02πのラジアンのランダム値です。 初期設定のコードを書きます。 .color( LLColor( 0.4, 0.6, 0.95, 1.0 ) ) 色。薄青を設定します。 .position( touch.xy ) 位置。タッチ位置を設定します。 .deltaPosition( dx: speed * cos( rad ), dy: speed * sin( rad ) ) 毎フレームの移動量。speedとradを用いて、タッチ位置から360度方向にランダムに飛び散ります。 .scale( width:(5.0...40.0).randomize, height:(5.0...40.0).randomize ) 大きさ。5.0~40.0のランダム値です。縦と横のサイズを一致させないことでランダムの楕円になります。 .angle( .random ) 角度。ランダムを設定します。 .deltaAngle( degrees: (-2.0...2.0).randomize ) 毎フレームの角度変化量。-2.0~2.0度でランダムに回転します。 .life( 1.0 ) ライフ。1.0から開始します。 .deltaLife( -0.016 ) 毎フレームのライフ変化量。-0.016で約60フレームでライフが0になります。 .alpha( 1.0 ) アルファ。1.0を設定します。 .deltaAlpha( -0.016 ) 毎フレームのアルファ変化量。-0.016で約60フレームで透明になります。 ...

前章 でLilyPlaygroundの使い方に導入しました。この章ではいろいろな形を描いてバラエティを増やしましょう。 PGRectangle()に加えて、PGCircle()、PGTriangle()、PGBlurryCircle()を追加します。 またそれぞれの.positionと.colorを以下のように設定します。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 func design( screen:PGScreen ) { PGRectangle() .color( .green ) .position( cx:-100, cy:100 ) PGTriangle() .color( .red ) .position( cx:100, cy:100 ) PGCircle() .color( .blue ) .position( cx:-100, cy:-100 ) PGBlurryCircle() .color( .magenta ) .position( cx:100, cy:-100 ) } 「コードを実行」を押します。 目標 四角、三角、円、ぼやけた円 が表示されたら成功です。 終わったら次のページへ進みます。 ...