AOYAMA KOJI's PROGRAMMING BLOG

2点むにむに【mp4クリエイター】全員向け(プログラミング無関係)

2025/06/14
2点むにむに【mp4クリエイター】

　gifアニメや静止画を、指定された2点を中心に、それぞれむにむに揺らす加工を行い、mp4動画ファイルを生成するWebアプリケーションです。 以前、指定された箇所を揺らすアプリが少し話題になり、 技術的に興味深かったので、筆者も独自のアプローチで挑戦してみました。 そのアプリとは異なるかもしれませんが、むにむに動く感じにできましたので、よければ動画を作ってみてください。 数学的な解説も記載しています。
2点むにむに【mp4クリエイター】


[PR]

2丸むにむにmp4動画ファイルクリエイター



サンプル


お口むにむに




お手々むにむに




使い方


  1. 「読み込み画像ファイル」で画像ファイルを読み込みます
  2. 中心位置および強度(赤線)と各種パラメーターを設定・調整します
  3. 【mp4保存】ボタンを押下し、OKを押します
  4. mp4ファイルがダウンロードされれば成功です

1.画像ファイル読み込み


　「読み込み画像ファイル」のところで、【参照】(【ファイル選択】)ボタンから画像ファイルを選択するか、画像ファイルをドラッグ＆ドロップしてください。

2.プレビューとパラメーター調整


　赤い中心点を中心に、指定の強度でむにむにします。 希望の中心位置でオリジナル画像をタップやマウス左ボタンを押下、 そのままドラッグして離すことで「位置」「半径」と「角度」を設定できます。
　プレビューボタンを押下して、良い具合に調整してください。 各種数値を直接入力したり矢印の変更も可能です。
　好みに応じて、「ファイル名」や「秒数」も変更してください。 フレームレートは初期値のままで問題ありませんが、必要に応じて変更してください。

3.mp4保存


　【mp4保存】ボタンを押下し、確認ダイアログを確認してOKを押してください。
　なお【gifアニメ保存】ボタン押下で、mp4ファイルの代わりに、gifアニメーションファイルを生成できます。

4.ファイルダウンロード確認


　mp4ファイル(またはgifファイル)がダウンロードできていれば成功です。
　Webブラウザーの設定にもよりますが、通常は「ダウンロード」フォルダに保存されます。 ファイルアプリ、ファイルマネージャーアプリなどからアクセスしてください。 そこから写真/フォト/ビデオ/ギャラリーフォルダなどへの移動もできます。

安全性


　お使いの端末のみで処理されますので、読み込み指定された画像や生成されたファイルが他に漏れることはありません。
[PR]

技術解説プログラマー向け実装解説


　本記事では、フラグメントシェーダーを用いて、テクスチャのuv値を変更しました。
　どのようにピクセルを変更すると揺れて見えるのか、色々と考察しました。 インスピレーションを得たアプリは手軽でしたので、こんなに実装が大変だとは思わず、 技術的に楽しい挑戦でした。
　試行錯誤して結論を出し、揺れるというよりむにむに動くようになりました。

点と円を用いる形に到達


2点むにむに【mp4クリエイター】 点と円を用いる形 　結論としては、この図のような、点と円を用いた形にたどり着きました。
　図の\(C_o\)が指定した円の中心。 \(C_n\)は時間経過で\(C_o\)から指定の方向に指定の長さだけ動きます。 今回の処理では、各ピクセルは\(C_n\)の方向に引っ張られます。 例えば\(H_o\)にある場合は\(H_n\)くらいになることを想定します。
　フラグメントシェーダーのプログラムには、ある1点、ひとつのピクセルの処理だけを記述します。 ここでは\(H_n\)用のシェーダープログラムを考えます。 そうなると実際に必要なのは、\(C_o,C_n,H_n\)から\(H_o\)の位置を求める式です。

方程式を立てる


2点むにむに【mp4クリエイター】 円弧上の交点Pと正数tを用いて方程式を立てる
　求めるための方程式を立てるために、この位置関係を、もう少し具体化します。
　\(C_n\)から\(H_n\)に線を引いてそのまま円弧まで引きぶつかった点を\(P\)とします。
　そして\(P\)から\(C_o\)に線を引いて、\(C_nH_n : H_nP\) と \(C_oH_o : H_oP\)が同じであるとします。 \(P\)が円弧上にあるという条件から中心\(C_o\)との距離を\(r\)として、
\( |\vec{P} - \vec{C_o}| = r \)

　一方\(P\)は\(C_n\)と\(H_n\)の延長上にあるので変数\(t\)を用いて、以下と書けます。
\( \vec{P} = (\vec{H_n} - \vec{C_n}) \cdot t + \vec{C_n} \)

