HSBが見当つかない

最近、p5.jsやProcessingをがんばっているのですが、色に戸惑い、戸惑いを隠せません。

そうです、HSBです。

私は、紙のデザイナーとWEBデザイナーを経験しているので、CMYKやRGBはなんとなくわかります。

しかし、HSBは聞いたこともありませんでした。

だから、何かを作ろうとしても色がすぐにイメージできなので、少しイライラします。

ざっくりと色がイメージできて、制作時におおよその色を指定できるようにp5.jsで色見本のようなものを作りました。

↓こんな感じです

コードはめちゃめちゃなので、見られるのは恥ずかしいですが同じような状況の人がいたら便利だと思うので載せておきます。

function setup() {
      createCanvas(720, 720);
      colorMode(HSB, 360, 100);
      noStroke();
      textSize(10);

      let cal_a = 720 / 20;
      console.log(cal_a);
    }

    function draw() {
      background(360, 100, 100);

      let num = 36;
      let cH = 360 / num;
      let cS = 100 / num;
      let cB = 100 / num;
      let w = width / num;
      let h = height / num;

      for (let i = 0; i <= num; i++) {
        fill(cH * i, 100, 100);
        rect(0, w * i, width, height / num);
        fill(0, 0, 100, 100);
        let colArr = [cH * i, 100, 100];
        text(nfc(colArr, 0), 10, h * i - 5);
      }
    }

p5.jsをいっぱい勉強してもっとスマートなコードを掲載できるようになります！