前のページ このページでは、次の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....
前回 まで学んできた図形に「重ねたときの効果」を加えて、さらに表現の幅を広げます。効果はわかりやすくシンプルです。メジャーなものが「加算合成」です。加算合成は重なった色が明るくなっていきます。 まずは上の図と同じ結果を得られるようコードを書いてみましょう。 通常の円を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で！
LilySwiftの活用方法について紹介します. LilySwiftの導入 1. Playgrounds(.swiftpm)の場合 1-1. iPadのPlaygroundsでLilySwiftをつかう 1-2. macOSのPlaygroundsでLilySwiftをつかう 1-3. XcodeでswiftpmをつくりLilySwiftをつかう 2. Xcodeプロジェクト(.xcodeproj)の場合 2-1. XcodeプロジェクトでLilySwiftをつかう 3. Lilyの機能を試す 3-1. 画像処理した画像をSwiftUIに表示する 4. 関連情報 4-1. LilySwiftとLilySwiftForPlaygroundの違い SwiftUIでLily Playgroundを使う 1. 導入 1-1. SwiftUI + Lily Playgroundをはじめる : PGScreenViewとPGSceneの使い方 2. SwiftUI + Playground2D 2-1. 2Dで使える画像を増やす 2-2. 2Dで使える最大パーティクル数を変える 2-3. ボタンを押してパーティクルの色を変える