トップページに、Processingについて書いた記事を、辞書のように見つけやすくしてみました

【Processing】strokeで輪郭線の色を変える方法【黒以外の色にしてみたら、新鮮な気持ちになれた】

【Processing】strokeで輪郭線の色を変える方法【黒以外にしてみたら、新鮮な気持ちになれた】
  • URLをコピーしました!
ワタタク

Processingで輪郭線の色を変えることができたら、図形を描くのがもっと面白くなりそう。どうやるんだろう?

勉強して、Processingではstrokeを使えば、輪郭線の色を変えることができると分かりました。

線や図形などのアウトラインに、黒以外の色をつけることができるようになり、Processingでの表現がまた1つ楽しくなります。

図形ごとに色を変えることもできるので、明るさや暗さを描くことも可能に。

ワタタク

世界は黒い輪郭線が基本。だからこそ、色を変えてみると新鮮な気持ちになります。

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

目次

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

strokeの英語について
英語の読み方ストローク
英語の意味一筆の動き

strokeの意味はたくさんありますが、Processingでは一筆の動きが当てはまると判断。

なぜなら「線や簡単な図形の輪郭は一筆で描けるなぁ。」と思ったからです。

なんのためにProcessingで、strokeを使うの?

Processingでstrokeを使う理由4つ
  • 線や図形の輪郭線の色を変えるため
  • 輪郭線で、線や図形の明るさや暗さを表現するため
  • 色の効果を活かして輪郭を描くため
  • アクセントカラーとして使いたいとき

赤で情熱、青で冷静さ、緑でリラックスなど、イラストの形の線に意味をつけることができるようになるので、表現力がかなり向上します。

ワタタク

色の効果を活かした方が、SNSなどで作品を共有したときに反応を得やすくなりそうです。

【Processing】strokeの書き方のルール4つ

strokeで輪郭線の色を変えるための書き方は、以下の4つです。

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

以下からお伝えしていく、輪郭線の色を変えている例のコードでは、色を分かりやすくするために、輪郭線を太くしています。

輪郭線を太くするやり方はこちらの記事で確認できます。

【ルール1】RGBカラーモードで書く方法

strokeをRGBモードで書く方法と説明
書き方stroke(Rの数値, G数値, B数値);
数値の範囲RGBそれぞれ0~255の範囲
数値を入力したらどうなるかRは赤色

Gは緑色

Bは青色

RGBのそれぞれの数値を組み合わせることで、様々な色を表現できる

RGBカラーモードで、明るめの輪郭線6種類の色を、実際に入力したコードと画像

size(1000, 1000);
background(255);//背景を白に
strokeWeight(20);//輪郭線の太さを20に

//赤色の円
stroke(255, 0, 0);
ellipse(200, 300, 250, 250);

//緑色の円
stroke(0, 255, 0);
ellipse(500, 300, 250, 250);

//青色の円
stroke(0, 0, 255);
ellipse(800, 300, 250, 250);

//水色の円
stroke(0, 255, 255);
ellipse(200, 700, 250, 250);

//黄色の円
stroke(255, 255, 0);
ellipse(500, 700, 250, 250);

//オレンジ色の円
stroke(255, 165, 0);
ellipse(800, 700, 250, 250);

上記コードの画像。

【Processingのstroke】RGBカラーモードで、明るめの輪郭線6種類の色の画像

【ルール2】HSBカラーモードで書く方法

strokeをHSBカラーモードで書く方法と説明
書き方colorMode(HSB, 360, 100, 100);と書いてHSBカラーモードを設定

stroke(Hの数値, Sの数値, Bの数値);を入力。
数値の範囲Hは0~360

Sは0~100

Bは0~100
数値を入力したらどうなるかHは色相が変わる

Sは彩度が変わる

Bは明度が変わる
ワタタク

HSBカラーモードの方は、様々な色の表現がしやすい。

HSBカラーモードで、暗めの輪郭線6種類の色を実際に入力したコードと画像

size(1000, 1000);
background(255);
colorMode(HSB, 360, 100, 100);//カラーモードをHSBに
strokeWeight(20);//輪郭線の太さを20に

//上段左の円
stroke(0, 50, 50);
ellipse(200, 300, 250, 250);

//上段真ん中の円
stroke(60, 50, 50);
ellipse(500, 300, 250, 250);

//上段右の円
stroke(120, 50, 50);
ellipse(800, 300, 250, 250);

//下段左の円
stroke(180, 50, 50);
ellipse(200, 700, 250, 250);

//下段真ん中の円
stroke(240, 50, 50);
ellipse(500, 700, 250, 250);

//下段右の円
stroke(300, 50, 50);
ellipse(800, 700, 250, 250);

上記コードの画像。

【Processingのstroke】HSBカラーモードで、暗めの輪郭線6種類の色の画像。

【ルール3】GRAYモードで書く方法

strokeをGRAYモードで書く方法と説明
書き方stroke(数値);
数値の範囲0~255
数値を入力したらどうなるか0が黒

255が白

1~254で黒の濃淡を表現できる

GRAYモードで、黒の濃淡6種類を表現した輪郭線を、実際に入力したコードと画像

size(1000, 1000);
background(255);//背景を白に
strokeWeight(20);//輪郭線の太さを20に

