Lily

前回マスク画像を試しました。このBooks内に用意している他のマスク画像を紹介します。これらの画像はBooks内で自由に使えます。以下のコードで練習してみましょう。 以下の例のようにPGMask()を複数作ります。読み込む画像名は"mask-star", “mask-snow”, “mask-sparkle”, “mask-smoke"です。色は.color( .white )を指定します。 背景色は screen.clearColor =.darkGrey にします。 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 ) { screen.clearColor = .darkGrey PGMask( "mask-star" ) .scale( square:128 ) .position( cx:-128, cy:128 ) .color( .white ) PGMask( "mask-snow" ) .scale( square:128 ) .position( cx:128, cy:128 ) .color( .white ) PGMask( "mask-sparkle" ) ....

前のページ 前のページの煙のコードを応用して、炎を表現してみましょう。 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 func design( screen:PGScreen ) { screen.clearColor = .darkGrey for _ in 0 ..< 160 { PGAddMask( "mask-smoke" ) .color( LLColor( 0.9, 0.34, 0.22, 1.0 ) ) .position( cx:(-50 ... 50)....

前のページ ここでは、ぼやけた円と加算合成をつかって、発光体を表現してみます。 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 func design( screen:PGScreen ) { screen.clearColor = .darkGrey for _ in 0 ..< 80 { PGAddBlurryCircle() .color( .random ) .position( screen.randomPoint ) .scale( square: 100.0 ) .deltaScale( dw: 0.5, dh: 0.5 ) .alpha( 0 ) .life( .random ) .deltaLife( -0.003 ) .iterate { $0....

マスク用画像の紹介を試しました。マスクを使った図形を重ねるていくと豊かで複雑な表現が可能になります。 ここではスモーク画像を重ねて絵を作ってみます。 背景色はscreen.clearColor = .darkGreyを指定します。 PGMask( "mask-smoke" ) をforループで50個重ねてみましょう。 .position、.scale、.alpha、.angle をつかって以下のようにランダムな値を指定します。 1 2 3 4 5 6 7 8 9 10 11 12 13 func design( screen:PGScreen ) { screen.clearColor = .darkGrey for _ in 0 ..< 50 { PGMask( "mask-smoke" ) .scale( square:(16...192).randomize ) .position( cx:(-128...128).randomize, cy:(-128...128).randomize ) .alpha( .random ) .angle( .random ) .color( .white ) } } 「コードを実行」を押します。 目標 煙が重なっているような表現ができたら成功です。 (+1) 何回かコード実行をしてみてください。色々な形の煙ができます。 3章はこれでおわりです。おつかれさまでした。次の章へ進みましょう。 実行例

前のページ 前のページと同様、ぼやけた円と加算合成を用いて、噴水のような表現を考えてみます。 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 func design( screen:PGScreen ) { screen.clearColor = .darkGrey for _ in 0 ..< 1000 { PGAddBlurryCircle() .color( LLColor( 0.16, 0.3, 0.5, 0.8 ) ) .position( cx:(-10...10).randomize, cy:screen.minY - (0.0...48.0).randomize ) .deltaPosition( dx:(-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 29 30 func design( screen:PGScreen ) { screen.clearColor = LLColor( 0.0, 0.05, 0.2, 1.0 ) for _ in 0 ..< 80 { let size = (10.0 ... 50.0).randomize let speed = size / 50.0 let c = LLColor( 0.9, 0.95, 1....

前のページ 前のページの雪を降らせるコードを参考に、流れ星の表現をつくってみましょう。 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 46 47 48 49 50 func design( screen:PGScreen ) { screen.clearColor = LLColor( 0.0, 0.05, 0.2, 1.0 ) for _ in 0 ..< 10 { let size = (40....

前のページ 壁に跳ね返るボールを表現してみましょう。 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 func design( screen:PGScreen ) { screen.clearColor = .black for _ in 0 ..< 20 { let speed = (4.0...8.0).randomize let radians = (0.0...2.0).randomize * Double.pi let dx = speed * cos( radians ) let dy = speed * sin( radians ) PGAddCircle() ....

前のページ このページでは、次のBooksで紹介する新しい仕組みを先取りし、花火を表現します。 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 func design( screen:PGScreen ) { screen.clearColor = LLColor( 0.0, 0.05, 0.2, 1.0 ) } func update( screen:PGScreen ) { if (0.0...1.0).randomize < 0.97 { return } let size = (10.0...20.0).randomize let speed = size / 4....

前章 まで、Lily Playgroundでの図形や画像の描き方を紹介しました。この章は、ここまで学んだ図形を並べて、模様を作っていきたいと思います。きれいな模様を描いていきましょう。 x,yの2重のfor文をつくり、その中で円が規則的に並ぶようにコードを書きます。 円の色を交互に変えるように、条件分岐で色を変化させましょう。変数var cをつくります。cには色(LLColor.clear)を入れます。 チェッカーの条件にならって、cの値を変えてみましょう。条件ごとにオレンジ色( 1.0, 0.5, 0.0, 1.0 )と、明るい緑色( 0.2, 0.8, 0.2, 1.0 ) をcに入れます。 c を円の .color に使います。すると 「c の色が変わる = 円の色が変わる」ことになります。手順3の条件で cの色は互い違いになったので、円の色も互い違いにできます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 func design( screen:PGScreen ) { for y in 0 ..< 9 { for x in 0 ..< 9 { var c = LLColor....