Developer | unshift Inc. / Nauts (@NautsDC) | 主にWebサイトのフロントエンド実装をやっています。WebGLなどWebのグラフィック技術を使った表現が得意です。武蔵野美術大学 デザイン情報学科 特別講師。
日本
Joined November 2017
- Tweets7.3K
- Following2.5K
- Followers7.4K
- Likes27.7K
Pinned Tweet
IE3さんの展示「Make it first.」にて、ゲストアーティストとして参加させていただいました！
通常、展示作品は遠くから目に入ったときに「あれはなんだろうな」と思って近づいてきて詳細をよく見る、という流れになりますが
この作品は、離れている状態ではモノクロの映像・写真が流れており、気になって近づくとエフェクトが強くかかる ＋ 色相・彩度も変化するので、結局元の映像の色・輪郭がわからなくなります。元の姿は見る人の想像にお任せということで「LEFT TO THE IMAGINATIONS」というタイトルで制作しました。
オンスクリーンの作品でシンプルなギミックなので、仕掛け自体に驚きとかはないんですけど、グラフィックをたくさんかつしっかり作りました。
展示の作品制作に関してはど素人の私を迎え入れていただいたIE3のみなさんに大変感謝です…！ありがとうございました！
#IE3 #mif26
※すみません！ハッシュタグを間違えていたため再投稿しました！
unshift Inc. 第5期お疲れ様でした会。
AI時代に揉まれつつも、柔軟に対応していく所存でございますので、来期もよろしくお願い申し上げます。
コーポレートサイト制作プロジェクトが0.5%くらい進行しています。
せっかくなので、Webで展示作品のエフェクトを体験できるようにしました。
unshift.co.jp/labs/left-to-t…
カメラの入力にエフェクトがかかります。ガッツリ色相を回転しているので、顔色がめちゃくちゃ悪くなったりします。
エフェクトのかかり具合はマウスカーソルの位置 (左右)でかわります。また、左下のプルダウンからエフェクトを選択できるようにしてみました。
カメラ入力にマッチしないエフェクトもあったりしますがあしからず。
#creativecoding #webgl #threejs
IE3さんの展示「Make it first.」にて、ゲストアーティストとして参加させていただいました！
通常、展示作品は遠くから目に入ったときに「あれはなんだろうな」と思って近づいてきて詳細をよく見る、という流れになりますが
この作品は、離れている状態ではモノクロの映像・写真が流れており、気になって近づくとエフェクトが強くかかる ＋ 色相・彩度も変化するので、結局元の映像の色・輪郭がわからなくなります。元の姿は見る人の想像にお任せということで「LEFT TO THE IMAGINATIONS」というタイトルで制作しました。
オンスクリーンの作品でシンプルなギミックなので、仕掛け自体に驚きとかはないんですけど、グラフィックをたくさんかつしっかり作りました。
展示の作品制作に関してはど素人の私を迎え入れていただいたIE3のみなさんに大変感謝です…！ありがとうございました！
#IE3 #mif26
※すみません！ハッシュタグを間違えていたため再投稿しました！
LEFT TO THE IMAGINATIONS エフェクト 20 / 20
Wet Concrete — コンクリートの床に水がかかり、染み込み、乾いていく様子をシミュレーションする。
素材は展示会場である Contrast の入口足元にあるロゴ。設営日に写真を撮り、その日のうちにエフェクトを作成し、初日から運用。突貫で作ったわりにはかなりお気に入り。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 19 / 20
Light Shafts — ステンドグラスや照明など映像の明るい所から、堂内の霞に光の筋が差し込む。筋は画面外の光源から放射状に伸び、色は窓の色のまま。近いほど筋が長く明るく、霞が濃くなり、筋の中には埃が漂う。
素材は旅行で行ったサグラダ・ファミリアの内部の写真。この写真にいわゆるゴッドレイエフェクトが入ったら幻想的になるのではと思い作成。AI が勝手にパーティクルを飛ばし始めた。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 18 / 20
Rain Ripples — 映像を雨の降る水面越しに見せる。水面は波動方程式の高さの場で、雨粒が落ちた所から波紋が広がる。映像は水面の傾きで屈折して揺れ、波の山と谷で色相が逆向きに回る。
素材は旅行で行った金沢駅の写真。そういえば雨が降ったなという安易な考えでエフェクトを作成。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 17 / 20
Sparkle — 映像をグリッドに分け、各マスに細い十字の光芒（キラキラ）を 1 粒ずつ置く。粒の色は映像の色のまま、明るい所ほど大きく、ばらばらの速さで伸び縮みし続ける。重なるほど明るい加算合成。整然と並ぶキラキラはたまにランダムな向きに回転。
花火をもっとキラキラさせたいと思い作成。素材は自宅マンションの自治会主催の花火大会の映像。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 16 / 20
Pillars — 映像を 45 度傾けたグリッドに分け、各マスを柱にして明るい所ほど高く伸ばす。柱はマスごとにばらばらの速さで細かく上下に動き続け、近いほどマスが大きく、柱が高く、揺れも大きくなる。
映像が柱になって立ち上がったらめちゃくちゃ見えにくくなるだろうなと思い作成。素材は渋谷のスクランブル交差点の映像。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 15 / 20
Toy Bricks — 映像をレゴ風のブロックで組み直す。マスごとに映像の色を、現行のレゴの色のいちばん近い色（OKLab で比較）に置き換え、明るい所ほどプレートを高く積む。同じ色・高さが並ぶ所は 1×2・1×4 のブロックにつながる。
素材は沖縄で撮影したシーサーの写真。こういうキャラクターっぽいものに合うエフェクト。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 14 / 20
Paper Strata — 明るさのしきい値で映像を切り抜いた薄い面を何層も重ね、近いほど前後と横に離す。切り口と層どうしの落ち影で、色紙を積み重ねた地形模型のように見える。
素材はベネチア本島の近くにあるブラーノ島の写真。カラフルな建物が立ち並ぶ美しい街並みなのに、このエフェクトだと結局もとの写真がどんな色なのかわからない。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 13 / 20
Cellular Automaton — 映像をマス目に分け、明るさから決めた状態でライフゲームを動かす。遠いとマスが毎世代映像に引き戻されて映像が読め、近づくほど規則が勝って別の模様へ進化。離れると少しずつ映像に戻る。
素材はみなとみらいの大観覧車 コスモクロック 21 の映像。3 回くらいしか乗ったことはない。ライフゲームを映像素材に適用したらどうなるかなと思い作成。このエフェクトは素材を選ぶ。他の素材だと全然マッチせず。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 12 / 20
Strands — 素材の上に毛を生やす。毛は curl ノイズの回転と映像の輪郭の向きを混ぜた流れをたどって伸びるので、渦を巻いても一か所に溜まらない。遠いと短く寝た毛並み、近いほど長く立ち上がって風になびく。
素材は香川・直島にある草間彌生の黄色いかぼちゃの写真。静かな写真なのでダイナミックさを出したいと思い作成。お気に入り。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 11 / 20
Cube Field — 映像を実際の立方体で組み立てる。近づくほど立方体が回転・浮遊・分散し、面の陰影と重なりが変わる。キューブ同士が落とし合うセルフシャドウ付き。
素材は水族館のクラゲの映像。どの水族館にいってもクラゲの水槽があったら絶対に撮ってしまう。ゆらゆらしたものにかくかくしたものを組み合わせたら面白いかなと思い作成。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 10 / 20
Fluid Flow — 小さな格子で流体の速度場を毎フレーム解き、映像をその流線に沿ってなぞる（LIC）。画素は元の位置のまま流れの向きに滲むだけなので構図は崩れない。渦は映像の明暗の塊から生まれる。
素材はローマのコロッセオの写真。ミラノで財布をすられたことは一生忘れない。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs