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.005 ) .completion { $0 .position( screen.randomPoint ) .color( .random ) .life( 1.0 ) } .iterate { $0.alpha( $0.life ) } } } 「コードを実行」を押します。 目標 ランダムに表示される四角が薄くなって消えていき、別のところに四角が現れるアニメーションが描けたら成功です。 終わったら次のページへ進みます。 ...

ランダムな色・大きさ を改良し、さらに色々な形を描いてみましょう。 前回のコードに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() .color( .random ) .scale( square:(20...100).randomize ) .position( screen.randomPoint ) } else { PGRectangle() .color( .random ) .scale( square:(20...100).randomize ) .position( screen.randomPoint ) } } } 「コードを実行」を押します。 目標 画面上の不定な位置に色や大きさが様々な図形が描かれれば成功です。 (+1) 「コードを実行」を何度か試してください。結果が変わります。 終わったら次のページへ進みます。 ...

前回 のものにさらにランダム要素を加えましょう。 前回のそれぞれの図形に.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 ) .alpha( .random ) } else if a < 2.0 { PGTriangle() .color( .random ) .scale( square:(20...100).randomize ) .position( screen.randomPoint ) .angle( .random ) .alpha( .random ) } else { PGRectangle() .color( .random ) .scale( square:(20...100).randomize ) .position( screen.randomPoint ) .angle( .random ) .alpha( .random ) } } } 「コードを実行」を押します。 目標 たくさんの円、三角、四角が透けたり、回転していれば成功です。 (+1) 「コードを実行」を何度か試してください。結果が変わります。 終わったら次のページへ進みます。 ...

いろいろなランダム を使って、複数の図形をたくさん描くコードを学んできました。この章のまとめとして、ここまでに学んだ機能を自由に組み合わせ、試してみましょう。 四角を描く: 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.y + (-5.0...5.0).randomize ) .deltaPosition( dx:(-1.0...1.0).randomize, dy:(1.0...3.0).randomize ) .scale( square: 24.0 ) .iterate { $0.deltaPosition.y -= 0.25 if $0.position.y < Float( screen.minY ) { $0.life( 0.0 ) } } } } } design関数に screen.clearColor = .darkGrey を書きます。背景は濃い灰色です。 update関数を用意します。 for touch in screen.touchesでタッチのループを作ります。触れている指すべてをとらえます。 3のループ内でfor _ in 0 ..< 16を作り、 加算合成のブラー円PGAddBlurryCiecle()を作ります。 初期設定のコードを書きます。 .color( LLColor( 0.16, 0.3, 0.5, 0.8 ) ) 色。重なると薄青になるような色を指定します。 .position( cx: touch.x + (-5.0...5.0).randomize, cy: touch.y + (-5.0...5.0).randomize ) 位置。タッチ位置から-5.0~5.0のブレがある範囲を設定します。 .deltaPosition( dx:(-1.0...1.0).randomize, dy:(1.0...3.0).randomize ) 毎フレームの移動量。dxは左右方向にわずかな移動,dyは上方向に向いた移動を行うよう設定します。 .scale( square: 24.0 ) 大きさ。24.0で固定です。 ...

前ページ で色々な図形を描きました。ここでは円を横に並べてみましょう。 繰り返し文(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)などに変えてみましょう。 終わったら次のページへ進みます。 ...

前のページ このページでは、タッチした軌跡がキラキラと光るエフェクトを表現してみます。 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" ) .color( LLColor( 1.0, 0.6, 0.4, 1.0 ) ) .position( cx: touch.x + Float( dx ), cy: touch.y + Float( dy ) ) .alpha( 0.0 ) .scale( square:24.0 ) .deltaScale( dw:0.5, dh:0.5 ) .deltaAngle( degrees:(0.5...1.0).randomize ) .deltaLife( -0.03 ) .iterate { $0.alpha = sin( $0.life * Float.pi ) } } } design関数に screen.clearColor = .darkGrey を書きます。背景は濃い灰色です。 update関数を用意します。 for touch in screen.touchesでタッチのループを作ります。触れている指すべてをとらえます。 初期化のための値を計算し、変数に代入します。 let max_dist = 80.0 タッチ位置からの最大距離。80.0を代入します。 let radians = (0.0...2.0).randomize * Double.pi 進行方向の角度。02πラジアン(=0360度)のランダムの値を代入します。 let d2 = max_dist * (0.0...1.0).randomize タッチ位置からの距離。最大値に0.0~1.0を掛けた値を代入します。 let dx = d2 * cos( radians ) x方向移動量。d2にradiansのコサイン値をかけて代入します。 let dy = d2 * sin( radians ) y方向移動量。d2にradiansのサイン値をかけて代入します。 ...

横に並べる繰り返し を行いました。さらにそれを縦に展開しましょう。 前ページのプログラムに続き、繰り返し文(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 ) .life( .random ) .deltaLife( -0.005 ) .completion { $0 .position( screen.randomPoint ) .deltaPosition( dx:(-1.0...1.0).randomize, dy:(-1.0...1.0).randomize ) .scale( square: 0.0 ) .color( .random ) .life( 1.0 ) } .iterate { $0.alpha( $0.life ) } } } 「コードを実行」を押します。 目標 ランダム表示の四角が薄く大きくなりながら、ランダムに移動する絵が表示されたら成功です。 終わったら次のページへ進みます。 ...

前ページで、四角の移動のアニメーションを加えました。 次に、回転を加えてみましょう。 前ページと同じコードを書きます。 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 ) .deltaScale( dw:1.0, dh:1.0 ) .angle( .random ) .deltaAngle( degrees:1.0 ) .color( .random ) .life( .random ) .deltaLife( -0.005 ) .completion { $0 .position( screen.randomPoint ) .deltaPosition( dx:(-1.0...1.0).randomize, dy:(-1.0...1.0).randomize ) .scale( square: 0.0 ) .angle( .random ) .color( .random ) .life( 1.0 ) } .iterate { $0.alpha( $0.life ) } } } 「コードを実行」を押します。 目標 ランダム表示の四角が薄く大きくなりながら回転と移動する絵が表示されたら成功です。 終わったら次のページへ進みます。 ...