Zenn
Open69

ゲーム・アニメ・SFに出てきそうなUI関連、面白い・楽しい見た目を作れそうなもの（エフェクト、魔法、。。。）

ピン留めされたアイテム
Yosuke ToyotaYosuke Toyota

↓こちらのスクラップにも関連ネタがあるかも。
●気になる p5.js・Processing に関するネタ（作品ツイートとは別）
　https://zenn.dev/youtoy/scraps/0a63154bfa6da8

●気になる MediaPipe関連の作品のツイートをメモしていく【2021年5月〜】
　https://zenn.dev/youtoy/scraps/d7d1d8a41be55d

●映像・動画系のネタ（他と重複しなそうなやつ）
　https://zenn.dev/youtoy/scraps/5d20e8ee944ea1

↓似た方向ものがあるかも
●プログラムでの描画や画像編集ソフトで光・グロー・光らせる系、パーティクルを扱う話も
　https://zenn.dev/youtoy/scraps/b532a1ddf5e09e

Yosuke ToyotaYosuke Toyota

●SF映画から学ぶ未来感のあるUIデザインの特徴とは？ - デザインのたれ
　http://designote.hatenablog.com/entry/2016/10/04/184315

こうやって集めてみると、以下の共通点があることがわかりました。

全体的にブルーorホワイト系の単色UIでクールな印象のものが多い（グリーン系もあるけど、昔のPCぽいのかな）
注目させる箇所や動きに暖色系のアクセントカラーを使う（ブルー系に、1〜2色プラスしているものが多い）
実写映像にオーバレイするUIはホワイト系が多い
ディスプレイが大型で、まるでコックピットのように画面に表示される情報量が多くて細かい（未来はビッグデータ、センシング社会だから？）
複数の情報がそれぞれスクロールしたり、回転したり個別に動いている
情報の境界はただの枠線のみで、面は塗られていないものが多い（多くがブラック）

Yosuke ToyotaYosuke Toyota

●フィクションに登場するUIデザインのまとめサイト | NegativeMindException
　https://blog.negativemind.com/2016/02/27/fake-user-interfaces/

FUIとは？
Fantasy User Interfaces, Fictional User Interfaces, Fake User Interfaces, Futuristic User Interfaces, Film User Interfaces, Future User Interfacesなど、Fが何の略なのかに関わらず、人気映画やテレビ番組の登場するユーザーインターフェース(UI)やヘッドアップディスプレイ(HUD)はFUIと言えます。
ほとんどの場合、FUIは実際のコンピュータプログラムではなく、ポストプロダクションで後から合成された単なるアニメーションです。これらは Adobe Illustrator, Adobe After Effects, Maxon Cinema 4Dといったソフトウェアでデザインされています。

Yosuke ToyotaYosuke Toyota

制作ツールと、それによって作られたサンプル

●Effekseer - サンプルエフェクト
　http://effekseer.github.io/jp/contribute.html
●Effekseer - エフェクト制作ツール
　https://effekseer.github.io/jp/index.html

●エフェクト制作ツール「Effekseer」について + 他色々 - Qiita
　https://qiita.com/ueshita/items/12f536a7cfa1564da8be

Effekseer のハッシュタグ検索。
　https://twitter.com/hashtag/Effekseer?src=hashtag_click&f=live

公式Twitterアカウント
https://twitter.com/Effekseer/status/1388481431781867524

Yosuke ToyotaYosuke Toyota

●エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成 - ICS MEDIA
　https://ics.media/entry/8674/
●エフェクト作成入門講座 Effekseer編 リング描画を使った乱れ斬りエフェクトの作成 - ICS MEDIA
　https://ics.media/entry/9270/
●エフェクト作成入門講座 Effekseer編 Fカーブを使った吹雪エフェクトの作成 - ICS MEDIA
　https://ics.media/entry/10377/
●エフェクト作成入門講座 Effekseer編 ゆがみ効果を使ったトランジションエフェクトの作成 - ICS MEDIA
　https://ics.media/entry/12467/
●エフェクト作成ツールのEffekseerがWebGLに対応。Web表現の新兵器となるか - ICS MEDIA
　https://ics.media/entry/15745/

Yosuke ToyotaYosuke Toyota

●tensorflow.jsとWebRTCを組み合わせて、プライバシー保護のビデオチャットを作ってみた（前編） - Qiita
　https://qiita.com/massie_g/items/af3f8eb1e2bf5e807ba6
●bodypix_ayame/video_mask.html at master · mganeko/bodypix_ayame
　https://github.com/mganeko/bodypix_ayame/blob/master/video_mask.html
●BodyPix
　https://mganeko.github.io/bodypix_ayame/video_mask.html

