WEBブラウザ上で表現できるマルチ映像の制作
- Takeru Komori
- Movie , Shape Animation , Web Design , Mulch Pattern
- http://normotion.html.xdomain.jp
- Presentation Page
- https://normotion.github.io/prog-8.github.io/
Overview
Introduction / What is This
- Normotion Graphicsはブラウザ上を利用したマルチ映像と、その映像を展示するWEBサイトを制作するプロジェクトです。
Background and Purpose
- Instagramの#mortiongraphicsのタグには323万件の投稿がされている。
- 私もモーショングラフィクスを検索して眺める事があるが、多様なジャンルの映像があるため、その中から自分の好きな映像を探すのが難しい。
- 自分の好きなテイストの作品に特化したコンテンツがあればいいなと思い、映像を制作していく中で、WEBサイトを大きなコンポジションがわりに使用したギャラリーサイトがあれば面白いのではと思った。
Concept
- Webを映像表現の新たな舞台としたインタラクティブな映像体験ができる。
- シンプルな図形のアニメーションが複数あるマルチ映像。
- 映像のテイストに合わせたミニマルな雰囲気のサイト。
- 映像の色を制限して統一感を出す。
Output
Tools
illustrator , dreamwever
Term
Conclusion / Summary
Survey
Present Status
項目別のページの映像の本数が少ない
どんなサイトなのか伝わりやすくするためにサイトの世界観を作り込む必要がある
Precedent
インタラクティブなサイトの先行事例
https://canvas.jjangik.com/?ckattempt=1
Technique / Technology
Project Management
・10月-1週目
カラーチェンジ実装(〆)
映像の追加
・10月-2週目
映像の追加
ブラッシュアップ
概要作成
・10月-3週目
ブラッシュアップ
概要作成
・10月-4週目
概要作成
作品提出
ToDo
- 操作方法が表示されるポップアップウィンドウ(?)を作りたい
-個別ページ制作 - 個別ページの映像を増やす
- 右クリックでの機能を増やしたい(向きが変わる、色の反転など...?)
NotToDo
2021.11.10
進捗
概要のブラッシュアップ
https://drive.google.com/file/d/1UCQ8Hd4kbKU3BduXIeIm-4nR3wZA7K-D/view?usp=sharing
プレゼンページの整理
小森丈/Presentation
モックアップの作成
2021.12.26
進捗
映像消去を取り入れるのであれば操作方法は別にしたほうが良い
メニューが目立ちすぎている感じがする
無彩色にする、サイズを小さくなど試してみる
2021.11.4
進捗
概要作成
https://drive.google.com/file/d/1UCQ8Hd4kbKU3BduXIeIm-4nR3wZA7K-D/view?usp=sharing
ナイトモードの不具合を修正
SVGパスを直接書き込むことでクリック時の色の変更に対応できるようにした
2021.11.3
進捗
ナイトモードの不具合を修正
画像の色の変更が効かない箇所が一部ある
2021.10.28
進捗
レイアウトの微調整
個別ページのレイアウト調整
ナイトモード試作
→CSSメソッドでフィルターを付与しているが、
.toggleClassで切り替える方法にしたい
- memo
css 基本のやつから上で、強調させたい(例外)のを下に
変数予約語
2021.10.20
memo
設定項目はナビボタンに格納する
2021.10.15
memo
映像スピードをJavascriptで変更
スローはコマ数が足りないので一番遅いスピードから早回しする。
メニューのサイズはもう少し小さくしても良いかも
2021.10.08
memo
映像制作のヒント
・時間を変える
・線の太さを変えるなど
2021.10.07
進捗
リロード時に映像がランダムで表示される仕様に変更した
https://ecmemo.net/jquery-shuffle
memo
直感的な操作ができるように、矢印ボタンで列数を変更できるようにしたい
2021.10.05
進捗
画面幅によって映像の列数が変化する機能
クリックで任意の映像を消せる機能の2つを新たに追加した
丸、四角、三角の映像を1種類づつ試作した
作品に入れ込んでみて違和感がなければ3色展開にしようと思う
2021.10.01
進捗
カラーチェンジの実装完了
クリックで映像の色が変わるようになった。
memo
前期から大きなアップデートがないので分かりやすい変化を作る必要がある(?)
モックアップを制作し展開事例を紹介する
映像を多くストックし、リロード時にランダムで映像を読み込むようにする
配列変数
let fileNameでファイルを読み込ませてランダムで並べさせる
https://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/Syntax
https://koichi-inoue.github.io/JQ_ImageSwitcher/script.js
https://koichi-inoue.github.io/JQ_ImageSwitcher/
2021.09.29
memo
個別ページの作成、アップロード
border、other shapesはそのままの並べ方で新色を追加する方向性でも良いと思ったが、circleのページの映像の並べ方はもう少し考えようと思う。
2021.09.24
memo
拡大時のレイアウト崩れを防ぐために高さの調整を行った。
#canvas{height : auto}
2021.09.20
操作ガイドのデザイン例や追加する映像の調査