p5.js でカラーモードが RGB の時に色指定で HSB（HSBA）を使う：ランダムな値の指定でテンプレートリテラルを利用して行う #JavaScript

はじめに

p5.js で、カラーモードを HSB に変更しないで RGB のままにしつつ、色指定には HSB（HSBA）を使えないかな、と思って試してみた内容です。

例えば、p5.js の　RGB のカラーモードで色をランダムにする時は、以下の書き方をすることがあります。

fill(random(255), random(255), random(255));

シンプルなプログラムで用いた例は、例えば以下のような感じです。

function setup() {
  createCanvas(400, 400);
  background(220);
  noStroke();

  fill(random(255), 100, 200);
  circle(200, 200, 100);
}

また、明度や彩度を一定にしつつ色相を変えたい場合は、例えば colorMode(HSB, 360, 100, 100) として、以下の書き方を使う方法などがあります。

fill(random(360), 80, 100);

そんな方法がある中、「カラーモードは RGB にしつつ、色の指定のところで HSB（HSBA）が使えないかな？」と思った場面があり、今回の内容を試してみました。

お試し用の処理

試した方法は、とてもシンプルです。

以下のリファレンス中に出てくる書式で HSB（HSBA）のものを、色の指定時に使うだけです。

●reference | color()
　https://p5js.org/reference/#/p5/color

上記は HSB（HSBA）を固定の値にしているため、その部分をランダムにできるようにします。
文字列の中の一部を数値にしたい、という時には、以下のテンプレートリテラルを使うのがシンプルで良いかな、と思います。

●テンプレートリテラル (テンプレート文字列) - JavaScript | MDN
　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

例えば、以下の書き方です。

fill(`hsb(${floor(random(360))}, 80%, 100%)`);

上記で random() で生成した値をそのまま 1つ目（Hue、色相）の値で使うと、色がうまく反映されないため、floor() を組み合わせています。
（HSB のカラーモードで、p5.js の数値指定で指定するときは fill(random(360), 80, 100) などという書き方で問題ないのですが）

直接、数値を指定して試すと、1つ目（Hue、色相）の値は整数で、2つ目・3つ目（Saturation・Brightness、彩度・明度）の値は整数でなくても大丈夫そうでした。

1つ目・3つ目の値をランダムにする時は、以下の書き方で良いです。

fill(`hsb(${floor(random(360))}, 80%, ${random(50, 100)}%)`);

HSBA の指定をする場合の 4つ目（Alpha、透明度）の値は、以下のような値にします。

fill(`hsba(${floor(random(360))}, 80%, 100%, 0.5)`);

このようにして、カラーモードが RGB の時にも色指定で HSB（HSBA）を使って、そして値の一部をランダムにするということができました。