回転ぐるぐる【mp4クリエイター】
2025/05/31
gifアニメや静止画を、ぐるぐる回転させて、mp4動画ファイルを生成するWebアプリケーションです。 回転の中心位置および画像サイズを調整できます。
プログラミングブログ記事一覧
[PR]
回転ぐるぐるmp4動画ファイルクリエイター
サンプル
使い方
- 「読み込み画像ファイル」で画像ファイルを読み込みます
- 中心位置(赤X)と各種パラメーターを設定・調整します
- 【mp4保存】ボタンを押下し、OKを押します
- mp4ファイルがダウンロードされれば成功です
1.画像ファイル読み込み
「読み込み画像ファイル」のところで、【参照】(【ファイル選択】)ボタンから画像ファイルを選択するか、画像ファイルをドラッグ＆ドロップしてください。
2.プレビューとパラメーター調整
赤いバッテンを中心に回転しますので、オリジナル画像をタップやクリックして位置を決めてください。 「中心位置」の数値でも調整できます。
「秒数」が一周する時間になりますので、回転速度を変更したい場合は、秒数を調整してください。
プレビューボタンを押下して、その他のパラメーターを調整してください。
なお「画像サイズ」の数値を調整すると、自動的にプレビューが停止しますので、再度プレビューボタンを押下してください。
好みに応じて、「ファイル名」も変更してください。 フレームレートは初期値のままで問題ありませんが、必要に応じて変更してください。
3.mp4保存
【mp4保存】ボタンを押下し、確認ダイアログを確認してOKを押してください。
なお【gifアニメ保存】ボタン押下で、mp4ファイルの代わりに、gifアニメーションファイルを生成できます。
4.ファイルダウンロード確認
mp4ファイル(またはgifファイル)がダウンロードできていれば成功です。
Webブラウザーの設定にもよりますが、通常は「ダウンロード」フォルダに保存されます。 ファイルアプリ、ファイルマネージャーアプリなどからアクセスしてください。 そこから写真/フォト/ビデオ/ギャラリーフォルダなどへの移動もできます。
プライバシーと安全性
お使いの端末のみで処理されますので、読み込み指定された画像や生成されたファイルが他に漏れることはありません。
[PR]
技術解説
本記事ではポリゴンを用いて描画しています。
ポリゴンの各頂点は、以下の行列を用いた演算で、Z軸を中心に回転することができます。 \(\theta\)は回転の角度です。
\(
\begin{pmatrix}
x' \\
y' \\
z' \\
w'
\end{pmatrix} =
\begin{pmatrix}
\cos{\theta} & -\sin{\theta} & 0 & 0 \\
\sin{\theta} & \cos{\theta} & 0 & 0 \\
0 & 0 & 1 & 0 \\
0 & 0 & 0 & 1
\end{pmatrix}
\begin{pmatrix}
x \\
y \\
z \\
1
\end{pmatrix}
\)
[PR]
まとめ
本記事では、gifアニメや静止画を、バウンドするように拡大させる演出を行い、mp4動画ファイルを生成するアプリケーションを公開し、 その使用方法を解説しました。
ポリゴンを回転する行列についても、簡単に解説しています。
また、mp4クリエイターの他バリエーションをこの記事にまとめていますので、よろしければそちらもご活用ください。
補足
- 本記事で生成されたファイルは、悪意のない範囲で自由に使用・改変・解析していただいて問題ありません。ただし、ご自身の判断と責任でお願いします。
- Android版FireFoxなど一部のWebブラウザーは非対応です。確認時点の情報のため改善されている可能性はあります。
- 動画サイズは、縦横それぞれ16の倍数になるよう調整され、640ピクセルより大きい場合は縮小されます。今後変更される可能性はあります。
- 本記事で生成されたmp4ファイルのツール名は「LogicLoversInc.」になります。
- gifファイル生成にjsgifを(ほんの少しだけ改修して)使用しております。感謝！
- (本記事公開後)本記事公開後に公開された記事へのリンクを追加しております。
- (本記事公開後)「安全性」→「プライバシーと安全性」としました
カテゴリー：Webアプリケーション,mp4クリエイター
[PR]