Baku Hashimoto

橋本 麦

目に焼きつくような明るい残像のコンポジット

リールの冒頭の、目に焼きつくような残像のコンポジットの仕方。最近またこのプロジェクトをいじる機会があって、自分でもやり方を忘れていたのでメモ。


こいつが元素材

その上からエコーをかけた

こいつを「カラー」で合成。

で、背景に

をおいてやると


完成。

エコーエフェクト

レイヤー

上から「エコーかけたやつ」「通常」「背景」
(背景が乗算になっていたけど、多分関係ない)

「カラー」は、下のレイヤーの輝度だけを残しつつ、色相と彩度を適用するという描画モードらしいです。


とにかく案件ごとにルックをガラリと変えていくのが楽しいみたい。多分、実作業時間の2割くらいはルックの試行錯誤に費しているような気もする。さすがに大げさかな…。

せっかく考えたコンポジットの手法が誰にも知られずに終わるのも勿体無いので、出来れば毎案件何かかしら備忘録的に書き留めていくのを習慣づけられたら良いなーって思ってる。

ギーク女子

アイドルやレイヤー、ミスキャンにプロウグラミング能力をちょい足しした感じじゃなくて、喪女でナードなギーク女子にこそ活躍して欲しい キャッチーな奴が目立っていくんじゃなくて、ただひとつ成果物のみで評価されるような空気感が広まって欲しい

と思ったけども、チーム内に居ることによって上がる男性の士気と生産性で、コーディング能力の大した事なさをペイ出来るだけの顔の良さがあったら結果的に貢献している事になるのか、とも考えちゃって だけどそういうのなんか、すごく悔しい

FITC Tokyo 2015

mag0c0roさんがシェアされてたFITCのOP、久々にグッときた。この動画をツマミに一晩飲めるくらい語れるネタ多いし、興奮して寝れなくなった。インターステラーの重力レンズ効果初めて見た時の8割くらいソワソワする。

互恵的利他主義

制作で作ったツールをサクッとGitHubに上げたり, 作品やプロジェクトファイルをCCライセンスで公開しちゃう感じが,文化人とかアーティスト然としているよりも自分の中ではずっとカッコ良くて

柴幸男も去年あたり全戯曲アップしてたけど,そういう互恵的利他主義な空気感はハッカー文化やフリーカルチャー界隈に限らずどんどん伝染していけば良いなとか思ってる

プロジェクションマッピング制作支援ツールつくった

スクリーンの形状が複雑なプロジェクションマッピングの制作は、その展開図の上に映像をのせていくわけですが、立体スクリーンに投影された所をリアルタイムで確認しながらコンポジットできたら便利だなーと思い、ツールをつくりました。久々のoFです。

VirtualMapper ( source )

ネーミングセンス無くてすみません。(良い案あったら教えてください)

要するに、UV付きのモデルデータを読み込んで、Syphon(ソフト間で映像をやりとりするためのオープン規格)経由で送信された映像をテクスチャとしてリアルタイム表示するというツールです。

C4Dでモデルデータの書き出し、Syphonの出力をAfter Effectsから行った時の画面キャプチャです。

たいていのVJソフトやビジュアルプログラミング環境はSyphonに対応しています。AEは、AESyphonというプラグインをインストールすれば出力可能です。(シェアウェアですが、解像度制限のかかった試用版もあります)

投影時のキャリブレーションツールはたくさん出回っていますが、制作時に便利なツールはほとんど無くて。結構今でも展開図から組み上がった所を脳内補完しながら、力技で作っているケースが多い気がします。現場テストになって初めて、少し別角度から観ると全然飛び出て見えない、って分かってしんどい思いを何度かしているので、もし次制作する機会があったら大分楽になるかなぁと思ってます。

バグや不具合、アイディアなどあったらissueかTwitterにリプライください。僕自身が必要なひと通りの機能は実装し終えたとはいえ、このまま放置するのも勿体無いので、もし一緒に開発してくださる方がいたらとても嬉しいです。

