Baku Hashimoto

橋本 麦

SFPC Day 1 : The layers of computing

It was a first day of the class. After introduced each other and had a lunch, there’s a robot standing in a center of the room (it was apparently Mushon Zer-Aviv, our teacher whether way I looked at it) Taeyoon said we have to ‘program’ the robot to exit the room. However, it didn’t move and just spoke “Can’t compute” when we ordered messages like “move” and “turn left”.

  1. Install packages including sensor, muscle, balancing system
  2. activate them
  3. define walk function as a sequence of moving of joints.
  4. execute walk

Through this session, I realized how I used to a highly abstracted layer of computing everyday. As Mushon said, it was still better that the robot has standard I/O such like the ability of listening and speaking. I reminded of Matz’s talk (the advocator of Ruby) and it was that he had to spend first half year to implement kinds of “cin” and “cout” in Ruby.

And then I assume we discussed the notion of “encapsulation” and “relation of layers in computer”. But my brain was so busy and not enough to understand their English😞

Anyway, it was so inspiring for me.

(btw, we also visited NYC Resister at night near our room and there were stunningly cool geeks and CNC mills.)

Aug 25, 2016

具体性に欠けた形をした食べものはかわいい。「料理」というよりは「材質」みたいな、なんかそういうボワッとしたもの。

ジェネレーティヴに何かする時, 意識すること

  • 直交座標以外の座標系に変換してみる (極座標)
  • (関連して)RGBの各チャンネルではなく, 複合的なパラメーター(HSBなど)に対して操作を加える
  • 値自体ではなく, 値の変化量に操作を加える (速度にlerpを適用)
  • Robert Penner氏のそれ以外の, 別のイージング関数を考えてみる
  • Add, Screen, Overlay, Multiply以外のレイヤーモードを考える
  • 予めPhotoshopでカラーパレットを作っておく. その時, 単に色相違いにするだけでなく, 複数のトーンを組み合わせるようにする (肌色と真っ青, テニスボール色と煉瓦色)
  • 前の値や描画結果に対して差分を加える
  • (関連して)前の描画結果全体をテクスチャとしてbindしてポリゴンを描画してみる
  • リッチ感を出すために加えがちな光学現象のセットを, 別の一貫した物理法則に置き換えてみる (David O’Reilly氏のエッセイ)
  • パラメトリカルに完結させずに, 物撮り素材を使ったり, 1つ1つ手打ちしてみたりする
  • オイラー法のズレ, Z-Fightingなどの浮動小数の丸め込み誤差に由来するグリッチを逆手に取る

After Effectsに求めること (妄想)

  • コンポジション毎にレンダリング設定, 出力パスを保持できる
  • ↑に加えて, 静止画書き出しの設定も保持できる
  • 出力パスのテンプレート文字列に, 日付フォーマット追加
  • コンポジションのレイヤーのフォルダ機能
  • Bool値のキーフレームは, 形状や色で真偽を判別できる
  • プロジェクトファイルごとに, 連番のデフォルトFPSを設定できる
  • レイヤー選択状態でショートカットキーでSpotlight的な小窓が開く. インクリメントサーチでエフェクトを追加できる (C4DのShift+Cに相当)
  • エフェクト&プリセット フォルダ名でも絞り込めるように. (ベンダー名の検索にも対応)
  • レイヤーインスタンス機能. エフェクトを加えた調整レイヤーなどを, そのままインスタンスとして複製でき, 他コンポジションで再利用できる. 元の調整レイヤーを変更すると, インスタンスに反映される.
  • AEP同士のDiff, マージ機能
  • ExtendScript, ES6とCommonJSのサポート
  • コンソールウィンドウ

新しいコンポジションの種類

子コンポジション

普通のコンポジションから, 再利用性を一切抜いたもの. 特定のコンポの中に, 一度のみ使われる.
TCも親コンポに同期していて, プロジェクトパネル上でも親コンポの子要素として表示される. フォルダ機能にも近く, 親コンポのレイヤーパネルの中で, Finderのツリー表示よろしく展開することもできる.

クラスコンポジション

普通のコンポジションは再利用性がある一方, 再利用先のコンポ内でそれぞれに別の見え方になるような設定を個別にできなかった. クラスコンポジションは, よりコンポジションを抽象化することで, そういった問題を解決する. コンポジション自体に, カスタムプロパティを設定できる. 「コントロールエフェクト」をコンポジションに追加できるイメージ. そのプロパティはエクスプレッションを用いてコンポ内のレイヤーのプロパティとひも付けることができる. 再利用先の親コンポから, クラスコンポジションのカスタムプロパティを設定することで, クラスプロパティ内のレイヤーを再利用先から間接的に制御できるようになり, ある種のカプセル化が可能になる.

Jun 18, 2016

