【完走賞ゲット-18】p5.js で sin() を使った波の描画数を指定したり変化させたり

はじめに

こちらは、完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 の 18日目の記事です。

今回の記事を書くことになったきっかけ

今回の記事を書くことになったきっかけは、以下のツイートとそれに対するコメントです。

この話は、自分も将来、何か使う時が来るかもしれないと思って、「i5TAU/w なのでは？」と書かれていたものを試してみたくなりました。
そして、さらに少し手を加えたバージョンの何かも作ってみようと思いました。

最終的に作ったもの

最終的に作ったものは、以下になります。

波の数を指定するものを試した後、主に以下の追加実装を行いました。

• 点の大きさと色を変更
  • 色は、今年のアドベントカレンダーで記事を書いていた「Chroma.js Color Palette Helper」を使って作った、カラーパレットを利用
• 波の数を動的に変化させるようにした

作ったプログラム

上で出てきていた p5.js で作ったアニメーションのプログラムは、以下の通りです。

const colorList = [
  "#00429d",
  "#2e59a8",
  "#4771b2",
  "#5d8abd",
  "#73a2c6",
  "#8abccf",
  "#a5d5d8",
  "#c5eddf",
  "#ffffe0",
];

function setup() {
  createCanvas(450, 350);
  strokeWeight(5);
}

function draw() {
  background(220);

  const num = (frameCount / 30) % 10;
  for (let i = 0; i < width; i++) {
    const colorNum = i % colorList.length;
    stroke(colorList[colorNum]);    
    point(i, 0.5 * height + height * 0.3 * sin((i * num * TAU) / width));
  }
}

プログラムの補足

上記のプログラムについて、一部補足します。

カラーパレット

冒頭の colorList で指定しているパレットは、以下の記事にも登場していた「Chroma.js Color Palette Helper」を使っています。

●【完走賞ゲット-5】「Chroma.js Color Palette Helper」というサイトを試してみる（設定変更とカラーパレットの出力） - Qiita
　https://qiita.com/youtoy/items/8dcfd5d69721bf73d5d6

こんな感じで出てきていたものを使いました。

frameCount をもとにした繰り返し

アニメーションは、一定時間で同じものが繰り返されます。
その繰り返しが発生する部分は frameCount を使った処理によるものです。

const num = (frameCount / 30) % 10; という部分で、0 から 9 まで増加して、また 0 に戻る数を生成しています。30 で除算している部分がありますが、このアニメーションはデフォルトの 60fps で描画させており、frameCount の増加が早いため、その変化を遅くすることを意図したものです。

色の設定

最初に用意していたカラーパレットの色を指定するのは、 const colorNum = i % colorList.length; の部分です。
ここで i は、 for (let i = 0; i < width; i++) という for文の中で、「0 から width-1」の範囲で 1ずつ増加していきます（波を描画する点の x座標として使っています）。

その変数i を、カラーパレットの数を使った剰余演算で、カラーパレットの色を指定する番号にしています。カラーパレットの最初の色を選び、リストの最後まで順番に選んでいき、そしてまた最初に戻って...、という選び方をする形です。

点の描画

点の描画は point(i, 0.5 * height + height * 0.3 * sin((i * num * TAU) / width)); という処理にしました。
点の x座標は、上でも少し書きましたが i をそのまま使えるようにしています。

そして、y座標のほうは以下のような意図の処理にしています。

• 0.5 * height という部分で、縦方向の真ん中を基準に上下に波を描画させる
• sin() に height * 0.3 を乗算して、振幅をキャンバスの高さの 30% にする（上下方向それぞれに 30%ずつとなるため、波の全体の高さはキャンバスの高さの 60% になる）
• (i * num * TAU) / width) の部分は、冒頭の Twitter でのやりとりに出てきた、波の数を指定するためのもの

このようにして、波の数を指定した描画が行えました。

こういった話も

今回の話の元になったツイートに対して、別のコメントもされていました。
正規化はあまり使いこなせてないので、こちらも気になった話でした。

【追記】 こんなものも作ってみた