今後は制作時につくった汎用性の高いリソースやツールはバシバシ共有していきたいです。今年の目標です。

フラットデザイン


source: 小さな喫茶店:WEB2.0風 ボタン アイコン素材 (作ってみた。) – livedoor Blog(ブログ)

一時期のWeb2.0的デザインの過度な「リッチ感」に対する反省と、ユーザーの学習によってデスクトップメタファーやスキューモーフィズム自体が用済みになったことからの反動で生まれたトレンドが、フラットデザインで。削ぎ落とすべきは「必要のないリッチ要素」で、決して無差別にフラットにすれば良いって訳じゃないと思う。

何が言いたいかというと、物理的なヒントは残した方がいいんじゃないかなぁ、って話。

ボタンはやっぱり飛び出て見えた方が良い。「あ、ここ押し込めそう」って直感的に分かるから。上に重なったパネルにはドロップシャドウがあったほうが良い。「影が落ちてる方が下なんだな」と分かるから。上下にオーバーフローしたボックスの内側にもシャドウが欲しい。「まだ上下に隠れて見えない部分があるんだな」と分かるから。

ブリーフケースやメモ帳というメタファーが必要でなくなったとしても、テカリや鏡面反射は余計だったとしても、物理的な性質・位置関係によるヒントはもうしばらく有用な気がする。だって「ただの文字だけど、SUBMITって文字的に多分ここはボタンだな?」って類推を効かせるより、いかにも「ボタン!」って感じがしてた方がずっと分かりやすいじゃん。

そういう意味で、Material Designは、フラットデザインのミニマリズムと、物理的ヒントがもたらす直感性のイイトコ取りしてて良さある。


Webデザインやってると、やれpushStateだの、CSS3 Transitionだの、シングルページだの、血眼になって新しいトレンドを追いかけがちだけど、ぶっちゃけ素人目には、そういう1・2年単位で移ろう「イケてるWebデザイン」なんか気にもとめない気がする。

むしろ、僕個人は、そういう「イケてる感」を醸したい時って大概、同業者への「ちゃんとトレンドについてこれてますよ」アピールをしたいって煩悩に支配されてる時だったりする。

そんなことよか、ブラウザゲーでもない普通のサイトにローディング画面なんて付いてほしくないし、これはボタンか? リンクか? テキストボックスか? とかいちいち迷うくらいならはっきり見た目に差をつけて欲しいし、なにより軽いページであってほしい、ってのが一般ピープルの本音なんじゃないかなと思った。

ロングシャドウデザインは論外。

MoGraphの複製数を増やした時,新しいクローンをニョキっと生やす

タイトルわかりづらいですが…

MoGraphの複製数を増やした時に,いきなりクローンが現れるのではなく,徐々に大きくなりながら現れて欲しい時のためのスクリプトです.今やってる制作で作りました.

project file

import c4d
from c4d.modules import mograph as mo

prevCnt = 0

def main():
    global prevCnt

    md = mo.GeGetMoData(op)
    if md==None: return False

    cnt = md.GetCount()
    marr = md.GetArray( c4d.MODATA_MATRIX )

    if prevCnt < cnt :
        for i in xrange( prevCnt, cnt ) :
            marr[i].Scale( 0.001 )

    md.SetArray( c4d.MODATA_MATRIX, marr, True )
    prevCnt = cnt
    return True

ディレイエフェクタは,スケールが0からの補間の場合変な挙動をするのですが,現在のフレームで新しく登場したクローンのスケールを1フレームだけごく小さな数に設定する事で,補完が上手く効くようになります.

上の動画みたいな単純な例なら複製数を変えずにボリュームエフェクタでマスクをかけるような感覚でスケール -0.999 を適用したほうが早い気もしますが,頂点数の変わるポリゴンやマトリクスに配置した場合,例えばThinking Particlesと併用した時や,伸長するスプラインに配置した時などに使えそうです.

