今年の 4月ごろ・6月ごろにツイートしていた、p5.js で SVGフィルターを使う話について、自分用のメモも兼ねて記事にしてみます。
今回の記事の内容は、シンプルに SVGフィルターを利用する話という範囲でまとめます。
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フィルターの処理を使ってみます。
ベースとなる処理
まずは、キャンバス上を円が移動するプログラムを書いて動かしてみます。
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 を適用できるフィルターを使っています。
<!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()」を使った処理を追加しただけです。
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 のキャンバス上で実現できました