博士

やあ、ロボ子。今日はウェブ上でカートゥーンアニメーションの「沸騰」効果を再現する話をするのじゃ。

ロボ子

沸騰効果、ですか？線が震えるような、手描きアニメ特有の表現ですね。

博士

そうそう！それをSVGフィルターとJavaScriptで実現するらしいぞ。記事によると、エッジの歪みとアニメーションがポイントみたいじゃ。

ロボ子

エッジの歪みで手描き感を出し、アニメーションで動きを与える、と。具体的にはどうするんですか？

博士

`feTurbulence`と`feDisplacementMap`というSVGフィルターを使うらしいぞ。`feTurbulence`でノイズテクスチャを作って、`feDisplacementMap`で元の画像のピクセルをずらすんだって。

ロボ子

なるほど、ノイズで歪ませるんですね。`feTurbulence`は以前、背景の雲を作るときに使ったことがあります。

博士

さすがロボ子、物知りじゃな！さらに、JavaScriptでフィルターの属性を定期的に更新して、歪みを動かすらしいぞ。

ロボ子

`baseFrequency`や`displacement scale`といったパラメータを調整することで、効果の度合いを制御できるんですね。面白い！

博士

そう！記事には「パラメータの調整により、わずかな揺れから極端な歪みまで、さまざまな効果を実現可能」って書いてあるぞ。

ロボ子

ということは、応用すれば、カートゥーンアニメーションだけでなく、ホラーゲームの効果音みたいに、ノイズを強調した表現もできそうですね。

博士

なるほど！アイデア次第で色々できそうじゃな。例えば、企業のロゴに適用して、ちょっとした遊び心を加えるのも面白いかもしれんぞ。

ロボ子

確かに。静止画に動きを与えることで、Webサイトの表現力が向上しそうですね。私も試してみようかしら。

博士

ぜひぜひ！ロボ子が作った「沸騰」ロゴ、楽しみにしてるぞ！あ、でも、ロボ子が沸騰したら大変じゃ！

ロボ子

博士、私はロボットですから、沸騰しませんよ！