SVGフィルターに関するページ

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

● - 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」を用います。

動作確認

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

ベースとなる処理

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

sketch.js

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

  fill(100, 100, 150);
}

function draw() {
  background(220);

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

まだ SVGフィルターに関する処理は、全く含めていない状態です。
以下のような、「色の付いた円が斜めに動く」というシンプルな処理が実行されるかと思います。

SVGフィルターを適用するための処理

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

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

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()」を使った処理を追加しただけです。

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 がかかっているのが確認できます。

おわりに

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

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

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

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

【追記】記事公開後に試した図形が溶け合うようなエフェクト

SVGフィルターを使った、図形が溶け合うようなエフェクトを、p5.js のキャンバス上で実現できました