p5.js で SVGフィルターを使う（p5.js Web Editor上の HTML・JavaScript に手を加えて利用）

今年の 4月ごろ・6月ごろにツイートしていた、p5.js で SVGフィルターを使う話について、自分用のメモも兼ねて記事にしてみます。

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

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

今回の記事の内容は、シンプルに SVGフィルターを利用する話という範囲でまとめます。

## SVGフィルターに関するページ
SVGフィルターを試すにあたり、参照したページを記載します。

●<filter> - SVG: Scalable Vector Graphics | MDN
　https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

●SVGのフィルター効果 - SVGでやることのまとめ。
　https://lopan.jp/about-svg/filter/

## p5.js Web Editor上で SVGフィルターを試す
SVGフィルターを試す環境として、Web上で ｐ5．ｊｓ を使ったプログラムを書いたり実行ができたりする「[p5.js Web Editor](https://editor.p5js.org/)」を用います。

### 動作確認
それでは、p5.js Web Editor上の「index.html」と「sketch.js」に手を加えて、SVGフィルターの処理を使ってみます。

#### ベースとなる処理
まずは、キャンバス上を円が移動するプログラムを書いて動かしてみます。

```javascript:sketch.js
function setup() {
  createCanvas(400, 400);

  fill(100, 100, 150);
}

function draw() {
  background(220);

  circle((frameCount * 5) % width, frameCount % height, 50);
}
```

まだ SVGフィルターに関する処理は、全く含めていない状態です。
以下のような、「色の付いた円が斜めに動く」というシンプルな処理が実行されるかと思います。
![SVGフィルターの適用前](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/333bf9a2-fe45-aebf-a6b5-46c58ff2d6f1.png)

#### SVGフィルターを適用するための処理
あとは、 index.html を編集して、sketch.js に少し追記をして、SVGフィルターを適用するだけです。

index.html は以下のとおりで、p5.js Web Editor でデフォルトで用意される内容との差分は、 `</body>` の直前に `<svg>...</svg>` を加えている部分のみです。
いくつかあるフィルターのうち、ここでは「[feGaussianBlur](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur)」という Blur を適用できるフィルターを使っています。　

```html:index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="utf-8" />
  </head>
  <body>
    <main></main>
    <script src="sketch.js"></script>
    <svg>
      <filter id="feGaussianBlur">
        <feGaussianBlur stdDeviation="10 3" />
      </filter>
    </svg>
  </body>
</html>
```

あとは、キャンバスに SVGフィルターを適用する必要があるので、その処理を sketch.js に追記します。
先ほど掲載していた内容との差分は、 `createCanvas()` の部分で「[style()](https://p5js.org/reference/#/p5.Element/style)」を使った処理を追加しただけです。

```javascript:sketch.js
function setup() {
  createCanvas(400, 400).style("filter", 'url(#feGaussianBlur)');

  fill(100, 100, 150);
}

function draw() {
  background(220);

  circle((frameCount * 5) % width, frameCount % height, 50);
}
```

この後に処理を実行すると、以下のツイートにあるように、キャンバス自体を含む描画領域内に Blur がかかっているのが確認できます。

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

## おわりに
今回、p5.js Web Editor上で SVGフィルターを使う方法を記事にしてみました。

最近見かけた以下をきかっけに、過去の p5.js と SVGフィルターを組み合わせた話を見直した中で、記事を書いてなかったのに気づいて今回の記事を書きました。

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

上記に出てくる Matter.js も、p5.js と組み合わせて使ったことがあるので、「Matter.js ＋ SVGフィルター」を p5.js と組み合わせる話も試せればと思っています。

### Matter.js と p5.js を組み合わせて試したものの事例

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

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

## 【追記】 記事公開後に試した図形が溶け合うようなエフェクト
SVGフィルターを使った、図形が溶け合うようなエフェクトを、p5.js のキャンバス上で実現できました

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

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

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

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

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