【サンプルコード付き】p5.jsでマウスに反応していい感じにフワフワする波を書く

これは何

昔p5.jsでつくったマウスに追従する波の書き方とコードをまとめたものです。
備忘録もかねてめちゃめちゃ細かく書いてます。
自分が書いたコードなのに全然内容が思い出せなくて焦ったのでちゃんとコメントつけたり分かりやすい変数名使うの大事だなと思いました。

作ったもの

最終成果物

実際の動きはこちらから確認できます

マウスホバーするとマウスに追従して波がいい感じに動きます。

やったこと解説

やってることの手順はこんな感じです

1. ふわふわ動く波を描画する
2. マウスの位置を頂点とするガウス曲線を擬似的に描く
3. ふわふわ動く波が2のガウス曲線にゆるやかに近づいていくようにする

それぞれ解説していきます。

1. ふわふわ動く波を描画する

まずはふわふわ動く波を描画します。

点を繋げて曲線を書く

まず、x座標を動かしながら点を打っていくことで線を描画します。今回の場合は40ずつ右に移動しながら点を打っています。
「え、刻み方荒くない？」って思いますよね。（私もコード読み返しながら思いました。）

確かに40ずつ刻んで点を打つだけではとても線には見えないのですが
beginShape();とendShape(CLOSE);でコードを囲ってあげると点どうしをつながった線分を書いてくれるので、この粗さでもちゃんと線が描画されます。
さらに、頂点の座標をcurveVertex()で指定することで点どうしを曲線でつないでくれます。

同じy座標に点を打っていくだけでは描画されるのはただの直線なので、点を打つごとにy座標の位置をいい感じに変えてあげる必要があります。

こういう「いい感じにランダムなもの」を生成したい時に便利なのがパーリンノイズです。パーリンノイズは本当にスゴイやつです。

ランダム関数が指定された範囲内で完全にランダムな数値を出すのに対して、パーリンノイズは渡した引数の変化に応じて「なんかいい感じにランダムな数値」を返してくれます。

言葉で説明してもはてという感じなので、ランダム関数を使って生成した波とパーリンノイズを使って生成した波を見比べてみましょう。

上の赤いのがパーリンノイズを使って描画した曲線、下の青いのがランダム関数を使って描画した曲線です。パーリンノイズで描画した曲線のほうが変化がなだらかで自然な感じになっているのが分かると思います。

サンプル+コードはこちら

ではパーリンノイズを使って波を描いていきましょう。

• パーリンノイズ基礎知識
  • noise()という関数を使うと、引数に応じて0~1の間の数値を返してくれる
  • 引数を少しずつ変化させると、返してくれる数値もなだらかに変化する
  • 引数と返ってくる値は1:1で対応している
  • 引数の変化は小さいほど返ってくる値もなだらかになる

今回はxoffという変数を引数にして、点を打つごとに0.05ずつ数値を増加させていきました。

noise()で帰ってくる値は0~1の間の数値なのでさらにmap()を使って波を描画するのに丁度よい範囲にマッピングします。
今回はheight * 1/10, height * 8/10の範囲にリマッピングしました。

ここまでをコードにするとこんな感じです。
サンプル+コードはこちら
良い感じになるようにnoiseDetailを使用しています。

var canvas;

function setup() {
  canvas = createCanvas(window.innerWidth, window.innerHeight);
  noiseDetail(2,0.2);
}

function draw() {
  background(255,255,255);
  noStroke();
  beginShape();
  fill(182, 208, 220, 70);
  //波を描画する
  var xoff = 0;
  for (var x = 0; x <= width+200; x += 40) {
    // xoffを引数にしてnoise()で値を取得し扱いやすい範囲にリマッピング
    var y = map(noise(xoff), 0, 1, height * 1/10, height * 8/10);
    // 曲線の頂点座標を指定する
    curveVertex(x, y);
    // x
    xoff += 0.05;
  }
  curveVertex(width, height);
  curveVertex(0, height);
  endShape(CLOSE);
}
}

Ref

noise | p5.js公式リファレンス
map | p5.js公式リファレンス

パーリンノイズを使って波をフワフワさせる

先ほどまででこんな感じの波を描画できました。

、、、これを波と認識するかはかなり個人差がありそうです。
「波っぽさ」を出すために動きを追加していきます。

これは簡単で、実はnoise()は引数を複数指定できるので、先程の曲線の頂点を指定していたvar y = map(noise(xoff), 0, 1, height * 1/10, height * 8/10);のnoise(xoff)の部分に変化し続ける値を引数として追加してあげれば良いのです。

今回はこんな感じでyoffという引数を追加しています。

var y = map(noise(xoff,yoff), 0, 1, height * 1/10, height * 8/10);

