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