はじめに
こちらは、完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 の 21日目の記事です。
内容は、以下の記事で扱った chroma.js を使ったカラースケールに関する話です。
●【JavaScript 2022】chroma.js を使った複数色のカラースケールでカラーパレットを生成して p5.js で描画(chroma.bezier() や chroma.scale() の scale.correctLightness() などを利用) - Qiita
https://qiita.com/youtoy/items/6b1f11238a76e327d078
上記の記事では、カラースケールからカラーパレットを生成しましたが、この記事では複数の色を使った線形のグラデーションを描画するのに利用してみようと思います。また、線形のグラデーションを描画する方法に drawingContext.createLinearGradient を使った方法もありますが、それとの比較もやってみます。
chroma.js を使った複数色のカラースケールからグラデーションを描画
上で掲載していた前の記事で、カラーパレットを作る場合は、指定した数の色を取り出すというのを scale.colors()
を使ってやりました。
https://gka.github.io/chroma.js/#scale-colors
グラデーションを描画する場合、この部分を「指定の割合の値から色を取得する」ということをやります。そのためには、 out("hex")
というのが利用できるようです。
※ 情報源 ⇒ https://fukuno.jig.jp/3743
具体的にソースコードで書くと、以下のとなります。
const colorList = ["white", "yellow", "blue", "black"];
chroma.scale(colorList).mode("rgb").colors(10),
chroma.scale(colorList).mode("rgb").correctLightness().colors(10),
const colorList = ["white", "yellow", "blue", "black"];
const outputColors = [
chroma.scale(colorList).mode("rgb").out("hex"),
chroma.scale(colorList).mode("rgb").correctLightness().out("hex"),
];
グラデーションの描画: 3種類
以下は、グラデーションを 3つの方法で描画してみたものです。
上記のグラデーションは、それぞれ以下の方法で描画しています。また、グラデーションの元になる色は、共通のものを用いました。
-
chroma.scale()
を利用 - 上記に
scale.correctLightness()
を追加 -
drawingContext.createLinearGradient()
を利用し、真横へグラデーションを作成
ソースコードも掲載しておきます。
const colorList = ["white", "yellow", "blue", "black"];
const outputColors = [
chroma.scale(colorList).mode("rgb").out("hex"),
chroma.scale(colorList).mode("rgb").correctLightness().out("hex"),
];
function setup() {
createCanvas(400, 350);
}
function draw() {
background(220);
for (i = 0; i < width; i++) {
noFill();
stroke(outputColors[0](map(i, 0, width, 0, 1)));
line(i, 30, i, 110);
}
for (i = 0; i < width; i++) {
noFill();
stroke(outputColors[1](map(i, 0, width, 0, 1)));
line(i, 130, i, 210);
}
noStroke();
fill(255);
let gradient = drawingContext.createLinearGradient(0, 180, width, 180);
for (let i = 0; i < colorList.length; i++) {
const ratio = map(i, 0, colorList.length - 1, 0, 1);
gradient.addColorStop(ratio, colorList[i]);
}
drawingContext.fillStyle = gradient;
rect(0, 250, width, 80);
}
比較結果
chroma.scale()
を利用したものと、 drawingContext.createLinearGradient()
を利用したものは、同じ結果を得られました。
また、 chroma.scale()
に scale.correctLightness()
を追加したものは、カラースケールに補正がかかっているため、他の 2つとは異なる結果になりました。
その他の書き方: hex() を使う
上記のプログラムで、 chroma.scale()
を使った方法では、以下のようなやり方でした。
const colorList = ["white", "yellow", "blue", "black"];
const outputColors = [
chroma.scale(colorList).mode("rgb").out("hex"),
...,
];
...
stroke(outputColors[1](map(i, 0, width, 0, 1)));
...
これは、以下のような書き方もできるようです。
const colorList = ["white", "yellow", "blue", "black"];
const outputColors = [
chroma.scale(colorList).mode("rgb"),
...,
];
...
stroke(outputColors[0](map(i, 0, width, 0, 1)).hex());
...