Lily Playground

前の章で、アニメーションで使う基本的な操作を学びました。 この章では、機能を組み合わせて視覚表現を作っていきましょう。 はじめに、ランダムにたくさんの四角がアニメーションする視覚表現を目指します。 ここでは、まず複数の円を描き、フェードアウトを繰り返すアニメをつくります。 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をカウンタと呼びます。 実行例

前のページ このページでは、タッチした軌跡がキラキラと光るエフェクトを表現してみます。 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 func design( screen:PGScreen ) { screen.clearColor = .darkGrey } func update( screen:PGScreen ) { for touch in screen.touches { let max_dist = 80.0 let radians = (0.0...2.0).randomize * Double.pi let d2 = max_dist * (0.0...1.0).randomize let dx = d2 * cos( radians ) let dy = d2 * sin( radians ) PGAddMask( "mask-sparkle" ) ....

横に並べる繰り返し を行いました。さらにそれを縦に展開しましょう。 前ページのプログラムに続き、繰り返し文(for文)をもう1つ使って円を縦にも並べます。繰り返し回数を7にします。 .position(cx: に繰り返しカウンタのxに70を掛け算した値を加算します。 .position(cy: に繰り返しカウンタのyに70を掛け算した値を加算します。 1 2 3 4 5 6 7 8 9 10 11 func design( screen:PGScreen ) { for y in 0 ..< 7 { for x in 0 ..< 7 { PGCircle() .color( .blue ) .scale( width:50, height:50 ) .position( cx:-210 + x * 70, cy:-210 + y * 70 ) } } } 「コードを実行」を押します。 目標 縦横に並んだたくさんの円が表示されたら成功です。 (+1) 繰り返し回数、また.positionでの掛け算の値を変えてみましょう。 (+2) 円を別の形状に変えてみましょう。 終わったら次のページへ進みます。 実行例

前ページで、四角のアニメーションにスケーリングの変化を加えました。 次に、ランダムな移動を加えてみましょう。 前ページと同じコードを書きます。 PGRectangle()に .deltaPosition(dx:dy:) を追加します。値は(-1.0…1.0).randomizeを指定します。 .completion{ } 内の$0に .deltaPosition(dx:dy:) を追加します。値は(-1.0…1.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 func design( screen:PGScreen ) { for _ in 0 ..< 20 { PGRectangle() .position( screen.randomPoint ) .deltaPosition( dx:(-1.0...1.0).randomize, dy:(-1.0...1.0).randomize ) .scale( square: 0.0 ) .deltaScale( dw:1.0, dh:1.0 ) .color( .random ) ....

前ページで、四角の移動のアニメーションを加えました。 次に、回転を加えてみましょう。 前ページと同じコードを書きます。 PGRectangle()に .angle() を追加します。値はランダムを指定します。 続けて .deltaAngle(degrees:) を追加します。値は1.0を指定します。 .completion{ } 内の$0に .angle() を追加し、ランダムで初期化します。 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 func design( screen:PGScreen ) { for _ in 0 ..< 20 { PGRectangle() .position( screen.randomPoint ) .deltaPosition( dx:(-1.0...1.0).randomize, dy:(-1.0...1.0).randomize ) .scale( square: 0.0 ) ....