【完走賞ゲット-12】p5.js で綺麗なグラデーションを使うために「FarbVélo」というサービスを使ってみる

## はじめに
こちらは、[完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022](https://qiita.com/advent-calendar/2022/youtoy) の 12日目の記事です。

内容は、以下の記事内で紹介されていた「[FarbVélo](https://farbvelo.elastiq.ch/)」を p5.js での描画に利用するというものです。
●Web制作のお供に！最新オンライン時短ツール32個まとめ | PhotoshopVIP
　https://photoshopvip.net/142038

## FarbVélo について
### 知ったきっかけ
「FarbVélo」を初めて見たのは、上でも書いていたまとめ記事内でした。
![FarbVélo の紹介](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2e63f1b0-95bf-9e09-4a05-e243dd1dd4b3.png)
この紹介ページでの、とても綺麗なグラデーション画像を見て、使ってみたくなりました。

### 軽く触ってみる
「[FarbVélo](https://farbvelo.elastiq.ch/)」を触ってみます。

ページを開いてみたら、このような内容が表示されました。
![お試し1つ目](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/419aaf78-22eb-2f57-62a0-4aa5864a1019.png)

この画面で、右下にある 3つのアイコンの中の、真ん中のものを押してみます。そうすると、画面の右のほうに以下のような内容が表示されました。
![色情報をテキストで取り出す](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6dc2199e-a4a9-e362-0d68-db110c693831.png)

デフォルトでは、JavaScript の配列で 16進数表示の文字列が出てきます。
![1個目：JavaScriptの配列・16進数](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/130e73d2-4f1d-3a6e-417e-8c84de3c1cba.png)
また、「hex」という項目を変えて、例えば「rgb」に変更することもできます。
![1個目：JavaScriptの配列・RGB](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/13409225-30ca-f263-a5e0-b8335f524428.png)
また、JavaScript の配列のところを、例えばオブジェクトに変更することもできたりします。
![1個目：JavaScriptのオブジェクト・16進数](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/da800496-7842-adbc-7b34-2cccf6405c14.png)

今度は、画面右下にある 3つのアイコンの中の、一番右のアイコンを押してみます。
そうすると、色のセットが変わりました。

![2つ目のセット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/68b67b6d-4884-b5d9-46d6-5a8aacfe6fe6.png)

## FarbVélo で生成した色を取り出して利用する
### 色の情報をテキストで取り出す
上で生成した色のセットを JavaScript の配列として取得してみました（色情報は 16進数での表記）。

```javascript
[
  "#3f616c", 
  "#6baec5", 
  "#9dcebc", 
  "#c0e194", 
  "#d7ef7b", 
  "#e0e8a4"
]
```

```javascript
[
  "#7e6c6e", 
  "#e2bdc3", 
  "#edd5e0", 
  "#dcdbea", 
  "#cbdced", 
  "#c1d0d3"
]
```

これを p5.js で使ってみることにします。

### p5.js でグラデーションの描画
JavaScript で書いた、p5.js のプログラムは以下のとおりです。

```javascript:sketch.js
const colorList = [
  ["#3f616c", "#6baec5", "#9dcebc", "#c0e194", "#d7ef7b", "#e0e8a4"],
  ["#7e6c6e", "#e2bdc3", "#edd5e0", "#dcdbea", "#cbdced", "#c1d0d3"],
];

function setup() {
  createCanvas(500, 400);
  noStroke();
}

function draw() {
  background(0);

  let gradient = drawingContext.createLinearGradient(0, 0, width, height);

  let cList
  if (keyIsDown(LEFT_ARROW)) {
     cList = colorList[1];
  } else {
     cList = colorList[0];
  }
  for (let i = 0; i < cList.length; i++) {
    // const ratio = (i === 0) ? 0 : i/(cList.length-1);
    const ratio = map(i, 0, cList.length - 1, 0, 1);
    gradient.addColorStop(ratio, cList[i]);
  }

  drawingContext.fillStyle = gradient;
  rect(0, 0, width, height, 50);
}
```

上記の　2種類のグラデーションを描画した結果は、以下のとおりで、想定通りの描画ができました。

https://twitter.com/youtoy/status/1601937135707525121

#### 参照用の情報
- [CanvasRenderingContext2D.createLinearGradient() - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient)
- [CanvasGradient.addColorStop() - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop)