動くスケッチ・ソースコード

p5.jsの形の色の2種類あります：線の色と中の色。デフォルトでは線画黒で仲が白ですが、好きの色を指定することができます。

中の色

fill 関数を使います。 fill に渡すのは色ですが、p5.jsでは色の指定の仕方が様々です。

fill(0); // 黒
rect(150, 250, 100, 150);

色の指定の仕方

数値1つ：モノクロ

0〜255の数値を色として扱うと、黒〜白という色になります。

• 0: 黒
• 64: 25% 明るい灰色（濃い）
• 128: 50% 明るい灰色（中ぐらい）
• 192: 75% 明るい灰色（薄い）
• 255: 白

数値が大きくなると色が明るく（薄く）なるので、この数値を明るさと読んでもいいでしょう。

数値3つ：RGB

光の三原色（赤緑青ことRGB）のそれぞれの明るさを3つの数値として色を表します。

• 0, 0, 0: 黒
• 255, 0, 0: 真っ赤（赤だけが最大値）
• 0, 255, 0: 100%緑
• 0, 0, 255: 100%青
• 128, 128, 255: 薄い青（水色？）
• 255, 255, 255: 白

16進

ウェブデザインなどでお馴染みの方に便利な使い方です。上記の数値3つを16進として表したものを文字列にして、頭に # を付けます。

慣れている方、使えます。どこかで見てわからなかった方、こういうことです。無理に使う必要ありません。

• "#000000": 黒
• "#ff0000": 真っ赤（赤だけが最大値）
• "#00ff00": 100%緑
• "#0000ff": 100%青
• "#8080ff": 薄い青（水色？）
• "#ffffff": 白

線の色

stroke 関数を使います。 stroke に渡すのは色ですが、線の色です。

stroke(255, 0, 0); // 赤線
fill(0); // 黒
rect(150, 250, 100, 150);

線の太さ

色関係ではなくなりますが、線の太さも選べます。

stroke(255, 0, 0); // 赤線
strokeWeight(5); // 線が5ドット太くなる
fill(0); // 黒
rect(150, 250, 100, 150);