レッスン 4
色について学ぼう
色の指定方法について理解しよう
チャプター1このレッスンのゴール
このレッスンで完成させるものを確認しよう
チャプター2色を英単語で書いてみよう
このチャプターでは、色を英単語の文字列で描画するよ。
2. 1 写してみよう
//最初に一回だけ呼び出される初期設定
function setup() {
//キャンバスの大きさ
createCanvas(400, 400);
}
//繰り返し呼び出される処理
function draw() {
//背景の描画
background(220);
//線を無効にする
noStroke();
//円形1
fill("black");
ellipse(width / 4 * 1, height / 2, 150, 150);
//円形2
fill("gray");
ellipse(width / 4 * 2, height / 2, 150, 150);
//円形
fill("white");
ellipse(width / 4 * 3, height / 2, 150, 150);
}
コードが書けたら、実行してみよう
黒(black)・灰色(gray)・白(white)の円形3つが表示されたらOKだよ
2. 2 コードの説明
widthとheightはキャンバスの大きさに合わせて変化します。
例えば、width / 4 * 2は、「横幅を4で割って2倍する」という意味で、キャンバスの大きさに関係なく、真ん中に円の中心がくることになります。便利な書き方なので慣れておくと良いでしょう。
復習
以下の内容は、レッスンですでに出てきた内容だね。もう一度確認しておくよ。
キャンバス要素を作成し、その寸法をピクセル単位で設定します。
値1： キャンバスの幅
値2： キャンバスの高さ
背景に使用する色を設定します。デフォルトの背景は透明
値1: 色
線の描画を無効にします
図形を塗りつぶすのに使う色を設定します。
値1: 色
スクリーンに円（楕円）を描きます。幅と高さが等しい楕円形は円です。最初の2つのパラメーターで位置を設定し、3番目と4番目のパラメーターで図形の幅と高さを設定します。
値1： 楕円のx座標
値2： 楕円のy座標
値3： 楕円の幅
値4： 楕円の高さ
チャプター3数値に変更してみよう
このチャプターでは、英単語の色をグレースケールの数値に置き換えてみるよ
3. 1 変更しよう
"black" を 0 に、 "gray" を 125 に、 "white" を 255 に変更してみよう。
noStroke();
//円形1
- fill("black");
ellipse(width / 4 * 1, height / 2, 150, 150);
//円形2
- fill("gray");
ellipse(width / 4 * 2, height / 2, 150, 150);
//円形
- fill("white");
ellipse(width / 4 * 3, height / 2, 150, 150);
}
noStroke();
//円形1
+ fill(0);
ellipse(width / 4 * 1, height / 2, 150, 150);
//円形2
+ fill(125);
ellipse(width / 4 * 2, height / 2, 150, 150);
//円形
+ fill(255);
ellipse(width / 4 * 3, height / 2, 150, 150);
}
全く同じ状態が確認できれば、OKだよ。色には数字が割り当てられているんだね！ 0が黒で数値が大きくなるほど明るくなり、２５５が白色になるよ
チャプター4RGBモードの数値に変更してみよう
このチャプターでは、英単語の色をRGBモードの数値に置き換えてみるよ
4. 1 変更しよう
0 を 255, 0, 0 に、 125 を 0, 255, 0 に、 255 を 0, 0, 255 に変更してみよう。
noStroke();
//円形1
- fill(0);
ellipse(width / 4 * 1, height / 2, 150, 150);
//円形2
- fill(125);
ellipse(width / 4 * 2, height / 2, 150, 150);
//円形
- fill(255);
ellipse(width / 4 * 3, height / 2, 150, 150);
}
noStroke();
//円形1
+ fill(255, 0, 0);
ellipse(width / 4 * 1, height / 2, 150, 150);
//円形2
+ fill(0, 255, 0);
ellipse(width / 4 * 2, height / 2, 150, 150);
//円形
+ fill(0, 0, 255);
ellipse(width / 4 * 3, height / 2, 150, 150);
}
赤色・緑色・青色の円形が表示が確認できたね。
4. 2 コードの説明
色を３つ入れるとRGBモードといって、1つめの値が赤の量、2つめの値が緑の量、3つ目の値が青の量を示すよ。
図形を塗りつぶすのに使う色を設定します。
値1: 赤色(0〜255)
値2: 緑色(0〜255)
値3: 青色(0〜255)
チャプター5HEXモードの値に変更してみよう
このチャプターでは、英単語の色をHEXモードの値に置き換えてみるよ。
5. 1 変更しよう
255, 0, 0 を "#FF0000" に、 0, 255, 0 を "#00FF00" に、 0, 0, 255 を "#0000FF" に変更してみよう。
noStroke();
//円形1
- fill(255, 0, 0);
ellipse(width / 4 * 1, height / 2, 150, 150);
//円形2
- fill(0, 255, 0);
ellipse(width / 4 * 2, height / 2, 150, 150);
//円形
- fill(0, 0, 255);
ellipse(width / 4 * 3, height / 2, 150, 150);
}
noStroke();
//円形1
+ fill("#FF0000");
ellipse(width / 4 * 1, height / 2, 150, 150);
//円形2
+ fill("#00FF00");
ellipse(width / 4 * 2, height / 2, 150, 150);
//円形
+ fill("#0000FF");
ellipse(width / 4 * 3, height / 2, 150, 150);
}
全く同じ状態の赤色・緑色・青色の円形が確認できれば、OKだよ。色には色コードも割り当てられているんだね！
5. 2 コードの説明
この色コードはHEXモードといって、#シャープの記号と 赤の量、緑の量、青の量を文字列としてくっつけて、16進数という記号で示すよ。
16進数について
16進数について
図形を塗りつぶすのに使う色を設定します。
値1: 色コード(#000000〜#FFFFFF)
普段見慣れている計算しやすい数値が、10進数といって、数値が10個足されると、桁上がりして10になるね。比較の表で見てみてね。
| 10進数 | 16進数 |
|---|---|
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| 10 | A |
| 11 | B |
| 12 | C |
| 13 | D |
| 14 | E |
| 15 | F |
16進数では、10から15までをAからFで表現します。では、16進数で16はどうなるかというと、10になります。これは10進数と同じように、16進数は桁が16であがるためです。続けていくと、17は16進数で11、18は16進数で 12、32になるとまた桁が上がって20、…、となっていきます。160は16進数で A0です。
| 10進数 | 16進数 |
|---|---|
| 16 | 10 |
| 17 | 11 |
| 18 | 12 |
| ~ | ~ |
| 31 | 1F |
| 32 | 20 |
| 33 | 21 |
| ~ | ~ |
| 159 | 9F |
| 160 | A0 |
| 161 | A1 |
| ~ | ~ |
| 254 | FE |
| 255 | FF |
16進数は2桁になると、16の2乗（16 x 16 = 256）で256通り（0~255）の数を表現できます。
16進数？？？少し難しくなってきたね。HEXモードとRBGのコードの違いを簡単に相互変換できるツールもあるので見てみよう！ツールで色コードを見つけることができたら、大丈夫だよ！
https://www.colordic.org/picker/
チャプター6RGBモードで透明度を確認してみよう
このチャプターでは、RGBモードの値で透明度を確認してみよう
6. 1 変更しよう
"#FF0000" を 255, 0, 0, 126 に、 "#00FF00" を 0, 255, 0, 126 に、
"#0000FF" を 0, 0, 255, 126 に変更してみよう。
noStroke();
//円形1
- fill("#FF0000");
ellipse(width / 4 * 1, height / 2, 150, 150);
//円形2
- fill("#00FF00");
ellipse(width / 4 * 2, height / 2, 150, 150);
//円形
- fill("#0000FF");
ellipse(width / 4 * 3, height / 2, 150, 150);
}
noStroke();
//円形1
+ fill(255, 0, 0, 126);
ellipse(width / 4 * 1, height / 2, 150, 150);
//円形2
+ fill(0, 255, 0, 126);
ellipse(width / 4 * 2, height / 2, 150, 150);
//円形
+ fill(0, 0, 255, 126);
ellipse(width / 4 * 3, height / 2, 150, 150);
}
赤色・緑・青がそれぞれ、薄く透明に表示されたらOKだよ。
チャプター7RGBモードで最大値を100に設定を変えてみよう
このチャプターでは、RGBモードでの最大値の設定を変更してみよう
7. 1 変更しよう
colorMode(RGB, 100); を追加しよう
function setup() {
//キャンバスの大きさ
createCanvas(400, 400);
+
+ //カラーモード・最大値の変更
+ colorMode(RGB, 100);
}
数値の部分の最大値(255→100)へ変更されるので、基準に合わせて次の値もしよう
//繰り返し呼び出される処理
function draw() {
//背景の描画
- background(220);
//線を無効にする
noStroke();
//円形1
- fill(255, 0, 0, 126);
ellipse(width / 4 * 1, height / 2, 150, 150);
//円形2
- fill(0, 255, 0, 126);
ellipse(width / 4 * 2, height / 2, 150, 150);
//円形
- fill(0, 0, 255, 126);
ellipse(width / 4 * 3, height / 2, 150, 150);
}
//繰り返し呼び出される処理
function draw() {
//背景の描画
+ background(86);
//線を無効にする
noStroke();
//円形1
+ fill(100, 0, 0, 50);
ellipse(width / 4 * 1, height / 2, 150, 150);
//円形2
+ fill(0, 100, 0, 50);
ellipse(width / 4 * 2, height / 2, 150, 150);
//円形
+ fill(0, 0, 100, 50);
ellipse(width / 4 * 3, height / 2, 150, 150);
}
255が最大値だと数値の強弱がわかりにくかったけど、100だと最大値がわかりやすくなったね。
でも、通常のRGBモードやグレースケールの数値の方が一般的なので、255が最大値の方で慣れておこう。
チャプター8HSBモードを試してみよう
このチャプターでは、HSBモードに変更してみよう
8. 1 変更しよう
colorModeを変更しよう
createCanvas(400, 400);
//カラーモード・最大値の変更
- colorMode(RGB, 100);
}
createCanvas(400, 400);
//カラーモード・最大値の変更
+ colorMode(HSB);
}
RGBモードの数値をHSBモードの数値に変更しよう
//繰り返し呼び出される処理
function draw() {
//背景の描画
- background(86);
//線を無効にする
noStroke();
//円形1
- fill(100, 0, 0, 50);
ellipse(width / 4 * 1, height / 2, 150, 150);
//円形2
- fill(0, 100, 0, 50);
ellipse(width / 4 * 2, height / 2, 150, 150);
//円形
- fill(0, 0, 100, 50);
ellipse(width / 4 * 3, height / 2, 150, 150);
}
//繰り返し呼び出される処理
function draw() {
//背景の描画
+ background(0, 0, 86);
//線を無効にする
noStroke();
//円形1
+ fill(0, 100, 100);
ellipse(width / 4 * 1, height / 2, 150, 150);
//円形2
+ fill(120, 100, 100);
ellipse(width / 4 * 2, height / 2, 150, 150);
//円形
+ fill(240, 100, 100);
ellipse(width / 4 * 3, height / 2, 150, 150);
}
全く違うモードだけど、Chapter3と同じ色が表示されたね。
今回はHSBモードというモードが違うけれど、RGBモードとはそれぞれ違う数値で同じ色を表現できるんだ。
8. 2 コードの説明
図形を塗りつぶすのに使う色を設定します。
カラーモードがHSBモードのとき、
H(色相)、S(彩度)、B(輝度)の３つの数値で色を指定するんだ
H(Hue)は赤・青・緑のような色味の違い、
S(Saturation)は色の鮮やかさ、
B(Brightness)は色の明るさを示します。
値1: Hue(色相) (0〜360)
値2: Saturation(彩度)(0〜100)
値3: Brightness(輝度)(0〜100)
チャプター9完成
9. 1 カスタムしてみよう
グレースケールモード・RGBモード・HSBモードや数値を変更してみよう。
リファレンスや原色大辞典のカラーピッカーには、別の記述もあるよ。みてみよう。
https://p5js.org/reference/#/p5/fill
https://www.colordic.org/picker/