●Tensorflow.jsのBodyPix 2.0を使ってみた｜PARTY｜note
　https://note.com/prty/n/ne2d2090148dc

●JavaScriptでもバーチャル背景する - console.lealog();
　https://lealog.hateblo.jp/entry/2020/02/13/100329

●TensorFlow.js モデル
　https://www.tensorflow.org/js/models?hl=ja

Yosuke ToyotaYosuke Toyota

●PlayCanvasでH2MDを使ってみた - Qiita
　https://qiita.com/sutobu000/items/fa7a7341a4399b71e95d

●HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］ － Publickey
　https://www.publickey1.jp/blog/15/html5_canvasjavascriptpch2mdpr.html

●H2MD チュートリアル. WEBやPC・モバイルアプリで動画やアルファ動画（透過情報を持った動画）をプログ… | by Hitoshi SHINABE | axip | Medium
　https://medium.com/axip/h2md-チュートリアル-89c409d7f47e

Yosuke ToyotaYosuke Toyota

●CANVASでドキドキする「アルファマスクアニメーション」を作ろう！ | 株式会社LIG
　https://liginc.co.jp/419218

●FFmpegで WebM の半透過動画を作成し、Chromeで再生する - 自習室
　http://izmiz.hateblo.jp/entry/2015/01/09/214817

●Transparent Video on the Web: Chrome and Safari with Webm/HEVC
　https://www.rotato.app/read/transparent-videos-for-the-web

●透過付きの動画ファイル(WebM)の作成方法 - 強火で進め
　https://nakamura001.hatenablog.com/entry/20170403/1491218822
●WebMAlphaSample/WebM at master · nakamura001/WebMAlphaSample
　https://github.com/nakamura001/WebMAlphaSample/tree/master/WebM

ffmpeg -i ？？？？.avi -crf 10 -b:v 1M ？？？？.webm
ffmpeg -r 60 -i sa%05d.png output2.webm

●MacでAutomatorを使わずファイル名に0が付いた連番を付ける方法 | iwb.jp
　https://iwb.jp/mac-automator-unused-files-rename-zero-serial-number/

●reference | texture()
　https://p5js.org/reference/#/p5/texture
●examples | p5.js Video Canvas
　https://p5js.org/examples/dom-video-canvas.html

Yosuke ToyotaYosuke Toyota

●配信画面の「枠」はどうやって付ける？オーバーレイで画面を作る方法 - 新・VIPで初心者がゲーム実況するには
　https://vip-jikkyo.net/stream-overlay-guides

●【無料配布】ゲーム配信用アニメーションオーバーレイ：ダブルライン【Vtuber向け】 - たいらの電脳ラボ - BOOTH
　https://booth.pm/ja/items/2326661

●Streamlabs OBSのテーマ・オーバーレイで、配信画面をカスタマイズする方法 - 新・VIPで初心者がゲーム実況するには
　https://vip-jikkyo.net/slobs-overlays

●ゲーム実況向け「配信用オーバーレイ（画面枠）」の作成＆素材集め方法解説　おすすめジェネレーターも紹介！
　https://quest-log.com/overlay-frame-edit/

Yosuke ToyotaYosuke Toyota

●本多大和 honda yamatoさんはTwitterを使っています 「しくみの図 https://t.co/1HbKZ1FOnd」 / Twitter
　https://twitter.com/calmbooks/status/1372930048550866947
●本多大和 honda yamatoさんはTwitterを使っています 「映像は広角のプロジェクターで床面に投影。再帰性反射性質のあるシートの上に置いた物の形をKinect（赤外線カメラとRGBカメラ）で認識しています👀 https://t.co/pDIj6DQwcn」 / Twitter
　https://twitter.com/calmbooks/status/1372890015982776327

Yosuke ToyotaYosuke Toyota

●Intel RealSense Tracking Camera T265 - スイッチサイエンス
　https://www.switch-science.com/catalog/5424/

●RealSense T265 の位置・姿勢情報をOSCで送信し、Processingで受信する - Imaginary Code
　https://kougaku-navi.hatenablog.com/entry/2019/05/15/015055

●osc-js - npm
　https://www.npmjs.com/package/osc-js
●colinbdclark/osc.js: An Open Sound Control (OSC) library for JavaScript that works in both the browser and Node.js
　https://github.com/colinbdclark/osc.js/
●node.jsとProcessingをOSCでやりとり - Qiita
　https://qiita.com/tkyko13/items/d219a509d8367e272055