元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【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);  //青
}
f:id:shiroyuki2020:20210422154831p:plain

不透明度

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)');
}
f:id:shiroyuki2020:20210422154834p:plain

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])
//カラーモードと値の範囲の最大値を指定できる
f:id:shiroyuki2020:20210422154828p:plain

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)');
}

参考サイト