メディアアートやcreative codingは, ワークフローや技術へのニッチな興味・研究をファッションライクに表現する捌け口になっている側面もある気がするので, コードをコードとして, 論文を論文として発表出来る人は個人的に煩悩を断ち切っていてかっこいい気がする.

WordPressのテーマをJadePHPで開発

最近Web作る調子上がってきたのでポートフォリオを一新したんですが, gulp, webpack, stylus, ES6, JadePHPあたり使ってつくりました. Jade自体がテンプレートエンジンなんで, WordPressのphpテンプレート関数との相性が悪かったりしますが. そのあたりメモ.

インストール

npmから. gulpで使ったんで, 僕はこっち使った, gulp-jade-php. 書いてある通りだけど, コンパイルしたら拡張子もjade→phpに変わります.

テンプレート

WP側のテンプレート階層を使わず, index.phpから全切り替えしてる. 考え方としては, JadeになるたけPHPを入れず, こまいのは全部関数として別途phpにまとめる. グローバルヘッダーとか, メタ情報とか, 全ページ必ずインクルードするって分かりきってるとこは, Jade側でまとめてやって, 動的に切り替える部分だけget_template_part()使う.

index.jade

- require('includes/view.php');
doctype html
html
    head
        include ./jade/_meta.jade
    body
        include ./jade/_gheader.jade

        .content
            - if (is_page('about')) :
                - get_template_part('page/about');
            - elseif (is_home()) :
                - get_template_part('page/work-list');
            - else :
                - get_template_part('page/post');
            - endif;

        footer.gfooter
            - if (is_single()) :
                - edit_post_link();
            - endif;

        script(src='#{template_path}/js/highlight.pack.js')
        script(src='#{template_path}/js/bootstrap.js')

_meta.jade

meta(name='twitter:image:src' content='<?= og_image(); ?>')

title <? title() ?>

view.php

<?
// ...
function title() {
    echo wp_title('|', true, 'right')  . '麦 : Baku';
}

function og_image() {
    if (is_single() && get_post_type() == 'work') {
        $path = MultiPostThumbnails::get_post_thumbnail_url('work', 'wide');
    } else {
        $path = "/wp-content/themes/baku89-2016/img/ogimage.jpg";
    }
    echo "http://$_SERVER[HTTP_HOST]$path";
}
?>

テンプレート関数使えよ, って感じだけど面倒いからそのまま.

Shortcode

あんま, HTMLの文字列とPHPのコードを "<dl>" . $title . "</dl>"みたいな感じで繋げたくなかったから, Shortcodeも無理やり分離. 例えば.

functions-shortcode.php

<?
// ...
function shortcode_vimeo($atts) {
    extract( shortcode_atts( array(
        'id' => '',
        'src' => null
        ), $atts ));

    $embed_url = "//player.vimeo.com/video/$id?title=0&byline=0&portrait=0&color=ffffff";
    $is_work = get_post_type() == "work";

    ob_start();
    include(locate_template('partials/vimeo.php'));
    return ob_get_clean();
}
add_shortcode('vimeo', 'shortcode_vimeo');
?>

vimeo.jade

一部省略.

a(class='embed embed--vimeo <? if ($is_work) echo "wide" ?>')
    img.full(src='<?= $src ?>') 
        iframe(data-src='<?= $embed_url ?>' frameborder='0' allowfullscreen='' webkitallowfullscreen='' mozallowfullscreen='')
        .center-button
            .center-button__body
                .center-button__text PLAY

phpが公開側フォルダ, jadeがソース系まとめたフォルダに分離しちゃうんは気持ち悪いし, phpもsrc側置いてコピーするのもアリだけど, めんどかったからそのままにした.

OUT OF DOTS

3年振りのOUT OF DOTSでPARKGOLFさんのVJさせて頂きました. DOMMNUEでSetsuya Kurotaniさん, Beyond Code #2でlycoriscorisさんのVJもしつつ, ちょくちょくバージョンアップさせてった感じです.

最近実験してた, Feedback Displacementを無理やりVJしてます. MPYNic Hamiltonリスペクト. 基本VJ用の動画素材作るのが苦痛なので, 僕のiPhoneに入ってた写真を適当に投げ込んでます. どんな画像でも, いい感じに抽象的なグラデーションになるんで面白い.

仕組み的にはoFとGLSL. カメラワークや3DモデルはC4Dから書き出してる. GLSLのビルドをGlslifyってWeb向けのツールでやってみた. Web向けなんで, oFのGLSLで動く組み込み関数で弾かれたりして, まだちょっとやりづらいけど, stackglのリソース使えるんでデカイ. gulpで監視して, ビルド終わったらgulp-oscでoFに通知出してofShaderでリロードしてたら, 比嘉さんに, 普通にファイルの最終更新日時引っ張ってた方が早いって教えてもらった.

