画像をぷるぷるさせるWebアプリ
ローカル動作しているので、画像がサーバーに保存されることはありません。安心してご利用ください。
使い方はページ下を見てください。
背景が通過していない画像を使用してください。
▼ぷるんぷるん画像出力場所
この場所にgifが生成されます
録画開始を押すと、この上にアニメーションgifが出力されます。
#画像をぷるぷるさせるWebアプリ(クリックで表示) でぷるんぷるんgifを見せてみましょう。
著作権を侵害しないように、また公序良俗に反さないように各自が責任を持ってシェアすること！
▲コノゲームヲ ホカノヒト ニ ススメテ ホシイナ
■お借りした素材■
チュートリアル
好きな画像を読み込んでぷるんぷるんさせるWebアプリです。
サンプルとしてプリンの画像を読み込むようにしています。まずは、このプリンで慣れましょう。
読み込んだ直後の画面です。
画面に点と線があります。これをメッシュといいます。
このメッシュの点を動かすことで、ぷるんぷるんさせます。
緑の点が動点です。
動点が動くと画像が歪んでぷるぷるして見えるようにします。
右下の動作開始を押すと、実際にプリンが動きます。
動作の激しさは「動点の範囲」で変更可能です。
100など大きな数字を打つと、異常に尖ったプリンを目撃するはずです。
「手動操作へ」ボタンを押せば手動で動きます。
手動の時はドラッグかフリックすれば揺れます。
説明は以上です。次にメッシュの作成方法について説明します。
メッシュの作成方法
デフォルトのメッシュはまだまだ改良の余地はありそう。
ここからはあなた自身の力でメッシュを構築して、うまくプリンをぷるんぷるんさせましょう。
動作終了を押してください。
クリックした位置に点を配置することができます。
この点をどこに打つかが肝です。試行錯誤しましょう。
画面下のボタンで、「点の削除」、緑色の「動点の設定」ができます。
削除・動点設定では点を押しやすくするため、点が拡大しています。
点の削除が選択されている時は点をクリックすることで削除ができます。
動点設定を押すと、クリックした点を動点にすることができます。
注意点ですが、動点の周りは赤い点で覆ってください。
これは「点で囲われた三角形が変形して表示される」ためです。動点の周りを赤い点で覆って、三角形の内側に動点がくるようにしてください。
これを繰り返して試行錯誤をすると、下図のようにプリンがなめらかにぷるんぷるんと動くはず。その時はニッコリとほほ笑み、幸せな気分を味わってください。
プリンを上手く揺らせたあなたへ
慣れたら他の画像で試してみましょう。画像を読み込むボタンを押すと、自分のＰＣから画像を読み込むことができます。
世の中には著作権というものがあるので、他人の著作物については著作権を侵害しないよう許諾を取るか、内々で楽しんでください。問題が発生した時は各自が責任を持って対応してください。
著作権に問題がない、例えば自分で描いたオリジナルイラストをぷるんぷるんさせる分には問題はないので、そういった動画をSNS上で公開したらみんな幸せになれるでしょう。
例えば・・・こんな感じに。
この作品はWeb1Week出典作品です
（9/7～9/13）１週間でWebサービスを作るイベント - お題「2」
お題の２と関係ないやんけ！と怒られそうなのですが、許してください。
元々動かしたかったものが２つあるアレなんです！が、そんなもの公開したらコンプラ的にやべえだろということで、万人受けするプリンが採用されました。
真意に気づいたあなたなら、もうお題「２」にまつわる画像を読み込んでいると思うので、あとは内々でこっそり遊んでください。
今後の方針
Pixi.js環境で使いまわせるようにモジュール化してあるので、今後のゲーム制作の演出強化に使います。
更新履歴
(20/09/13)新規公開
(20/09/13)スマホだと入力フォームfocus時に自動スクロールして面倒なので、暫定作で入力フォームを上に置いた。