Swift

前回 まで学んできた図形に「重ねたときの効果」を加えて、さらに表現の幅を広げます。効果はわかりやすくシンプルです。メジャーなものが「加算合成」です。加算合成は重なった色が明るくなっていきます。 まずは上の図と同じ結果を得られるようコードを書いてみましょう。 通常の円を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 ) .color( .blue ) .zIndex( 2 ) PGAddCircle() .scale( square:200 ) .position( cx: -50, cy: -150 ) .color( .red ) PGAddCircle() .scale( square:200 ) .position( cx: 50, cy: -150 ) .color( .blue ) } 「コードを実行」を押します。 目標 通常の重なる円と、加算合成で重なった円が表示されれば成功です。加算合成の色を観察してください。背景の色も含めて、重なると明るい色に向かっていくことがわかります。 終わったら次のページへ進みます。 ...

加算合成 をつかって、模様を描いてみましょう。 背景色を 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.0, 0.5, 0.0, 1.0 ) } else { c = LLColor( 0.2, 0.8, 0.2, 1.0 ) } PGAddCircle() .scale( square:100 ) .position( cx: -200 + x * 50, cy: -200 + y * 50 ) .color( c ) .alpha( 0.33 ) } } } 「コードを実行」を押します。 目標 重なった部分が明るくなっている円の模様が表示されたら成功です。 (+1) .color や .scale、.position の値を変更し、模様の雰囲気を変えてみましょう。 ...

加算合成は他の図形でも使えます。三角(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() .color( .random ) .scale( square:(20...100).randomize ) .position( screen.randomPoint ) .angle( .random ) .alpha( .random ) } else if a < 2.0 { PGAddTriangle() .color( .random ) .scale( square:(20...100).randomize ) .position( screen.randomPoint ) .angle( .random ) .alpha( .random ) } else { PGAddRectangle() .color( .random ) .scale( square:(20...100).randomize ) .position( screen.randomPoint ) .angle( .random ) .alpha( .random ) } } } 「コードを実行」を押します。 目標 重なった部分が明るくなる複数の図形が表現できたら成功です。 終わったら次のページへ進みます。 ...

加算合成のぼかし円( 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" ) .color( red:0.15, green: 0.2, blue:0.5 ) .scale( square:(100...200).randomize ) .position( cx:x, cy:y ) .angle( .random ) .alpha( .random ) } } 「コードを実行」を押します。 目標 青く光る熱源のようなモヤが表現できたら成功です。 (+1) .colorの値をredが強いもの、greenが強いものなどに変えてみましょう。 ...

これがこの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. マスク画像の紹介 3-4. マスクを重ねる表現 4章. 模様をつくる 4-1. 重ねて模様をつくる 4-2. 加算合成 4-3. 合成で模様を描く 4-4. ランダムで模様 4-5. ぼかし円と合成 4-6. マスク画像できらめき 4-7. 光る熱源表現 4-8. フリーコード LilyPG-2: 図形を動かす 1章. 図形のアニメート 1-1. 位置のアニメート 1-2. サイズのアニメート 1-3. 色のアニメート 1-4. 角度のアニメート 1-5. アルファのアニメート 1-6. 組み合わせる 1-7. 一定間隔で実行する 1-8. 図形のライフ 1-9. 終了処理とライフの復活 1-10. 図形の再利用 1-11. 毎フレームの処理 1-12. フリーコード 2章. 視覚表現ことはじめ 2-1. 視覚表現の導入コード 2-2. スケーリングの追加 2-3. 移動表現の追加 2-4. 回転表現の追加 2-5. 加速する 2-6. どんどん大きく 2-7. 複数図形で視覚表現 2-8. フリーコード 3章. 視覚表現のバライエティ 3-1. キラキラ輝く 3-2. 煙を焚く 3-3. 炎をあげる 3-4. うねる発光体 3-5. 噴水 3-6. ぼたん雪の降る夜 3-7. トゥインクルスター 3-8. 跳ねかえる円 3-9. 花火 3-10. フリーコード LilyPG-3: タッチとエフェクト 1章. タッチとエフェクト 1-1. タッチした位置に円を描く 1-2. タッチの軌跡に図形を描く 1-3. タッチと図形のアニメーション1 - 回転とズーム 1-4. タッチと図形のアニメーション2 - 移動と複数描画 1-5. マルチタッチ 1-6. 指が離れたときを捉える 1-7. フリーコード 2章. タッチ・インタラクション 2-1. 拡散光エフェクト 2-2. シャワー 2-3. キラキラ輝く軌跡 2-4. 燃える軌跡 2-5. 離した時に光線を描く 2-6. タッチに集まるパーティクル 2-7. 触れて弾ける 2-8. フリーコード