//上段左の円
stroke(0);
ellipse(200, 300, 250, 250);

//上段真ん中の円
stroke(60);
ellipse(500, 300, 250, 250);

//上段右の円
stroke(120);
ellipse(800, 300, 250, 250);

//下段左の円
stroke(180);
ellipse(200, 700, 250, 250);

//下段真ん中の円
stroke(240);
ellipse(500, 700, 250, 250);

//下段右の円
stroke(255);
ellipse(800, 700, 250, 250);

上記コードの画像。

【Processingのstroke】GRAYモードで、黒の濃淡6種類を表現した輪郭線の画像。

【ルール4】16進数カラーコードで書く方法

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

16進数カラーコードで、ポップな色の輪郭線6種類を実際に入力したコードと画像

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

//上段左の円
stroke(#00B5DE);
ellipse(200, 300, 250, 250);

//上段真ん中の円
stroke(#F8B516);
ellipse(500, 300, 250, 250);

//上段右の円
stroke(#D01026);
ellipse(800, 300, 250, 250);

//下段左の円
stroke(#EC6C1F);
ellipse(200, 700, 250, 250);

//下段真ん中の円
stroke(#E94C4D);
ellipse(500, 700, 250, 250);

//下段右の円
stroke(#EDDA15);
ellipse(800, 700, 250, 250);

上記画像のコード。

【Processingのstroke】16進数カラーコードで、ポップな色の輪郭線6種類の画像。

Processingのstrokeの透明度を変える

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

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

もうちょっと色を薄くしたり濃くしたいなってときに、透明度の変更はすごく便利。

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

strokeの透明度を変える方法と説明
RGBとGRAYカラーモード
書き方RGBカラーモード
stroke(Rの数値, Gの数値, Bの数値, 透明度の数値);

GRAYカラーモード
stroke(数値, 透明度の数値);
透明度の数値の範囲0~255
透明度の数値を入力するとどうなるか0が輪郭線が見えなくなるくらい透明

255が透明度なし

RGBとGRAYモードの透明度のコードと画像

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

//RGBの赤色の輪郭の透明度を変更
stroke(255, 0, 0, 50);
ellipse(300, 500, 500, 250);

//GRAYモードの輪郭の透明度を変更
stroke(50, 50);
ellipse(700, 500, 500, 250);

上記コードの画像

【Processingのstroke】RGBとGRAYモードで、透明度を調整した楕円2つの画像。

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

strokeのHSBカラーモードの透明度を変える方法と説明
書き方colorMode(HSB, 360, 100, 100);

stroke(Hの数値, Sの数値, Bの数値, 透明度の数値);
透明度の数値の範囲0~255
透明度の数値を入力するとどうなるか0が輪郭線が見えなくなるくらい透明

255が透明度なし

HSBカラーモードの透明度のコードと画像

size(1000, 1000);
background(255);
colorMode(HSB, 360, 100, 100);//HSBカラーモードにする
strokeWeight(20);

//HSBの水色の輪郭の透明度を変更
stroke(200, 70, 70, 50);
ellipse(500, 500, 500, 250);
【Processingのstroke】HSBカラーモードで、透明度を調整した楕円の画像。

16進数の透明度を変える

strokeのHSBカラーモードの透明度を変える方法と説明
書き方stroke(16進数, 透明度の数値);
透明度の数値の範囲0~255
透明度の数値を入力するとどうなるか0が輪郭線が見えなくなるくらい透明

255が透明度なし

16進数の透明度のコードと画像

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

//16進数の青色の輪郭の透明度を変更
stroke(#00459B, 100);
ellipse(500, 500, 500, 250);

上記コードの画像。

【Processingのstroke】16進数で透明度を調整した楕円の画像。

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

stroke();の構文に入力する数値は半角数字であること。16進数モードで入力するなら#は半角で入力すること。

ワタタク

全角数字、全角の#を入力するとエラーになります。

【Processing】strokeを学んでいた感じた疑問を解決

白い背景に、白い輪郭線だとどうなる?

輪郭線がなくなったように見えます。

【Processing】strokeを学ぶと、世界の見え方がこう変わる

Processingのstrokeを学んでからは、マンガのやイラストの黒い輪郭線を見ると「stroke(0);か。」と思い浮かび、これまでよりも輪郭線の黒を感じるようになりました。

テレビで人の写真や、イラストの縁取りが白のときは、「stroke(255);か。」と思えるようにもなりました。

ワタタク

世の中の輪郭線は黒がほとんどだという気づき。

黒の輪郭線以外を使って表現してみよう

stroke()で、黒以外の輪郭線を使うと今までとは違う表現ができるようになります。

黒以外をアウトラインに使うことがあまりないですから。

例えば、円の色を水色にして、その円の形の線を黄色にしてアクセントカラーにしてみるような表現です。

size(1000, 1000);
background(#f6bab2);
strokeWeight(30);

fill(#74b5e4);//円の中を塗りつぶす
stroke(#ffe56d);
ellipse(500, 500, 700, 700);

上記コードの画像

Processingのstrokeで、円の色を水色にして、その円の形の線を黄色にしてアクセントカラーにしてみるような表現。

線や図形の周囲の線の色を変更し、作品づくりを楽しんでいきましょう~。

ワタタク

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次