画像をぷるぷるさせるWebアプリ
ローカル動作しているので、画像がサーバーに保存されることはありません。安心してご利用ください。
使い方はページ下を見てください。
背景が通過していない画像を使用してください。
▼ぷるんぷるん画像出力場所
この場所にgifが生成されます
録画開始を押すと、この上にアニメーションgifが出力されます。
▲コノゲームヲ ホカノヒト ニ ススメテ ホシイナ
このアプリの使い方
好きな画像を読み込んでぷるんぷるんさせるWebアプリです。
サンプルとしてプリンの画像を読み込むようにしています。まずは、このプリンをぷるんぷるんしてみましょう。
読み込んだ直後の画面です。
画面に点と線があります。これをメッシュといいます。
このメッシュの中にある緑色の点（動点）を動かすことで、プリンを揺らすことができます。
動点が動くと、画像が歪んでぷるぷるして見えるようにします。
右下の動作開始を押して、実際にプリンが動かしてみましょう。
動作の激しさは左上の▲▼ボタンを押すと変更できます。
動き方は右上の「ゆれ方変更」ボタンから調整できます。
「手動操作へ」ボタンを押せば手動で動きます。プリン画像をドラッグするとその方向にプリンが揺れます。
録画開始を押すと、プリンのgif画像が作成できます。
説明は以上です。次にメッシュの作成方法について説明します。
メッシュの作成方法
デフォルトのメッシュはまだまだ改良の余地はありそうです。
ここからはあなた自身の力でメッシュを構築して、うまくプリンをぷるんぷるんさせましょう。
動作終了を押してください。
「点の追加」を押すと、クリックした位置に点を配置することができます。
この点をどこに打つかが肝です。試行錯誤しましょう。
また、画面下のボタンから、「点の削除」、「動点の設定」ができます。
点の削除が選択されている時は点をクリックすることで削除ができます。
動点設定が選択されている時はクリックした点を動点にすることができます。
これを繰り返して試行錯誤をすると、下図のようにプリンがなめらかにぷるんぷるんと動くはず。その時はニッコリとほほ笑み、幸せな気分を味わってください。
プリンを上手く揺らせたあなたへ
慣れたら他の画像で試してみましょう。画像を読み込むボタンを押すと、好きな画像を読み込むことができます。
自分の好きな画像を読み込んで、思う存分にゆらしてください。
一般論としての注意事項ですが、SNSなどで不特定多数にシェアする時は著作権に気を付けてください。
自分で描いたオリジナルイラストをぷるんぷるんさせる分には問題はないので、どんどんやりましょう。そういったgif画像をSNS上で公開したらみんなほっこりすると思います。
例えば・・・こんな感じに。
最後にできればのお願いなのですが、twitterに上げる時には、以下のようにこのサイトのURLをつけてくれるとエゴサが楽になるので非常に助かります！
画像をぷるぷるさせるWebアプリ https://hothukurou.com/game/Purupuru/index.html
この作品はWeb1Week出典作品です
（9/7～9/13）1週間でWebサービスを作るイベント - お題「2」
今後の方針
Pixi.js環境で使いまわせるようにモジュール化してあるので、今後のゲーム制作の演出強化に使います。
更新履歴
(20/09/13)新規公開
(20/09/13)スマホだと入力フォームfocus時に自動スクロールして面倒なので、暫定作で入力フォームを上に置いた。
(22/07/05)大規模アップデートしてUI変更。動き方を8種類から選べるようにした。