【Processing】変数で色を表現するための書き方【どんな色を使っているのか分かりやすくなる】

ワタタク

変数を使って色を表現するにはどうしたらいいんだろう？

調べたところ、変数を理解していれば、簡単にできることが分かりました。

今回の記事では、【Processing】変数について理解しやすかった学び方【12STEP】で変数を理解していること。

【Processing】fillの使い方を画像つきで解説【色がついた図形たちは、きっと喜んでくれている】で書いてある色の使い方を理解していると分かりやすいです。

ワタタク

先に上の記事を理解した上で読み進めてくださいね。

この記事を書いた人

プロフィール

• クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
• コンセプトは「クリエイティブコーディング1万時間の歩き方」
• 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）

 

※記事内のProcessingのバージョンは4.3です。

【Processing】変数で色を表現するための書き方

データの型 色の名前 = color(数値);

上記の書き方をfill(色の名前);、background(色の名前);、stroke(色の名前);という3つの関数で使用する。

例

color blue = color(0, 0, 255);
background(blue);

という風に書くと、背景が青になります。

color(数値);の数値の部分の書き方はこの先の項目で解説しています。

データの型や変数の書き方の基本が分からない場合は【Processing】変数について理解しやすかった学び方【12STEP】で詳しく説明しているので、確認してください。

【Processing】変数で色をつける書き方6つ

【1】グレー

color gray = color(100);//グレーの変数

size(1000, 1000);
background(gray);//グレーを表現

【2】グレーと透明度

backgroundでは透明度が機能しませんでした。

fillとstrokeで透明度のある色の変数を使用することができました。

color gray1 = color(100, 190);// グレーと透明度の表現 楕円の輪郭
color gray2 = color(100, 50);// グレーと透明度の表現　楕円の塗りつぶし

size(1000, 1000);
background(255);
strokeWeight(10);
stroke(gray1);
fill(gray2);

ellipse(500, 500, 500, 500);

【3】RGB

color green = color(0, 255, 0);

size(1000, 1000);
background(green);

【4】RGBと透明度

color green1 = color(0, 255, 0, 200);// 緑と透明度の表現 楕円の輪郭
color green2 = color(0, 255, 0, 50);// 緑と透明度の表現　楕円の塗りつぶし

size(1000, 1000);
background(255);
strokeWeight(10);
stroke(green1);
fill(green2);

ellipse(500, 500, 500, 500);

【5】16進数カラーコード

color blue = color(#00459B);

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

fill(blue);

ellipse(500, 500, 500, 500);

【6】16進数カラーコードと透明度

color blue1 = color(#00459B, 200);
color blue2 = color(#00459B, 150);


size(1000, 1000);
background(255);
strokeWeight(5);
stroke(blue1);
fill(blue2);

ellipse(500, 500, 500, 500);

【Processing】変数でHSBカラーモードを使って、色を表現することはできなかった

変数でHSBカラーモードを使って色を表現しようとしたのですが、できませんでした。

HSBの色に変わってくれなかったんですよ。

【Processing】宣言と代入を別に分けて変数で色をつける書き方

color red;
red = color(255, 0, 0);

この書き方は、redと2回書く必要があり、行も増えて読みにくくなります。

知っていれば、参考書などでこの書き方が出てきたときに読むのに困りません。

color red;
red = color(255, 0, 0);


size(1000, 1000);
background(255);
strokeWeight(5);
fill(red);

ellipse(500, 500, 500, 500);

【Processing】変数を使って、色を表現するときに感じた疑問と解決

変数を使って、色を表現するとき、どのカラーモードで書く？

僕は基本的には、color blue = color(#00459B);のような、16進数カラーコードで書くことにしました。

16進数の色は、インターネットで調べるとたくさん出てきますし、色の参考書などにもコードが書いてありますので。

鮮やかな色でRGBのみで作品をつくりたいときは、RGBモード。

白黒のみで作品を作りたいときは、グレーモードで作ろうと思っています。

コードを読むときに何の色か分かりやすくなった

ワタタク

この16進数カラーコードの色って何色だっけ？

って感じでコードを読み返したときに感じたいたのですが、変数を使ってコードを書くことで、何色か読み返したときにすぐに分かるようになりました。

color blue = color(#00459B);
fill(blue);

青色で塗りつぶしているんだなとすぐに分かるように。

今後は、色も変数を使って書いていきます。

ワタタク

それでは今日もレッツワクワクコーディング。