02-04 色をつける

1 例題2-4-1
- 1.1 コード
- 1.2 結果
2 例題2-4-2
- 2.1 コード
- 2.2 結果
3 練習問題2-4-1
- 3.1 結果
4 練習問題2-4-2
- 4.1 結果
5 練習問題2-4-3
- 5.1 結果
6 練習問題2-4-4
- 6.1 結果
7 練習問題2-4-5
- 7.1 結果
8 練習問題2-4-6

直線や四角を描く際の色を指定する。

光の三原色の赤（Red）、緑（Green）、青（Blue）の各成分を0～255の値で示す。

r,g,b

例題2-4-1

blendMode(ADD)を指定すると色の加算ができる。赤＋青＝赤紫（マジェンタ）、赤＋緑＝黄色、青＋緑＝水色（シアン）、赤＋緑＋青＝白。

コード

function setup() {
  createCanvas(400, 400);
  background(0);
  blendMode(ADD);
  fill(255,0,0);
  ellipse(70,120,100,100);
  fill(0,255,0);
  ellipse(120,120,100,100);
  fill(0,0,255);
  ellipse(95,70,100,100);
}

結果

例題2-4-2

＋と÷のデザインを描く。

コード

function setup() {
  createCanvas(400, 400);
  background(220);
  
  stroke(0, 0, 255);  // 輪郭の色
  fill(0, 0, 255);    // 塗りつぶす色

  rect(10, 50, 100, 20);  // +
  rect(50, 10, 20, 100);
  
  rect(150, 50, 100, 20);  // ÷
  circle(200, 20, 30);
  circle(200, 100, 30);
}