Lily Playground

前回 まで学んできた図形に「重ねたときの効果」を加えて、さらに表現の幅を広げます。効果はわかりやすくシンプルです。メジャーなものが「加算合成」です。加算合成は重なった色が明るくなっていきます。 まずは上の図と同じ結果を得られるようコードを書いてみましょう。 通常の円を2つ描きます。 次に加算合成の円を2つ描きます。加算合成円は PGAddCircle() を使います。 赤のPGCircle()に.zIndex( 1 ), 青のPGCircle()に.zIndex( 2 )を追加します。zIndexは重なり順をコントロールできます。数字が大きい方が上になります。 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 PGCircle() .scale( square:200 ) .position( cx: -50, cy: 150 ) .color( .red ) .zIndex( 1 ) PGCircle() .scale( square:200 ) .position( cx: 50, cy: 150 ) ....

加算合成 をつかって、模様を描いてみましょう。 背景色を screen.clearColor = .darkGrey にします。 4-1の模様のコードを参考に、PGCircle()の部分を、加算合成の円 PGAddCircle() に変えてみます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 func design( screen:PGScreen ) { // 背景の色 screen.clearColor = .darkGrey for y in 0 ..< 9 { for x in 0 ..< 9 { var c = LLColor.clear if (x + y) % 2 == 0 { c = LLColor( 1....

加算合成は他の図形でも使えます。三角(PGAddTriangle)、四角(PGAddRectangle) などがあります。ランダムを使いこなす を参考に加算合成でランダムな模様を表現してみましょう。 背景色を screen.clearColor = .darkGrey にします。 2-11 を参考に、加算合成の図形でランダム模様を描きましょう。 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 func design( screen:PGScreen ) { // 背景の色 screen.clearColor = .darkGrey for _ in 0 ..< 100 { let a = (0.0...3.0).randomize if a < 1.0 { PGAddCircle() ....

加算合成のぼかし円( PGAddBlurryCircle() ) を使うことで面白い絵が描けます。試してみましょう。 背景色を screen.clearColor = .darkGrey にします。 大きめのPGAddBlurryCircle()をランダムに描いてみます。 1 2 3 4 5 6 7 8 9 10 11 12 func design( screen:PGScreen ) { // 背景の色 screen.clearColor = .darkGrey for _ in 0 ..< 200 { PGAddBlurryCircle() .color( .random ) .scale( square:(80...200).randomize ) .position( screen.randomPoint ) .alpha( .random ) } } 「コードを実行」を押します。 目標 ぼやけた円が重なり、淡い光のような表現ができたら成功です。 終わったら次のページへ進みます。 実行例

加算合成はマスク画像 ( PGAddMask( "画像名" ) ) でも使えます。マスク画像を合成で重ね合わせると綺麗な模様が描けます。ここではmask-sparkleを使ってきらめきのある模様を描いてみましょう。 背景色を screen.clearColor = .darkGrey にします。 PGAddMask( "mask-sparkle" )をランダムに描画します。 .color と .alphaは値の範囲を0.5~1.0のランダムになるようにします。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 func design( screen:PGScreen ) { // 背景の色 screen.clearColor = .darkGrey for _ in 0 ..< 100 { PGAddMask( "mask-sparkle" ) .color( red:(0.5...1.0).randomize, green:(0.5...1.0).randomize, blue:(0.5...1.0).randomize ) .scale( square:(40...160).randomize ) .position( screen.randomPoint ) .alpha( (0.5...1.0).randomize ) } } 「コードを実行」を押します。 目標 きらめきの模様が描ければ成功です。 終わったら次のページへ進みます。...

さあこのBookの仕上げです。 前回 できらめき表現をしました。マスク画像を変えたり、値を変えることで色々な表現ができます。mask-smoke画像を使って、光る熱源を表現してみましょう。 背景色を screen.clearColor = .darkGrey にします。 PGAddMask( "mask-smoke" )をランダムに200個描画します。 発生位置を円形の中に収める、x, yを計算します。計算は下記のサンプルのlet dist、 let vector、 let x、 let y の内容を真似てください。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 func design( screen:PGScreen ) { // 背景の色 screen.clearColor = .darkGrey for _ in 0 ..< 200 { let dist = (0.0...200.0).randomize let vector = (-2.0...2.0).randomize * 3.14 let x = dist * cos( vector ) let y = dist * sin( vector ) PGAddMask( "mask-smoke" ) ....

これがこのBookの最後のページです。ここまで学んできたものを自由に使って、自分の美しいと感じる模様を自由に描いてみてください。 四角の加算合成: PGAddRectangle() 三角の加算合成: PGAddTriangle() 円の加算合成: PGAddCircle() ぼかし円の加算合成: PGAddBlurryCircle() マスク画像の加算合成: PGAddBlurryCircle() 目標 色々な模様を作って楽しみましょう。 これでこのBookは終わりとなります。おつかれさまでした。 次のBookでは、このBookで学んだ図形や模様の描きかたを活用し、アニメーションに取り組んでいきたいと思います。 それでは、また次のBookで！

Lily Playground Booksのテキストを紹介しています。 Swift Playgrounds App以外で内容をご覧になりたいとき、ご参考ください。 Lily Playground Limited Editor on Web Windowsでもお試しいただけるリミテッドエディタです. ブラウザ上でLily Playground Booksのコードが動作します。ぜひご活用ください。 Lily Playground on Webエディタをつかう LilyPG-1: 図形を描く 1章. LilyPGをはじめよう 1-1. 四角を描く 1-2. 色を変える 1-3. 大きさを変える 1-4. 位置を変える 1-5. 回転させる 1-6. 透かす 1-7. フリーコード 2章. 色々な図形を描く 2-1. 三角・丸・四角 2-2. 横に並べる 2-3. さらに縦に並べる 2-4. 図形を交互に並べる 2-5. 図形のチェッカー 2-6. カウンタで彩りを 2-7. フリーコード 2-8. ランダムな配置 2-9. ランダムな色・大きさ 2-10. 図形をランダムに 2-11. ランダムをつかいこなす 2-12. フリーコード 3章. 画像で描く 3-1. 画像を表示する 3-2. マスクとして用いる 3-3....