p5.jsはグラフィックに特化した開発環境です。図形を描いたり、画像を表示してアート作品を作成することができます。また、音楽データを解析してサウンドイコライザーを作ることも可能です。これらの特徴から、アート系のプログラマーに広く支持されています。さらに、作成した作品をWeb上で簡単に公開できるのも大きなメリットです。
色の指定方法
前回の項では座標系について学びましたが、ここでは色の指定方法について学びます。
通常、パソコンで色を指定する際は、光の三原色（赤・緑・青）の各成分の強さを0から255の範囲で設定します。
background(255, 0, 0); // キャンバスの色：赤
background(255, 255, 255); // キャンバスの色：白
💡
色は通常、RGBの3つの値で指定しますが、4つ目の値を加えることで透明度（アルファ値）を設定できます。
透明度は0（完全に透明）〜255（完全に不透明）の範囲で指定します。
background(255, 0, 0, 50) // 透明度50の赤
透明度の指定は、重ね合わせた図形の表現で意味を持ちます。上記のようにキャンバスの背景色に透明度を指定しても、透明に見えません🤷♂️
色は通常、RGBの3つの値で指定しますが、4つ目の値を加えることで透明度（アルファ値）を設定できます。
透明度は0（完全に透明）〜255（完全に不透明）の範囲で指定します。
background(255, 0, 0, 50) // 透明度50の赤
透明度の指定は、重ね合わせた図形の表現で意味を持ちます。上記のようにキャンバスの背景色に透明度を指定しても、透明に見えません🤷♂️
練習問題1-4-1
前回作成した練習問題 1-3-3 のキャンバス色を、初期値のグレーからパステルベージュ（243, 235, 216）に変更してみましょう。
📌
ひな形に記述されている色指定方法は少し特殊です。
background(220);
引数を1つだけ指定した場合、RGBの各成分が同じ値（220）であると解釈されます。つまり、次の指定と同じ意味になります。
background(220, 220, 220);
ひな形に記述されている色指定方法は少し特殊です。
background(220);
引数を1つだけ指定した場合、RGBの各成分が同じ値（220）であると解釈されます。つまり、次の指定と同じ意味になります。
background(220, 220, 220);
図形の色
前述の方法でキャンバスの色を指定しましたが、図形の色も指定してみましょう。
図形の色には「塗りつぶしの色」と「枠線の色」の2種類があります。
fill(255, 0, 0); // 塗りつぶしの色：赤
stroke(255, 255, 0); // 枠線の色：黄色指定の命令に続く図形描画の命令は、指定された色で描画されます。
枠線の太さ
図形の枠線の太さを変更したり、枠線をなくすこともできます。
noStroke(); // 枠線なし
strokeWeight(10); // 枠線の太さ：10px練習問題1-4-2
練習問題 1-4-1 のスクリプトで描いた図形を次の通りに変更しなさい。
- 塗りつぶしの色：(231, 215, 177)
- 枠線の色：キャンバスと同じ色
- 枠線の太さ：6px
色の調合
「光の三原色」は絵の具の「色の三原色」とは異なり、色の混ざり方（補色関係）が異なります。そのため、最初は色の調合に戸惑うかもしれません。色の組み合わせが難しい場合は、カラーピッカーサイトを活用するのもよいでしょう。
RGBカラーシミュレータII
COOLORS
練習問題1-4-3
先の練習問題の色を自分好みの色に変更しなさい。完成したら、キャンバスを右クリックして「画像を名前をつけて保存」し、PG部のSlackで先生に送信しなさい。
練習問題1-4-4
次のような図形は描けますか？