サンプル+コードはこちら

プレビューを確認してみるとこんな感じです。

これは！もう大分波です。これはかなりの人が「波だな」と思ってくれるのではないでしょうか。良い感じです。

2. マウスの位置を頂点とするガウス曲線を擬似的に描く

若干もう波描けたし良くないか？という気持ちになってきましたが、本題の「マウスに反応していい感じにフワフワする」部分を作っていきます。
ここが当時かなり難航した部分で何パターンもやり方を試しては「思った通りの動きにならん、、」と苦悩した部分なのですがさっぱり覚えてないので最終形だけ解説します。

結論から言うと、A [マウスの位置を頂点とするガウス曲線] を想定し、B [描画した波の形] に足してあげます。

図にするとこんな感じです。

ガウス曲線は数学の授業でよくみる素敵な曲線のアレです。

ガウス関数

では下準備として、マウスの位置を頂点とするガウス曲線を描いていきます。

ガウス曲線のことはよくわかりませんが数式をそのままドーンしてx座標を入れるとy座標を返してくれる関数を作ります。
平均0、標準偏差1のガウス曲線が気に入ったし数値的にも扱いやすそうなのであまりよく考えずそいつを使います。

正規分布

function Gaussian(x){
  return 1/(pow(2*PI,1/2)) * Math.exp(- pow(x,2)/2)
}

数式の意味はよく分かっていないけど、x座標の値を入れればy座標の位置を返してくれる関数が出来上がりました。

試しにx=2/width,y=0が頂点となるガウス曲線を描いてみます。
コードはこんな感じ

fill(255, 0, 0);
for (var i = 0; i <= width; i += 10) {
  var gaussianX = map(i, 0, width, -5,5);
  var gaussianY = map(Gaussian(gaussianX,1), 0, 0.5, height, 0);
  ellipse(i, gaussianY, 5);
}

平均0、標準偏差1のガウス曲線は最大値が0.4くらいらしい（正確には0.3989422804らしいです）ので、map(Gaussian(gaussianX,1), 0, 0.4, height, 0);の部分で0~0.4の範囲を0~画面の高さの範囲にリマッピングしていい感じの波になるようにしています。
ついでにp5.jsのキャンバスは左上が0なので見た目的に上の方に頂点が来るよう逆さまにマッピングしています。

また、平均0、標準偏差1のガウス曲線はx座標が-5~5の間に良い感じの波が存在するので、こちらもgaussianX = map(i, 0, width, -5, 5);でx座標の位置を関数に渡すときに-5~5の範囲にリマッピングしています。

サンプル+コードはこちら

確認してみると良い感じのガウス曲線が書けています。

次はこのガウス曲線をマウスの位置が頂点になるようにいじって行きます。

高さに関しては先程のmap(Gaussian(gaussianX,1), 0, 0.4, height, 0);のマッピングで画面の高さを指定していた部分をmouseYに置き換えてあげれば良さそうです。

X座標に関しては、i = mouseXの時にgaussianX = 0（≒y座標が最大になる）になれば良さそうです。

iとmouseXの距離をdistXとすると、i = mouseXの時にdistX = 0となるので扱いやすそうです。

distXは-widthからwidthの範囲に分布しているのでマッピングの範囲も修正してあげます。

コードにするとこんな感じです。

fill(255, 0, 0);
for (var i = 0; i <= width; i += 10) {
  var distX = abs(mouseX - i);
  var gaussianX = map(distX, -width, width, -5,5);
  var gaussianY = map(Gaussian(gaussianX,1), 0, 0.4, height, mouseY);
  ellipse(i, gaussianY, 5);
}

無事ガウス曲線がマウスに追従してくれるようになりました。

サンプル+コードはこちら

3. ふわふわ動く波が2のガウス曲線にゆるやかに近づいていくようにする

これで波がマウスに反応するようになります。
ここまで長かった、、、、

先程作ったマウスの位置が頂点になるガウス曲線を縮めて最初に作った緩やかに動く波に乗せる形で実現します。

流石にあのまま元の波に反映させると数値が大きすぎるのでちょうど良いサイズになるようマッピングします。

試しにこんな感じに指定してみたら良い感じでした。

var gaussianY = map(Gaussian(gaussianX), 0, 0.4, mouseY/4, 0);

更にこのgaussianYを曲線のy座標に加算して反映させます。

curveVertex(x, y + gaussianY);

なかなか良い感じです。

サンプル＋コードはこちら

実際の制作物ではここからマウスとの距離に応じてちょっと調整を入れたり高さを変えた波を複製して表現をリッチにしたりしているのですが細かい上に長くなりすぎるので割愛します。

これでマウスに反応していい感じにフワフワする波が描けました！お疲れ様でした！！