横フリフリ【mp4クリエイター】

2025/05/24

　gifアニメや静止画を、指定された位置を中心に、横にフリフリさせる加工を行い、mp4動画ファイルを生成するWebアプリケーションです。

プログラミングブログ記事一覧

横フリフリmp4動画ファイルクリエイター

サンプル

使い方

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

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

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

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

　赤い横線を中心にフリフリしますので、オリジナル画像をタップやクリックして位置を決めてください。 「中心位置」の数値でも調整できます。
　プレビューボタンを押下して、「横幅」や「鋭角さ」を増減させて良い具合に調整してください。
　好みに応じて、「ファイル名」や「秒数」も変更してください。 フレームレートは初期値のままで問題ありませんが、必要に応じて変更してください。

3.mp4保存

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

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

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

プライバシーと安全性

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

技術解説

　簡単に、使用した技術について触れておきます。
　本記事のアプリケーションでは、WebGLのフラグメントシェーダーを使用しています。 フラグメントシェーダーは各ピクセル毎にプログラムが実行されます。 これにより容易にピクセルを加工できます。
　具体的には、 テクスチャのuv値のuの値を変更しています。
　ここで、Y座標が中心座標に近いほど、大きく揺れるようにプログラミングします。
　前提として、本記事でY座標は -1.0 から 1.0 の値です。
　まず以下の式で、現在の位置(fY)の、フリフリの中心位置(fVPos)からの距離が -1.0 から 1.0 になるように計算します。

　さらに以下の式を通すことで、最も近いY座標のときに 1.0 、遠くなるほどこの値は小さくなり、最小値は 0.0 になります。 これにより、大きく揺らしたい場所の値を大きく、離れるほどに徐々に小さくなるようにできます。

まとめ

　本記事では、gifアニメや静止画を、横にフリフリさせる加工を行い、mp4動画ファイルを生成するアプリケーションを公開し、 その使用方法を解説しました。
　フラグメントシェーダーに関する技術にも軽く触れています。
　また、mp4クリエイターの他バリエーションをこの記事にまとめていますので、よろしければそちらもご活用ください。

補足