VJネタとしてシンプル過ぎてキツかったんと, もっと照明的に気持ちよく効いてくるような作り方をしたいって反省はあるけど, もう少しこの手法を発展させて形にしたいなー思ってます.

SOURCE


Twitter投稿してくれてる人いた.

https://twitter.com/keiji_307/status/725701367851937792

https://twitter.com/keiji_307/status/725699646362816513

Apr 10, 2016

世の中の結構な割合のマナーが, 「別に知らなければ守られなかろうが何とも思わなかったけど, そういうものだと教えられて表面的に従っているうちに, 感情としてマナー違反を見るとムカつくようになってしまった人達」をムカつかせないために維持されているし, それがマナーを守る根拠たりえるのがこわい.

結構な割合の性的魅力が, 「 天敵にくわれない程度に足が速い」みたいな実利的効用以上に, 「その形質がその社会において性的魅力としてみなされている」ということ自体がそれを性的魅力たらしめている, ってのも似てる気がする.

こういうのをうまく抽象化して説明できる知識がないから辛いのだけど, なんてか, 最初は何か直接意味のある所から始まった概念が, フィードバック性を持ってその概念を補強し続けるうちに形だけが残って一人歩きしていくような現象が全体的にこわい.
非常識な行為を, 「非常識である」ということを根拠に批判するのとか, よくよく考えたらすごく奇妙なことで.

とはいっても, クチャラーへの嫌悪感が, たまたまそういう文化に生まれたから後天的に形成されたものに過ぎないんよって説明されたとしても, クチャラーが嫌なんは変わらないけど.

Moodhut

MoodHutのライブイベント, VJした. Cloudfaceと, 何かと話題のPowder.

Powder × Baku Hashimoto #Powder #BakuHashimoto #Cloudface #INSstudio

A post shared by Hiromi Matsubara / Romy (@hiromi_matsubara) on

うちのオフィスでやったんで, なんかオフィスっぽい感じにしたくて. group_inou – EYEの制作でも活躍した, ENTTEC DMX USB PROを使って, DMX経由で照明のスイッチ入れたり切ったり. 電圧がたまんないとレイテンシが発生するみたいな変な事もあったけど面白かった. 相当蛍光管に悪いことをしてしてしまったけど. アイディア自体は事務所の人の提案.

ディスプレイの方は, 全画面でブラウザ表示させて, WebSocketで色データ送るだけ. 普通にグラデーションとかの映像素材作って, 各ディスプレイ側で, 映像のどの画素をスポイトするかを位置でしてやる. 何個でもディスプレイ増やせるから, 色々発展出来そうな気がする.

SOURCE

ビジュアルプログラミング

デザイナーも映像作家もなにかかしらの形でプログラムにお世話になってて, FCPもAdobe CCもC4Dも, 拡大解釈すると全部ある種のビジュアルプログラミングだと思うので, あとはどこまで低レベルまで自分でコントロールしたいと思うか, の違いでしかないと感じる.

映像生成するのにアセンブラから書くのは流石にしんどいので, 誰かが作ったプログラムの限定的なパラメーターを調整することでグラフィックを作ってる, ということだと思うのけど, 結局どの部分をカプセル化して, どの部分をデザイナーがコントロール出来るようにUIに落とすかは, 結局プログラムの設計思想に依る所でしかなくて.

一番怖いのは, そうとも知らずに, そうして外部化されたパラメータだけがコントロールできる全てだと勘違いしてしまうことで, 開発者都合で設定されている制約を制約として意識すらしないことだと思う.

例えば映像ソフトの殆どは, 並列処理がし易いように, 前後のフレームの状態に対して差分を加えるような処理を許さない仕様になっているがゆえにクレイアニメのような作り方をデジタルじゃできなかったりする. UVリマップやディスプレイスメントも, 大概ピクセルのオフセットの方向がX, Y軸に限定されていて, 例えば2つのチャンネルを極座標方向の変形として処理するだけで凄い面白いグラフィックが出来るのかもしれないのに, その可能性にすら気付けなかったり.

そういうアレコレが, なんでこれが出来ないの!? といった調子でいちいちストレスに感じるから, AEとかCinema4Dをそのまま使うより, 少しだけ低レベルな部分から弄ろうとしているだけの話だし, それすらもopenFrameworksだったりWebGLだったり, 誰かが作ったシステムのごくごく高級な部分を触ってるだけに過ぎなくて.

「プログラムで映像作るニュージェネ」みたいな印象を持って頂けること自体は別に否定するつもりは無いし, まずそもそも自分を認知して頂けるだけで有り難いの一方で, 自分の中では別にプログラミングと映像の融合といったものを意識してるつもりは無いし(とか言ってしまうのは少し確信的でヤラシイけど), そもそも理系と文系, デザイン思考とエンジニア思考を対立的に捉えてしまう時点で, 可能性を狭めているなぁと, ふんわりと感じている, という話でした.