-
1:ID:l/5Z7X · 2021-09-26

canvasでエモい表現を作りたい

以下のサイトにあるような、マウスを動かすことで、背景がエモく揺れるような表現の作成を目指しているものです。
https://homunculus.jp/
https://www.tfc.co.jp/

しかし、作り方がぜんぜんわからず、
どのようなことを学習すればよいでしょうか?
もしくはこういった揺れるような表現を得意とする効果があったりしますか?

当方のスキルは、
●canvas以外のjavaScriptの知識はあり(jquery等を使って、通常のwebサイト制作には不便なし)
●pixijsでdisplacementmapフィルターを使って、ちょっと画像をゆがます などはギリ可能
●数学知識なし(アニメーションはずっとプラグイン に頼ってきた)


質問が抽象的で申し訳ないのですが、
何かしらヒントをいただけると助かります。

3 件の回答

2:ID:IZiMM0 · 2021-09-27

"graphic wave effect javascript" でググったら three.js での実装例が出てきたよ。URL に NG ワードがあって貼り付けられないんで(笑)自分でググってくれ。

まーでもこの辺を極めたいなら数学の知識は必須だろうね。「ジェネラティブアート」とかで調べて。

3:ID:/Zeego · 2021-09-27

three.js すね
自分も興味あったんですけど、シェーダーが難しすぎて諦めました
需要もニッチですしね、でもまー出来たら楽しそうですよねぇ

数学ちゃんとやっておけば良かったなぁと後悔しました
サイン、コサイン??んなの社会で使わねーよっ て思ってたらまさか使うとはね トホホ

4:ID: · 2021-09-27

お二方ありがとうございます!

Three.jsだったのは驚きでした!

いただいたワードをもとに、ググってみます・。

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る