p5.js の v1.11.0 で追加された「paletteLerp()」を試す

p5.js の release のページで、v1.11.0 のリリース情報を見ていたら「paletteLerp()」というのが気になって、この記事を書きました。

paletteLerp()

paletteLerp() の詳細は、以下を見ると情報が書いてあります。

●paletteLerp
　https://p5js.org/reference/p5/paletteLerp/

サンプル等は、以下の通りです。

以下の部分が要となる部分です。
この部分で、特定の色から別の色へと、間を線形補間した形で変化させる、という設定になるようです。

p5.js Web Editor で試す

p5.js Web Editor で試してみます。

デフォルトで読みこまれるバージョンは、記事執筆時点では「v1.10.0」で、この部分の数字を書きかえても「v1.11.0」は今の時点では使えないようでした。
（そのうち、新しいバージョンも使える状態になるかとは思います）

そこで、以下のページに書かれた https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/p5.min.js を使って試すことにします。

●Download
　https://p5js.org/download/

とりあえず公式サンプルを動作させられました。

p5.js Web Editor で試す - その2

次に、サンプルを書きかえたものを試します。

コードは以下のようにしました。

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

function draw() {
  background(
    paletteLerp(
      [
        [[100, 120, 250], 0],
        [[0, 0, 0], 0.1],
        [[250, 220, 220], 0.3],
        [[0, 0, 0], 0.5],
        [[220, 100, 220], 1],
      ],
      (millis() / 20000) % 1
    )
  );
}

また、それを動作させた時の様子は、以下の通りです。

色と変化にかかる時間が、自分で設定したとおりになっていることが確認できました。