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
※すみません！ハッシュタグを間違えていたため再投稿しました！
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
一旦使ってみる。ぜひ私のコードも入力してお使いくださいませ。
パーソナルAIエージェント「Muse」をチェックしてみよう。参加後48時間以内に[設定]で私のコードを利用すると、私たち両方が10億のMuseトークンを獲得できます。
コード: GNY1QK
muse.ai/join
LEFT TO THE IMAGINATIONS エフェクト 9 / 20
Glyph — 映像を半角 ASCII 文字で描き直す。95 文字の半角 ASCII を描いたときのインクの量で並べ、映像の濃さに合う文字を選ぶ。はっきりした輪郭には向きに合った - / | \ を置き、細部の多い所ほど小さな文字に分割。
素材は厳島神社の鳥居の写真。神社の鳥居と ASCII アートというマッチしなさそうなものを組み合わせたら面白いかなと思い作成。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 8 / 20
Spiral Line — 1 本の渦巻き線の太さだけで映像を描く。明るい所ほど線が太く、線の色は映像の色のまま。遠いと 200 巻きの細かな渦で、近づくほど 18 巻きまで粗くなる。渦の中心はゆっくり漂い、線はわずかに歪み続ける。
素材は、数年前に NY に行って NBA を観戦した Madison Square Garden の写真。当時ニックスは弱かったけど、その日はブレイザーズといい試合をして面白かったなぁ。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 7 / 20
Truchet — 四分円の弧を描いたタイル（Truchet タイル）をつなげた迷路で描き直す。弧の向きを映像の輪郭から選ぶので、迷路の流れが被写体の形になり、つながった弧に沿って光の粒が流れる。タイルがたまにくるくる。
素材は初めて一人で海外旅行（ロンドン）へ行ったときに撮影した Westminster Station の看板の写真。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 6 / 20
Penrose — de Bruijn の五重格子で作る、周期を持たないペンローズタイル。格子のずれを動かして菱形がパタッと組み変わり続ける（フェイゾン・フリップ）。5 次元格子から持ち上げた段々の面として陰影を付け、積み木のような立体に。
夜景がきれいに見えるエフェクトを模索してできたのがこれ。素材は昔宿泊したホテルから撮影した明石海峡大橋の写真。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 5 / 20
Oil Paint — Anisotropic Kuwahara フィルタで、輪郭を残したまま細部を絵の具の塊にする。筆は輪郭の向きに沿った楕円。仕上げに絵の具の盛り上がりと筆の毛の跡、キャンバスの布目を光で浮かび上がらせる。
素材は地元いたばしの花火大会の映像。花火でやったらきれいになるかなと試したエフェクト。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
LEFT TO THE IMAGINATIONS エフェクト 4 / 20
Delaunay Glass — 映像の輪郭（Sobel）の上に頂点を落とし、ドロネー三角形分割したガラス片で描き直す。ガラス片は被写体の輪郭に沿って割れ、近づくほど大きく、角が丸くなる。
素材は新卒の会社を退職したあとに一人でいった京都の清水の舞台。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
つくるものも投稿のしかたも田中さんの影響を受けまくってる。そしてこないだ聞いた田中さんに聞いたAIの使い方もパクろうとしている。
Hilbert Census
ヒルベルト曲線で1次元アドレス列を2次元に敷いたセルマップ。セル・オートマトン的な成長/衰退がときに局所的な『地区の発展』のような塊として現れ、ズーム切替で全セルが分裂/統合を繰り返す。
#boucle #fridaydebugview #creativecoding
LEFT TO THE IMAGINATIONS エフェクト 3 / 20
Halftone — 印刷の網点で描き直す。CMYK の 4 版を減法混色。網点の並びは映像の輪郭の向きに沿い、平坦な所ほど粗くなる。
網点は丸だけだと工夫がないと思ったので、丸・四角・ひし形・十字・三角形・市松の 6 種類をランダムに混ぜた。静止画に静的なエフェクトだともたないので、つねにちょこちょこ動いている。
素材はいつかの初詣で行った豪徳寺の猫の写真。
#creativecoding #webgl #threejs
エフェクトは20種類作っており、写真・映像素材は過去に自分が撮ったものをつかっています。それらの素材に合うようなエフェクトを制作してみたので、せっかくなので全部紹介していきます。
まずはタイトル。タイトルもシーンの一つになっていて、20種類のエフェクトからランダムで選ばれます。例として4つのせてみました。
このあとこのスレッドにぶら下げていく形で紹介します。
#creativecoding #webgl #threejs
Takumi HASEGAWA (unshift Inc.) retweeted
iumでは現在アシスタントデザイナーを募集しております！詳細はWebサイトよりご確認ください✨
ium.jp/recruit/
