横うねうねバリエーション【mp4クリエイター】
2025/05/18

gifアニメや静止画を、横にうねうねさせる加工を行い、mp4動画ファイルを生成するWebアプリケーションのバリエーションです。 本記事では詳細なパラメーターが指定できます。
基本の横うねうね加工はこの記事をご利用ください。

プログラミングブログ記事一覧
[PR]
横うねうねmp4動画ファイルクリエイター
サンプル
縦周波数を設定
縦同時幅を設定
使い方
- 「読み込み画像ファイル」で画像ファイルを読み込みます
- プレビューしながらパラメーターを調整します
- 【mp4保存】ボタンを押下し、OKを押します
- mp4ファイルがダウンロードされれば成功です
1.画像ファイル読み込み
「読み込み画像ファイル」のところで、【参照】(【ファイル選択】)ボタンから画像ファイルを選択するか、画像ファイルをドラッグ&ドロップしてください。
2.プレビューとパラメーター調整
プレビューボタンを押下して、横幅を増減させて良い具合に調整してください。
必要に応じて、ファイル名や秒数も変更してください。 フレームレートは初期値のままで問題ありませんが、必要に応じて変更してください。
3.mp4保存
【mp4保存】ボタンを押下し、確認ダイアログを確認してOKを押してください。
なお【gifアニメ保存】ボタン押下で、mp4ファイルの代わりに、gifアニメーションファイルを生成できます。
4.ファイルダウンロード確認
mp4ファイル(またはgifファイル)がダウンロードできていれば成功です。
Webブラウザーの設定にもよりますが、通常は「ダウンロード」フォルダに保存されます。 ファイルアプリ、ファイルマネージャーアプリなどからアクセスしてください。 そこから写真/フォト/ビデオ/ギャラリーフォルダなどへの移動もできます。
プライバシーと安全性
お使いの端末のみで処理されますので、読み込み指定された画像や生成されたファイルが他に漏れることはありません。
[PR]
技術解説
この記事をベースに、以下の処理を追加しています。
縦周波数
縦の周波数を設定できるようにしました。 角度を求める際に、ベースの計算式に対して周波数倍しています。具体的には以下のソースです。
float fAngle = (f2PI * (fTimeRate + (float(iY) / float(aiWH.y)))) * float(iVRate);
縦同時幅
縦の塊を設定できるようにしました。 塊となるピクセル数で除算して、切り捨てて、乗算することで、近くの数値を同じ数値にできます。
int iY = ( int(gl_FragCoord.xy.y) / iVOnce) * iVOnce;
[PR]
まとめ
本記事では、gifアニメや静止画を、横にうねうねさせる加工を、より細かい設定に従って行う、mp4動画ファイルを生成するアプリケーションを公開し、 その使用方法を解説しました。
技術解説として、各パラメーターの反映方法についても解説しています。
本記事よりパラメーターの少ないこの記事では、アプリケーションに加えて、「横うねうね演出と家庭用ゲーム機の変遷」も記載していますので、併せてご覧ください。
また、mp4クリエイターの他バリエーションをこの記事にまとめていますので、よろしければご活用ください。
補足
- 本記事に記載のプログラムソースコードは、悪意のない範囲で自由に使用・改変していただいて問題ありません。ただし、ご自身の判断と責任でお願いします。
- 本記事で生成されたファイルは、悪意のない範囲で自由に使用・改変・解析していただいて問題ありません。ただし、ご自身の判断と責任でお願いします。
- Android版FireFoxなど一部のWebブラウザーは非対応です。確認時点の情報のため改善されている可能性はあります。
- 動画サイズは、縦横それぞれ16の倍数になるよう調整され、640ピクセルより大きい場合は縮小されます。今後変更される可能性はあります。
- 本記事で生成されたmp4ファイルのツール名は「LogicLoversInc.」になります。
- gifファイル生成にjsgifを(ほんの少しだけ改修して)使用しております。感謝!
- (本記事公開後)本記事公開後に公開された記事へのリンクを追加しております。
- (本記事公開後)「安全性」→「プライバシーと安全性」としました
カテゴリー:Webアプリケーション,mp4クリエイター
[PR]