- 映像の内容
- オレンジ色の魚を形成するモザイクタイルがキャンバスから浮き上がり、波の上を跳ねる弧を描いてアニメーションし、元の位置に暗いシルエットを残した後に元の場所へと戻ります。
- 注目を引く理由
- 2次元の平面を崩して動的な3次元の奥行きを与えることで、硬質で静的なモザイクという媒体に対する鑑賞者の予想を覆し、瞬時の視覚的驚きを生み出します。
- 取り入れる工夫
- 静的な前景要素を奥行きと分離を伴ってアニメーション化し、伝統的な美学をダイナミックなモーショングラフィックスへと昇華させます。
事例一覧へ製品動画を作成
ガラスと金箔のモザイクフィルム (WebGL2)
読み込み中…
制作スキル
スキル公開済み
翻訳
ライブラリや画像、フォント、音声ファイルを一切使用せず、WebGL2とプレーンなJavaScriptを用いて、単一のHTMLファイルとして80秒の正方形アニメーションフィルムを作成してください。タイルの接着がされていないガラスと金箔の壁面モザイクのように見せ、タイルが持ち上がり、反転し、飛び回り、カチッと元の位置にはまるようにします。人物や動物などの造形はタイルの群れで表現され、例えば魚が泳ぐ時はそのタイル群が泳ぐように動きます。シーン分析
5- 映像の内容
- カモメと帆船のタイル群がモザイク平面から剥がれ、金色の背景に対して優雅に浮遊・傾斜しながら飛行したあと、元の位置にカチッと収まります。
- 注目を引く理由
- 異なる軌道を描く複数の分離要素を連動させることで、空間的な複雑性を高め、遊び心のある物語的な推進力を生み出します。
- 取り入れる工夫
- 異なる軌跡を描く複数の動的コンポーネントをレイヤー化し、視覚的な単調さを防いで観客の関心を持続させます。
- 映像の内容
- 濃い青と白の輝くタイルが円形に広がりながら温かい金色の太陽光と空に置き換わり、昼から星降る夜の海景へとシームレスに変化します。
- 注目を引く理由
- 幾何学的な広がりを持つ波によるテーマ的な環境変化が、ハードカットを用いることなく劇的なムードの移り変わりを生み出します。
- 取り入れる工夫
- 粒子やタイルの置換ウェーブを活用し、単一のカメラフレーム内でライティング、カラーパレット、環境を滑らかに遷移させます。
- 映像の内容
- 散りばめられた星明かりのタイルが集まって精緻な飛翔する鶴へと姿を変え、暗い夜空を滑空した後に再び星々へと溶け込みます。
- 注目を引く理由
- 抽象的な粒子を明確な具象的生物へと変化させることで、心地よいパターン認識の瞬間と詩的なストーリーテリングを提供します。
- 取り入れる工夫
- 分散した粒子要素を認識可能な有機的シルエットへとグループ化し、二次的なキャラクターや感情的な共鳴を導入します。
- 映像の内容
- モザイク全体が左上隅から崩壊し、色とりどりのタイルによる高密度の中心渦へと巻き込まれた後、再び広がって元の海辺の絵を再構築します。
- 注目を引く理由
- 構図全体を混沌とした渦へと解体することで、おなじみの安定状態へと収束する前のエネルギッシュなクライマックスとして機能します。
- 取り入れる工夫
- シーン全体を中心的な動的運動へと分解し、その後素早く秩序に戻すことで、視覚的な見どころを極限まで高めます。