fillはどのカラーモードでコーディングすればいいの？

クリエイティブコーダーとして活躍されている方は、HSBカラーモードをおすすめされています。様々な色を表現しやすいからです。

初心者はfillをどのカラーモードを使う？

この記事を書いている2024年5月2日の時点で、Processing初心者の僕は、ブログの記事では16進数カラーコードを中心に使用。作品づくりでは、自分の色を見つけるために、HSBカラーモードで様々な色を試しています。

【Processing】fillの使い方を画像つきで解説【色がついた図形たちは、きっと喜んでくれている】

2024年5月2日2024年6月18日

当ブログ記事には広告が含まれている場合があります

【Processing】fillの使い方を画像つきで解説【色がついた図形たちはきっと喜んでいる】

URLをコピーしました！

ワタタク

図形の色を変えたいなぁ、どうやってやればいいんだろう？

勉強した結果、Processingの図形の色は「fill」を使えば変えることができると分かりました。

実際に使って図形の色を変えてみた感想は「かなり作品づくりが楽しくなる」の一言。

fillで自分の色を見つけることも意識して、作品づくりすることができるようになりました。

今回の記事では、以下について書いています。

最初はfillの英語の意味と書き方のルール
次にコードと画像、図形ごとに色を変える方法
後半は感じた疑問の解決と世界の見え方が変わったこと

ワタタク

fillを使って色をコントロールすれば、めっちゃ表現が変わります。簡単ですので、内容を参考にして作品づくりに活かしてくださいね。

この記事を書いた人

ワタタク

当ブログがはじめての方へ

クリエイティブコーディング初心者が、アーティストとして活躍するまでの上達の過程を発信
コンセプトは「クリエイティブコーディング上達のための参考書」
参考にしてもらえるブログにするため、Processingを独学で勉強して共有中

【Processing】fillの英語の読み方と意味

英語のfillについて
英語の読み方	フィル
英語の意味	塗りつぶす

ワタタク

英語のfillにはいろんな意味がありますが、Processingでは「塗りつぶす」という意味が適しています。

なんのためにProcessingで、fillを使うの？

Processingでfillを使う理由2つ

図形を色で塗りつぶすため
色彩感覚をつける

ワタタク

様々な色を使うことで表現の幅がかなり広がります。

【Processing】fillの4種類の使い方を解説【コードと画像つき】

Processingでfillを使えば、使った後に書いた図形がすべて塗りつぶされます。

色は自由に設定可能。

これから紹介していくfillの4種類の使い方。

RGBカラーモード
HSBカラーモード
GRAYモード
16進数カラーコード

ワタタク

どの使い方も簡単なので心配しないでくださいね。

【1つ目の使い方】RGBカラーモードで使う方法

fillをRGBカラーモードで書く方法と説明
書き方	fill(Rの数値, G数値, B数値);
RGBの数値の範囲	0～255 1.3や2.7のような入力も可能
数値を入力したらどうなるか	Rは赤色 Gは緑色 Bは青色 RGBのそれぞれの数値を組み合わせることで、様々な色で図形を塗りつぶすことができる

fillをRGBカラーモードで実際に入力したコードと画像

//fillをRGBカラーモードで使う

size(1000, 1000);
background(255);

//塗りつぶす
//すべての図形がこの色で塗りつぶされる
fill(243, 167, 172);

//大きな楕円
ellipse(500, 500, 950, 950);

//右下の小さな楕円
ellipse(900, 900, 300, 300);

上記コードの画像

【2つ目の使い方】HSBカラーモードで使う方法

fillをHSBカラーモードで書く方法と説明
書き方	colorMode(HSB, 360, 100, 100);と書いてHSBカラーモードを設定 fill(Hの数値, Sの数値, Bの数値);を入力。
数値の範囲	Hは0～360 Sは0～100 Bは0～100 数値は、5.5とか55.4のような書き方でもOK
数値を入力したらどうなるか	Hは色相が変わる Sは彩度が変わる Bは明度が変わる RGBよりも様々な色を表現しやすい

fillをHSBカラーモードで実際に入力したコードと画像

//fillをHSBカラーモードで使う

size(1000, 1000);
background(255);

//カラーモードをHSBに設定
colorMode(HSB, 360, 100, 100);

//塗りつぶす
//すべての図形がこの色で塗りつぶされる
fill(60, 45.9, 100);

//大きな四角形
rect(100, 100, 800, 800);

//下の小さな四角形
rect(100, 900, 100, 50);

上記コードの画像

【3つ目の使い方】GRAYモードで使う方法

fillをGRAYモードで書く方法と説明
書き方	fill(数値);
数値の範囲	0~255 10.3のような書き方でもOK。
数値を入力したらどうなるか	0が黒 255が白 1～254で黒の濃淡を表現でき

fillをGRAYモードを実際に入力したコードと画像

//fillをGRAYモードで使う

size(1000, 1000);
background(255);

//塗りつぶす
//すべての図形がこの色で塗りつぶされる
fill(148.7);

//大きな三角形
triangle(300, 100, 20, 800, 900, 670);

//下の三角形
triangle(100, 800, 20, 900, 400, 900);

上記コードの画像

【4つ目の使い方】16進数カラーコードで使う方法

