この章では画像を使ってみます。このブックには「lily」という画像があります。Lilyのアイコンです。PGPictureでこの画像を表示してみましょう。 図形と同様に、PGPicture( "lily" )と書きます。ファイル名は "(ダブルクォート) で包みます。これは 文字列 を表します。 大きさとして.scale( square:256 )を追加します。 1 2 3 4 func design( screen:PGScreen ) { PGPicture( "lily" ) .scale( square:256 ) } 「コードを実行」を押します。 目標 Lilyのアイコンが表示されれば成功です。 終わったら次のページへ進みます。 実行例
前のページ このBookの最後のページです。ここまで学んできたものを自由に使って、自分の美しいと感じるエフェクトを自由に表現してみてください。このページではupdate関数も使えます。 目標 色々なエフェクトを作って楽しみましょう。 これでこのBookは終わりとなります。おつかれさまでした。 次のBookでは、タッチに反応したエフェクトの表現を試していきたいと思います。 それでは、また次のBookで！
さて、画像をそのまま表示しましたが、Lily Playgroundでは、画像をマスクに使うことが増えてきます。ここではマスク画像を使う方法を試してみましょう。画像をマスクにするときはPGMaskをつかいます。また、もとの画像がどんなものであるかを見るためにPGPictureでも表示してみましょう。 PGPicture( "mask-star" )を書きます。.cx( -128 )で左に移動させます。 次にPGMask( "mask-star" )を書きます。.cx( 128 )で右に移動させます。 PGMask( "mask-star" )に.color( .blue )を追加します。 1 2 3 4 5 6 7 8 9 10 func design( screen:PGScreen ) { PGPicture( "mask-star" ) .scale( square:128 ) .cx( -128 ) PGMask( "mask-star" ) .scale( square:128 ) .cx( 128 ) .color( .blue ) } 「コードを実行」を押します。 目標 左に白黒の星マーク、右に星マークの白い部分に青になった透けた星が描けたら成功です。 終わったら次のページへ進みます。 Note: PGMaskは画像の黒部分を透かして、白部分の形を描きます。色は.colorで指定できます。画像の灰色部分は灰色の濃さに合わせて半透明になります。 実行例
前のページ 煙を表現するコードをつくりましょう。 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 func design( screen:PGScreen ) { screen.clearColor = .darkGrey for _ in 0 ..< 60 { PGMask( "mask-smoke" ) .color( .white ) .position( cx:(-150...150).randomize, cy:(-150...150).randomize ) .scale( square:(80...160).randomize ) .deltaScale( dw:1, dh:1 ) .angle( ....
前回マスク画像を試しました。この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....