作品をもっとカラフルに！ 色の設定方法【 Processing 入門編 No.3 】
こんにちはみおはぴです！
今回は色の設定方法について紹介していきたいと思います。
一緒にカラフルな作品づくりを楽しんでみませんか？
まずProcessingって何？と思った方はこちらからご覧ください。
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
今日の作品
今日紹介するコードで出来る作品がこちら
昨日のモノクロの作品から一気にカラフルになりました。
それでは早速やっていきましょう。
こんなに簡単！店舗向けホームページがすぐ始められる「グーペ」 
動画で見たい方はこちらからご覧ください。
prologue サイズ設定と図を描いて準備しよう
まず色の設定をするためには、基本的な準備をしないと出来ませんよね。
まずは前回の復習がてら、このコードを入力してください。
詳しい説明が見たい方は、前回の入門編 No.2を見てみてください。
意外と簡単⁉︎ 基本図形の描画の描画方法 【 Processing 入門編 No.2 】 - Processingの基礎と応用
書けましたか？
ここまで書けたらいよいよ色の設定をやっていきましょう。
１.背景色を設定してみよう
背景色の設定とは、その名の通り背景に色をつける事です。
『 background(); 』というコードを使っていきます。
（）の中には0〜255までの数値が入り、
それぞれ０に近くほど黒色に、255に近くほど白色になります。
モノトーン（白、黒、灰）の背景にしたい場合
白色
background ( 255 ) ;
＊入力してプログラムを実行してみてください
黒色
background ( 0 ) ;
灰色
background ( 100 ) ;
灰色は数値を少し変えるだけでも濃度が変わるので色々試してみてください‼︎
カラー色の背景にしたい場合
background();で色の設定が出来るのは分かったものの、モノトーンだけでは寂しいですよね。
という事でカラー色を作る方法も紹介したいと思います。
コードは「 background ( 赤, 緑, 青 ) ; 」になります。
これは光の三原色と言われており、この色を混ぜていけば色々な種類の色を作る事も出来ます。
それぞれの項目に０から255まであり、0に近づくほど色が暗く、255に近づくほど色が明るくなります。
少し難しく感じるかもしれませんが、とりあえずやってみましょう。
赤色
background( 255, 0, 0 ) ;
緑色
background( 0, 255, 0 ) ;
青色
background( 0, 0, 255 ) ;
単色だとこのようになります。
では色を混ぜてみましょう。
赤 X 青
background( 255, 0, 255 ) ;
赤と青を混ぜるとピンクっぽい色になりました。
紫になると思いきや、意外ですよね笑
この調節で自分の好きな色にするのは、少し大変かもしれませんが、色々な組み合わせや濃度を試して研究していってみてください。
円の枠線の色の設定方法
背景の色の設定方法はなんとなく分かりましたか？
次は円の枠線の色を変えていきたいと思います。
基本的には背景の時と同じ0〜255で設定をします。
ですが1つだけ違うのは、背景の時には『 background(); 』というコードを使用しましたが、枠線の設定は『 stroke(); 』というコードを使用していきます。
（）の中の作りは先ほどと同じで、
モノトーンの時は0に近づくほど黒く、255に近づくほど白くなり、
カラーの時は、( 赤, 緑, 青 ) で255に近づくほど明るくなっていきます。
黒色
stroke ( 0 ) ;
赤色
stroke ( 255, 0, 0 ) ;
このような形になります。
背景の時とほぼ同じなので、幅かせて貰いましたが、今はまだ何となく分かってきたかなぐらいで大丈夫です。
円の中の色を設定する方法
ここまで背景、円の枠線の色をそれぞれ設定してきましたが、やはり肝心なのは円の中の色ですよね！
それでは、円の中の色を変えていきましょう。
円の中には『 fill(); 』というコードを使います。
（）の中は今までと同じです。
それでは早速やっていきましょう！
黒色
fill ( 0 ) ;
赤色
fill ( 255, 0, 0 ) ;
このような感じになります。
だいぶ感覚は掴めてきましたか？
基本的な色の設定はこれで以上です。
コードが少し変わるものの、基本的なつくりは変わらないので、意外と簡単に出来ると思います。
応用① 色に透明度を付ける方法
ここからは少しだけ応用です。
色々な作品を作っていると単色や、色を混ぜて作るのも良いけれど、もう少し透明度が欲しくなりませんか？
という事で少し応用して、色に透明度をつけていきましょう。
background(背景)や stroke(枠線)でも出来ますが、今回はより分かりやすいfill(円の色)で説明をしていきたいと思います。
まず普通に円を赤色にしたらこうなります。
fill ( 255, 0, 0 ) ;
ここまでは先程と同じです。
ではこれに透明度をつけたい場合はどうすれば良いのでしょうか。
透明度を付け足したい場合は、透明度の項目を付け足せば良いのです。
どういう事かというと、今までのコードは
fill ( 赤, 緑, 青 ) ;
でしたが、
fill (赤, 緑, 青, 透明度 ) ;
と4つ目の項目として透明度を付け足してあげます。
そうすると、透明度の設定が出来るようになります。
また、色と同じように透明度も0〜255で調節していきます。
実際にコードを描いて透明度を比べてみましょう。
fill ( 255, 0, 0, 90 ) ;
fill (255, 0, 0, 50 ) ;
fill ( 255, 0, 0, 10 ) ;
段々と透明になってきているのが分かりますか？
この透明度の設定を使うと、かなり色の種類が広がるのではないかなと思います。
応用② 枠線や円の塗りつぶしがいらない時の設定方法
作品を作ると枠線いらないなとか、塗りつぶして欲しくないなと思うことがよくあります。
こういった時に使えるコードを軽く紹介していきたいと思います。
どんなコードかというと
- 『 noStroke(); 』枠線なし
- 『 noFill(); 』 塗りつぶしなし
簡単ですよね！
『 stroke 』や『 fill 』の前に『 no 』を付けるだけです。
ただ注意点としては『 no 』の次の文字は大文字になるという事です。
そこだけ注意すればあとは簡単ですよね。
これを使って、自由自在に色を決めてみてください。
今日の作品のコード
最後に、冒頭にお見せした⇩の作品のコードを紹介していきます。
コードはこちらです。
コード自体もそんなに難しくなく、今日紹介したコードで出来るので、ぜひやってみてください！
今日のまとめ
今回は色の設定方法について紹介してみました。
色の設定が出来ると、一気に作品が華やかになりますよね。
色々な色を混ぜたり、濃度を調節したりして自分の好きな色を作ってみてください！
始めたばかりの時は、無理にコードを覚えようとしなくても、やっていくうちに自然とコードが体に染み付いて来ます。
なので、とりあえず色々な作品を模写したりアレンジしたりで作ってみてください。
また、Twitterでは日々のProcessing作品などを投稿していたり、DMなどで質問も募集しているので、ぜひ一度のぞいて見てください！
みおはぴ🐰 @大学生プログラマー (@mio_Processing) | Twitter
という事で今回はこのくらいで終わりにしたいと思います。
また次回も見てもらえたら嬉しいです。
合わせて読みたい
プログラミング言語の種類 自分に一番あった言語を見つけよう！ 【 プログラミング豆知識 】 - Processingの基礎と応用
初心者でも簡単!! オリジナル作品のコード３選【 Processing 番外編 】 - Processingの基礎と応用
オリジナル作品を作る前に！〜押さえておきたい5つのポイント〜【 Processing 応用編 No.1 】 - Processingの基礎と応用
