【p5.js】色の指定

色の指定方法は複数あるので、それぞれ見ていきます。色はグレースケール、RGB、HSBで指定します。色の指定と合わせて、不透明度も指定できます。他にCSSの記法でも指定できます。その時に応じた指定の仕方を使えると良いです。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

グレースケール

白から黒まで(0～255)の値を指定する。

//グレースケール:0～255
function setup(){
  createCanvas(200, 200);

  //background(0);      //黒
  //background(127);  //グレー
  background(255);  //白
}

RGB

RGBで色を指定する。

//RGB:Red, Green, Blue
function setup(){
  createCanvas(200, 200);

  //background(255, 0, 0);  //赤
  //background(0, 255, 0);  //緑
  background(0, 0, 255);  //青
}

不透明度

4つ目のパラメータで不透明度(アルファ値)を指定する。

// 不透明度の指定:0～255 or 0.0～1.0
function setup(){
  createCanvas(200, 200);

  //background(255, 0, 0, 20);
  background('rgba(255, 0, 0, 0.6)');
}

colorMode()をHSBに変更

デフォルトでは、RGBのカラーモデルを使用している。colorMode()で、カラーモードをHSBに変更して色を指定する。

function setup(){
  createCanvas(200, 200);

  //カラーモードをHSBに変更する
  colorMode(HSB, 100);
  //background(50, 100, 80);
  background(50, 100, 80, 20);
}

//colorMode(mode, [max])
//colorMode(mode, max1, max2, max3, [maxA])
//カラーモードと値の範囲の最大値を指定できる

CSS記法

function setup(){
  createCanvas(200, 200);

  //background('red');  //色名を指定
  //background('#ff0000');  //16進数で指定
  background('rgba(255, 0, 0, 0.6)'); //rgbaで指定
}

色の指定のまとめ

• グレースケール
• RGB
• HSB
• 不透明度
• CSS記法
• colorMode():カラーモードの変更

function setup(){
  createCanvas(200, 200);
  //グレースケール
  //background(127);

  //RGB
  //background(255, 0, 0);

  //カラーモードをHSBに変更する
  //colorMode(HSB, 100);
  //background(50, 100, 80);
  //不透明度
  //background(50, 100, 80, 20);

  //CSS記法
  //background('red');
  //background('#ff0000');
  background('rgba(255, 0, 0, 0.6)');
}

参考サイト

• p5.js入門 (全14回) - プログラミングならドットインストール