横うねうね【mp4クリエイター】

2025/04/27

　gifアニメや静止画を、ファミコン時代からよく使われている演出のように、横にうねうねさせる加工を行い、mp4動画ファイルを生成するアプリケーションです。

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

サンプル

使い方

1. 「読み込み画像ファイル」で画像ファイルを読み込みます
2. プレビューしながらパラメーターを調整します
3. 【mp4保存】ボタンを押下し、OKを押します
4. mp4ファイルがダウンロードされれば成功です

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

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

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

　プレビューボタンを押下して、横幅を増減させて良い塩梅に調整してください。
　必要に応じて、ファイル名や秒数も変更してください。 フレームレートは初期値のままで問題ありませんが、必要に応じて変更してください。

3.mp4保存

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

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

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

安全性

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

技術解説

　簡単に、使用した技術について触れておきます。
　本記事のアプリケーションでは、WebGLのフラグメントシェーダーを使用しています。 フラグメントシェーダーは各ピクセル毎にプログラムが実行されます。 これにより容易にピクセルを加工できます。
　具体的には、 テクスチャのuv値のuの値を変更しています。
　以下の式のように、サインカーブを用いて計算した値ぶん、本来の値からずらすことで、左右にゆらゆらさせています。 詳細は、本記事のソースをご確認ください。

横うねうね演出と家庭用ゲーム機の変遷

　余談ですが、横うねうね演出と家庭用ゲーム機の変遷について語ります。

ファミコン世代

　ファミコン世代の家庭用ゲーム機は、ハードウェア描画パラメーターが、リアルタイムに変更できました。 また、ゲーム機からテレビへの描画はハードウェアの処理で、ラスタースキャンという方式で、上から1ラインずつ行われます。
　ここで、ある1ラインの描画が終了し、次の1ラインの描画が開始されるまでには、わずかに隙間時間があります。 その隙間時間の中で、横スクロール位置を変更するプログラムを実行すると、1行ごとに横スクロール位置が変更できます。 これにより、横にうねうねする演出ができました。 本演出はラスタースクロールなどとも呼ばれますが、これが理由です。
　スーパーファミコンの世代まで、この仕組みを利用できました。

初代PlayStation世代

　ところが PlayStation 世代から、フレームバッファと呼ばれる場所に画像を完成させる方式になり、この演出に使えるハードウェア描画パラメーターはなくなりました。 そうなると、この演出をするために、今までは縦ライン数(当時240)回処理すればよかったのに対して、フレームバッファの全ピクセル数(当時8万)回処理する必要あり、まだマシンパワー不足した。
　プログラマーの工夫などで再現したケースもあると思いますが、PlayStation 1 世代のゲームは、一時的に、この演出が減っていたハズです。

最新世代

　その後、最新世代の家庭用ゲーム機ではシェーダーと呼ばれるプログラムが使えるようになりました。 これでフレームバッファの全ピクセル操作が高速にできるようになり、うねうね演出がふたたび簡単にできるようになりました。
　シェーダーは最新世代のパソコンやスマートフォンでも使用できます。 本記事の実装もフラグメントシェーダーを使用しており、シェーダー対応のパソコンおよびスマートフォンのWebブラウザー上で動きます。

まとめ

　本記事では、gifアニメや静止画を、ファミコン時代からよく使われている演出のように、横にうねうねさせる加工を行い、mp4動画ファイルを生成するアプリケーションを公開し、 その使用方法を解説しました。
　技術解説として、フラグメントシェーダーを使用した旨についても、簡単に触れています。
　なお、より細かくパラメーターを変更できるアプリケーションをこの記事で公開しましたので、併せてご利用ください。

補足