　また、比率が同じなので、以下も書けます。
\( \vec{P} = (\vec{H_o} - \vec{C_o}) \cdot t + \vec{C_o} \)

　シェーダープログラムは、\(C_o,C_n,H_n\) の位置を把握しているので、 これらを方程式として、\(P,t\)そして\(H_o\) を求めることができます。

方程式を解く


　方程式を解くと、\(C_o,C_n,H_n\) のみで \(H_o\) を表す式は複雑になりました。
　色々と置き換えた方がわかりやすいので、以下に、その置き換えを含めた詳細を記載します。
　2番目の式の\(P\)を、1番目の式に代入すると
\( |((\vec{H_n} - \vec{C_n}) \cdot t + \vec{C_n}) - \vec{C_o}| = r \)
ここで
\( \vec{V_0} = \vec{C_n} - \vec{C_o} \)
\( \vec{V_1} = \vec{H_n} - \vec{C_n} \)
と置いて
\( |\vec{V_1} \cdot t + \vec{V_0}| = r \)
\( |\vec{V_1} \cdot t + \vec{V_0}|^2 = r^2 \)
\( \vec{V_1} \cdot \vec{V_1} \cdot t^2 + 2 \cdot \vec{V_1} \cdot \vec{V_0} \cdot t + \vec{V_0} \cdot \vec{V_0} = r^2 \)
\( \vec{V_1} \cdot \vec{V_1} \cdot t^2 + 2 \cdot \vec{V_1} \cdot \vec{V_0} \cdot t + \vec{V_0} \cdot \vec{V_0} - r^2 = 0 \)
ここでさらに以下と置き換えて
\( a = \vec{V_1} \cdot \vec{V_1} \)
\( b = \vec{V_1} \cdot \vec{V_0} \)
\( c = \vec{V_0} \cdot \vec{V_0} - r^2 \)
方程式を以下の形にします。
\( a \cdot t^2 + 2 \cdot b \cdot t + c = 0 \)
ここで２次方程式の解の公式を用いますが、今回は \(t>0, a>0\) ですので \(\pm\)の部分は\(+\)になりますので
\( t = \frac{-b + \sqrt{b^2 - a \cdot c}}{a} \)
右辺の定数をすべて展開して \(t\) が求まるので二番目の式
\( \vec{P} = (\vec{H_n} - \vec{C_n}) \cdot t + \vec{C_n} \)
から \(P\) を確定し、\(H_n\)の元の位置\(H_o\)を以下で求めます。
\( \vec{H_o} = \vec{C_o} + \frac{|\vec{H_n} - \vec{C_n}|}{|\vec{P} - \vec{C_n}|} \cdot (\vec{P} - \vec{C_o}) \)

確認する


　動作確認したところ、うまく動いていそうでした。
　もっと簡単に方程式を解けないのかと、生成AIのClaudeに聞いてみましたが、数学的には妥当なようです。 この式を、生成AIが検算してくれるとは、良い時代になりましたね。
　ただプログラミングの工夫余地がありそうとのことで、この動作を視覚的に確認できるWebアプリケーションを、Claudeが作ってくれました。 見事に動作していますし、完璧に理解してくれたようです。 一瞬で。
　筆者は、方程式の構築や、その解を求めて本記事のプログラミングするのに、結構な時間を要したのですけれど…(汗)
　まあ筆者は、プログラミングそのものを楽しんでいるので、良いでのですが。
[PR]

まとめ


　gifアニメや静止画を、指定された2点を中心に、それぞれむにむに揺らす加工を行い、mp4動画ファイルを生成するWebアプリケーションを公開し、 その使用方法を解説しました。
　数学的な解説も記載しています。
　また、mp4クリエイターの他バリエーションをこの記事にまとめていますので、よろしければそちらもご活用ください。

補足

  • 本記事で生成されたファイルは、悪意のない範囲で自由に使用・改変・解析していただいて問題ありません。
  • Android版FireFoxなど一部のWebブラウザーは非対応です。確認時点の情報のため改善されている可能性はあります。
  • 動画サイズは、縦横それぞれ16の倍数になるよう調整され、640ピクセルより大きい場合は縮小されます。今後変更される可能性はあります。
  • 本記事で生成されたmp4ファイルのツール名は「LogicLoversInc.」になります。
  • gifファイル生成にjsgifを(ほんの少しだけ改修して)使用しております。感謝！
  • 数式表現にMathJaxを使用しております。助かります！
  • 画像内のラスタライズ文字フォントにOpen Font LicenseのZen Antiqueを使用しております。
  • (本記事公開後)本記事公開後に公開された記事へのリンクを追加しております。

カテゴリー：Webアプリケーション,mp4クリエイター
[PR]