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

2025/04/27

　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の値を変更しています。
　以下の式のように、サインカーブを用いて計算した値ぶん、本来の値からずらすことで、左右にゆらゆらさせています。 詳細は、本記事のソースをご確認ください。

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

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

ファミコン世代

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

初代PlayStation世代

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

最新世代

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

まとめ

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

補足