fillを16進数カラーコードで書く方法と説明
書き方	fill(16進数カラーコード);
16進数カラーコードの部分	#FFFFFF #00459B のようなものをネットなどで調べる
16進数カラーコードを入力したらどうなるか	16進数カラーコードに対応した色を表現できる

fillで16進数カラーコードを実際に入力したコードと画像

//fillを16進数カラーコードで使う

size(1000, 1000);
background(255);

//塗りつぶす
//すべての図形がこの色で塗りつぶされる
fill(#f7b977);

ellipse(500, 500, 860, 860);

上記コードの画像

Processingのfillで、図形ごとに色を変えて塗りつぶす方法

fillで図形ごとに色を変えて塗りつぶすには、図形ごとに何度もfillを書くことです。

16進数カラーコードで描いています。

RGBやHSB、GRAYモードでも同じです。

図形ごとにfillを書けば、色が変わります。

//fillで図形ごとに色を変えて塗りつぶす

size(1000, 1000);
background(255);
noStroke();//輪郭線をなしにするコード

//上段左の楕円
fill(#f7b977);
ellipse(200, 300, 250, 250);

//上段真ん中の楕円
fill(#b5f777);
ellipse(500, 300, 250, 250);

//上段右の楕円
fill(#77f7b9);
ellipse(800, 300, 250, 250);

//下段左の楕円
fill(#77b5f7);
ellipse(200, 700, 250, 250);

//下段真ん中の楕円
fill(#b977f7);
ellipse(500, 700, 250, 250);

//下段右の楕円
fill(#f777b5);
ellipse(800, 700, 250, 250);

上記コードの画像

Processingのfillで塗りつぶした色の、透明度を変える方法【4種類】

以下のfillのカラーモードの透明度を変えます。

RGBとGRAYカラーモードの透明度
HSBカラーモードの透明度
16進数の透明度

fillのRGBとGRAYモードの透明度を変える

fillの透明度を変える方法と説明 RGBとGRAYカラーモード
書き方	RGBカラーモード fill(Rの数値, Gの数値, Bの数値, 透明度の数値); GRAYカラーモード fill(数値, 透明度の数値);
透明度の数値の範囲	0～255
透明度の数値を入力するとどうなるか	0が輪郭線が見えなくなるくらい透明 255が透明度なし

fillでRGBモードの透明度を調整したコードと画像

//fillのRGBカラーモードで透明度を使う

size(1000, 1000);
background(255);

//透明度を調整しながら塗りつぶす
//すべての図形がこの色で塗りつぶされる
fill(243, 167, 172, 50);

//大きな楕円
ellipse(500, 500, 950, 950);

//右下の小さな楕円
ellipse(900, 900, 300, 300);

上記コードの画像

fillでGRAYモードの透明度を調整したコードと画像

//fillのGRAYモードで透明度を使う

size(1000, 1000);
background(255);

//透明度を調整しながら塗りつぶす
//すべての図形がこの色で塗りつぶされる
fill(148.7, 50);

//大きな三角形
triangle(300, 100, 20, 800, 900, 670);

//下の三角形
triangle(100, 800, 20, 900, 400, 900);

上記コードの画像

fillでHSBカラーモードの透明度を変える

fillのHSBカラーモードの透明度を変える方法と説明
書き方	colorMode(HSB, 360, 100, 100); fill(Hの数値, Sの数値, Bの数値, 透明度の数値);
透明度の数値の範囲	0～255
透明度の数値を入力するとどうなるか	0が輪郭線が見えなくなるくらい透明 255が透明度なし

fillでHSBカラーモードの透明度を調整したコードと画像

//fillをHSBカラーモードで透明度を調整する

size(1000, 1000);
background(255);

//カラーモードをHSBに設定
colorMode(HSB, 360, 100, 100);

//透明度を調整しながら塗りつぶす
//すべての図形がこの色で塗りつぶされる
fill(60, 45.9, 100, 50);

//大きな四角形
rect(100, 100, 800, 800);

//下の小さな四角形
rect(100, 900, 100, 50);

上記コードの画像

fillで16進数の透明度を変える

fillの16進数の透明度を変える方法と説明
書き方	fill(16進数, 透明度の数値);
透明度の数値の範囲	0～255
透明度の数値を入力するとどうなるか	0が輪郭線が見えなくなるくらい透明 255が透明度なし

fillで16進数の透明度を調整したコードと画像

//fillを16進数カラーコードで透明度を調整する

size(1000, 1000);
background(255);

//塗りつぶす
//すべての図形がこの色で塗りつぶされる
fill(#f7b977, 50);

ellipse(500, 500, 860, 860);

上記コードの画像

Processingのfillで、気をつけたいエラー

「,」や「#」を半角で入力することに気をつけておくことです。

ワタタク

HSBで色を設定したいときは、HSBカラーモードにするcolorMode(HSB);を入力するのを忘れずに。

【Processing】fillについての疑問2つを解決

fillはどのカラーモードでコーディングすればいいの？: クリエイティブコーダーとして活躍されている方は、HSBカラーモードをおすすめされています。

様々な色を表現しやすいからです。
初心者はfillをどのカラーモードを使う？: この記事を書いている2024年5月2日の時点で、Processing初心者の僕は、ブログの記事では16進数カラーコードを中心に使用。

作品づくりでは、自分の色を見つけるために、HSBカラーモードで様々な色を試しています。