最近C4DのPythonイジってないからかなり忘れてる…

Three.jsでセル・オートマトン

Fuse

事務所の飲みで,当時お気に入りだったセル・オートマトンのシミュレーターアプリ”Sablo“を上司にディスられたので,「おもしろいセル・オートマトンつくったる」と一念発起して作ったのがこれ.導火線に火付けて,ダイナマイトを爆発させられます.

GLSL触り始めてからGPGPU的な事をやりたくなってきたのもあって,かなり楽しかったです.

「前のフレームの計算結果を利用して新しいフレームを計算する」という部分で突っかかったので,一応メモ.

shader.uniforms.buffer.value = this.srcRenderTarget;
renderer.render( dstRenderTarget );

var swap = srcRenderTarget;
srcRenderTarget = dstRenderTarget;
dstRenderTarget = swap;

WebGLRenderTargetはそのままテクスチャとしても扱えるので,2つターゲットを用意してやって,前フレームで描画に使ったのRenderTargetをシェーダのuniformsにセットしてやりつつ,お互いに代わる代わるオフスクリーン描画してあげれば良いみたいです.このサイトのソースを参考にしています. WebGL Cellular Automaton


無駄に楽しくなっちゃって投稿機能も付けてしまいました.MySQLがPHPのgdも勉強できたので結果、良かったということで… ちょこちょことピカチュウやカップル,チンコなどが投稿されてるんだけど,個人的にはこれが好きです.

img
Fuse #27

曲率

非ユークリッド幾何学自体はエッシャーが「円の極限」でモチーフにしていた位だし、ジェネラティブアート界隈でもそこそこの頻度で引用されてるモチーフだけど、大体2次元で終わることが多い上に、曲率が一定の空間しか扱っていなかったりする。

以前3次元で曲率がゼロじゃない空間の見え方をシミュレーションする「Curved Space」ってソフト見つけた時、めちゃクソカッコええな思ったっけか。

ところがインターステラは、曲率が一定じゃない空間での光の歪み方を正確にシミュレートした上に、2時間の映画表現に落としこんでいるっていう所がありえない程カッコイイし、この映画でしか活用できなさそうな超ニッチなレンダラーを開発した人を尊敬するし、こう、色々置いて行かれた気がして悲しい。

とか言っちゃう自分の衒学趣味はいい加減自覚はしてるけど、とにかくインターステラ楽しみ

Three.jsで4次元立体

Polychoron

4次元立体の3次元へのステレオグラフ射影をシェーダで書いてみました.dimensionsというWebで見れる数学教育番組のCGが好きだったので自分でも作ってみようと.

GLSLでは4次までの行列しか扱えないので,アフィン変換は出来ませんが,今回は回転しか扱わなかったので4次の回転行列だけで事足りました.

uniform mat4 matrix4D;
uniform float distance;
uniform int stereograph;

attribute float positionW;

void main() {

    // transform in 4D
    vec4 tPosition = matrix4D * vec4( position, positionW );

    tPosition = normalize( tPosition );

    // perspective projection from [0, 0, 0, distance] to XYZ hyperplane
    float d = distance / ( distance - tPosition.w );

    vec3 pPosition = tPosition.xyz * d;

    gl_Position = projectionMatrix * modelViewMatrix * vec4( pPosition, 1.0 );
}

「4次元空間内での座標変換」→「3次元への投影」→「3次元空間内での座標変換」 + 「2次元への投影」と, 2回座標変換と投影が必要になりますが,基本的な事は全く同じです.

この調子で色んな立体をつくろうとおもった矢先,jenn3dというツールを発見してしまいまして.こっちからフォークして,自分なりに弄くり回した方が間違いなさそう.

ちなみにjenn3dからstl書き出ししたモデルデータを使って #everyday 作りました.

img

これを使ってモーショングラフィックスできたらなーと思ってます.

ちなみにFlat Torusがお気に入り.