画像をぷるぷるさせるWebアプリ

禁断の発明をしてしまいました。

自分で画像を読み込んで、プルプルさせることができます。
メッシュを組んで、自分で最高のぷるんぷるんを追求することができます。きっと幸せになれるでしょう。

・画像をぷるぷるさせるWebアプリ

https://hothukurou.com/game/Purupuru/index.html

使用言語
・typescript+webpack
・Pixi.js (描画ライブラリ)

目的
・メッシュの勉強をして、ゲームの演出に応用したかったから。

はじめまして。趣味で月１ゲーム制作をしております、作っちゃうおじさんと申します。

最近、高速でシャレな演出ができることで話題のPixi.jsでゲーム制作を進めておりまして、その一環でメッシュ処理の研究をしておりました。
メッシュを雑に説明すると「平面を繋げて作った幾何学模様」です。多分もっと良い説明があると思います。３Ｄグラフィックだと、メッシュって言葉はよく聞くかと思います。あれの２Ｄバージョンをうまく使ってゲームの演出に使えそうなモジュールでも作ろうかと思ってこの一週間で研究を進めておりました。

その時学んだ知見を元に、「どうにかしてお・・・プリンを揺らせるアプリを制作できないか」と思いまして、今回のアプリ制作に至った訳です。

緑の点を動かして、線で囲われた三角形の平面がゆがむと、それに伴って画像も歪んで動きます。バイリニア補間で点の位置を元に画像のピクセルを線形に歪ませているようです。

ちなみに画面上の点から三角形を引ききるアルゴリズムは、ドロネー分割法を用いています。この世界は難しいアルゴリズムの宝庫やなあと思いながら四苦八苦していましたが、もうモジュール化したので今後は中身を観ずに使い続けることができそうです。
ともかく完成しました。
ぜひ遊んで頂き、最高のぷるんぷるんを追求してください。

ここまでみてくれた方へ、感謝のしるしとしまして、今回のテーマ「２」なのに、なぜこのアプリを制作したのか、その答えをお見せしましょう。
この手のツイートをすると、極端にいいね！とリツイートの数が減るので、今後は控えていった方がいいなあと思いました。時代はプリンです。

イラストはジークンソフト様の有料素材を使用しています。
(https://g-kunsoft.booth.pm/items/2067611)

それでは！