前のページ 煙を表現するコードをつくりましょう。 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....
前のページ 前のページの雪を降らせるコードを参考に、流れ星の表現をつくってみましょう。 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....