前ページでは、一定間隔の処理を行いました。さて、ここでは少しテーマを変えましょう。 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....
前章 で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 ) } 「コードを実行」を押します。 目標 四角、三角、円、ぼやけた円 が表示されたら成功です。 終わったら次のページへ進みます。 実行例
前の章で、アニメーションで使う基本的な操作を学びました。 この章では、機能を組み合わせて視覚表現を作っていきましょう。 はじめに、ランダムにたくさんの四角がアニメーションする視覚表現を目指します。 ここでは、まず複数の円を描き、フェードアウトを繰り返すアニメをつくります。 forで繰り返し、20個のPGRectangle() を書きます。 .position()はランダム座標のscreen.randomPointを指定します。 .color(), .life() は .random、 そして deltaLife() には-0.01を指定して初期化します。 続けて、.completion{ } で再利用を行います。 .position()はランダム座標で初期化、 .life()は1.0に戻します。 .color() はランダムにしましょう。 続けて .iterate{ } を書きます。そのブロック内で $0.alpha( $0.life ) を書きます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 func design( screen:PGScreen ) { for _ in 0 ..< 20 { PGRectangle() .position( screen.randomPoint ) .color( .random ) .life( .random ) .deltaLife( -0....
ランダムな色・大きさ を改良し、さらに色々な形を描いてみましょう。 前回のコードにlet a = (0.0...3.0).randomizeを記述します。 (0.0…3.0)と小数で指定します。得られるランダム値も小数となります。 aの値でifの条件をつくり、3つの図形を描きわけます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 func design( screen:PGScreen ) { for _ in 0 ..< 100 { let a = (0.0...3.0).randomize if a < 1.0 { PGCircle() .color( .random ) .scale( square:(20...100).randomize ) .position( screen.randomPoint ) } else if a < 2.0 { PGTriangle() ....
前回 のものにさらにランダム要素を加えましょう。 前回のそれぞれの図形に.angle( .random )や.alpha( .random )を追加します。 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 ) { for _ in 0 ..< 100 { let a = (0.0...3.0).randomize if a < 1.0 { PGCircle() .color( .random ) .scale( square:(20...100).randomize ) .position( screen.randomPoint ) .angle( .random ) ....
いろいろなランダム を使って、複数の図形をたくさん描くコードを学んできました。この章のまとめとして、ここまでに学んだ機能を自由に組み合わせ、試してみましょう。 四角を描く: PGRectangle() 三角を描く: PGTriangle() 円を描く: PGCircle() ぼかし円を描く: PGBlurryCircle() 繰り返し処理: for a in 0 ..< 繰り返し回数 { 繰り返す処理 } 条件分岐: if 条件 { 条件を満たした時 } else { 条件を満たさない時 } ランダムの位置: .position( screen.randomPoint ) ランダムの色: .color( .random ) ランダムの大きさ: .scale( square:(20...100).randomize ) ランダムの角度: .angle( .random ) ランダムの不透明度: .alpha( .random ) 目標 ここまで学んできたコードを使って楽しんでください。 2章はこれでおわりです。おつかれさまでした。次の章へ進みましょう。
前のページ このページでは、タッチ位置から水が噴き出すシャワーを表現してみましょう。 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 func design( screen:PGScreen ) { screen.clearColor = .darkGrey } func update( screen:PGScreen ) { for touch in screen.touches { for _ in 0 ..< 16 { PGAddBlurryCircle() .color( LLColor( 0.16, 0.3, 0.5, 0.8 ) ) .position( cx: touch.x + (-5.0...5.0).randomize, cy: touch....
前ページ で色々な図形を描きました。ここでは円を横に並べてみましょう。 繰り返し文(for文)を使って円を複数並べます。繰り返し回数を7にします。 for文の中にPGCircle()を入れることで複数の円を描きます。 .position(cx: で繰り返しのカウンタxに70を掛けて加算します。 1 2 3 4 5 6 7 8 func design( screen:PGScreen ) { for x in 0 ..< 7 { PGCircle() .color( .blue ) .scale( width:50, height:50 ) .position( cx:-210 + x * 70, cy:0 ) } } 「コードを実行」を押します。 目標 横に並んだ円が表示されたら成功です。 (+1) 繰り返し回数、また.positionでの掛け算の値を変えてみましょう。 (+2) 円をぼやけた円(PGBlurryCircle)などに変えてみましょう。 終わったら次のページへ進みます。 Note: for x in 0 ..< 7 { ※ この中のコードを7回繰り返します。 ※ xの値が 0,1,2,3,…,6 と変化します。 } Note: for x in … のxをカウンタと呼びます。 実行例