Baku Hashimoto

橋本 麦

REEL 2017のコンポジットメモ

リールのタイトル位でしか自分の本当に今試したいことは出来ないな〜って感じなので, 毎回妙に力んでしまう. 今年のも個人的に気に入ってるのでメモ.

2013年のリールのコンポジットメモ.

背景

Illustratorのメッシュツールでこういうグラデーションのテクスチャを作る.

それを, AfterEffects Turbulent Displacement とか Displacement Map あたり組み合わせてぐんにょりさせてくのだけど, マットのHueとかSaturationをサンプルして変位させると, 中々面白い変形の仕方をする.


あとは, 去年あたりからハマっててserato x Roland DJ-808のWebムービー (dir: OOO 富田兼次さん) でも使った, CC Vector Blur をかけてやると, グラデーションに妙な立体感というかテカリが出たり, 龍の歯医者のOP(後述)でも使ったと制作者本人達がおっしゃってた S_Disort あたりを組み合わせることで, さらに複雑なディティールを加えたり.

最初は16bitで綺麗に作ったものの, なんというかSilverlightのロゴ的なサラサラしたテクスチャにしかならなかったので, 最終的に8bitで作った. マッハバンドや変位時のジャギーがさらに歪んで, ラスターでもベクターでもない面白いノイズが出せたので楽しかった.

文字

友人のFundam から以前教わった, Tsukurimashou というフォントは凄い. 英語圏の人が作った日本語フォントなのだけど, ブレードランナーのへなちょこな看板っぽさというか, 僕らには確実に分かるヘボさが良い. Arial Unicode MSの日本語もいい感じにポンコツ.

この手のモーショングラフィックスって, 背景とグラフィックとがレイヤーとして独立していることが多い. なんとか相互干渉させたくて, 文字レイヤーにブラーをかけたテクスチャを参照して文字の周りを更に変位させた. 背景が, 浮いたグラフィックの表面張力によって歪んでるイメージ.

作って気づいたけども, この手法はドロップシャドウの良い代替策かもしれない.

リファレンス & 習作

去年あたりからディスプレイスメントでグラデーションをぐんにゃりさせる表現は気になっててシェーダやVJ素材で色々試してた.

Olga BellのMVでも試してた, フィードバックしながらディスプレイスメントさせるのは良いっちゃ良いんだけど, 結構色の混ざり具合のコントロールが効きづらいのと, 何よりAfterEffectsでサクッとそういうのが出来ないんで, 今回はクリエイティヴ・コーディング的なアレは一切使ってない.

Gradient study 2 #everydays #illustrator #aftereffects

A post shared by Baku Hashimoto (@_baku89) on

荒牧康治さん千合洋輔さんが手がけた龍の歯医者のOPはかなり最近グッと来た. 僕が1年近く試していたことを, 荒牧さんの安定感あるグラフィックの動かしと千合さんの圧倒的な色彩と画面構成のセンスで軽々超えられた感覚があって2週間位凹んでた.

Googleリアルタイム翻訳も良かった.

Nic Hamiltonも相当影響を受けた. エディターとしての生真面目さが出てしまい最終的に小奇麗にしてしまったけども, ここまで思い切りよく荒々しく出来たら良かったなぁと思う.

Aesthetic Coherence

Admittedly, the natural of computation has always inspired me and it’s much more than an enabler, but it can be neither subject nor motif of my work. Programming would unleash us the limitation of commoditized software just like Adobe. On the other hand, it imposes us another limitation of graphical expression at the same time and tends to distract us from aesthetic improvement.

It’s much less than just an idea to think about only which technology and devices to use and what concept to argue. It’s not important compared to its look, feels, and atmosphere, after all. In other words, the technology and concept behind it could be important for viewers only if the work has aesthetic coherence and beauty.
Art is not topology. Some of planners or media artists tend to focus on connecting context and context, tech and tech, buzzword and buzzword too much but this only means constructing its topological structure. I think art is continuum and the feeling of material of the nodes and branches themselves.

I’m so bored about the context of ‘art & tech’ but I think artists arguing such a statement should do R&D in term of both technological and aesthetic aspects simultaneously, so to speak. The art produced by who distinguishes tech development and artistic depiction feels like just a stylish demo of cutting-edge technology.


Capture from Please Say Something by David O’Reilly

Here’s one of texts I’ve deeply been impressed ever. It describes very important notion not only for CG animators but also for new media artists.

8 25, 2016

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

ジェネレーティブになにかする時, なんとなく意識すること

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

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

子コンポジション

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

クラスコンポジション

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

映像業界用語

こういうのって全然説明されないから, 学生で制作バイトしてる時困ったよねってやつ. 今でも結構分からないの多くて困るのでメモ. 一般的な技術用語というより, 特殊な使われ方をしている業界用語のみ. 個人的に聞いた意味合いでしかない.

完パケ / パケる

納品すること, くらいの意味合いで使われてる.
完パケ – Wikipedia

白完

編集室で別途テロップを載せるなどするなどの理由で, 文字情報を外した状態で書きだした編集後の映像データ.

QT / モブ / mov

大体拡張子が .mov のファイルをゆるく指してる. mov自体はただのコンテナフォーマットなので, 実際にどういうコーデックで欲しいか確認しないといけないんだけど, 8割方ProResを指してたりもする.

パカチェック / ハーディングテスト / パカる

ポケモンフラッシュの二の舞いになんないかチェックするやつ. 時々, MVの背景セットとかにあるLEDディスプレイに出す映像すらパカチェックかけられたりする. 規格がオープン化されないのとか, (Webでする方法もあるけど)編集室入んないとチェックできないのとか本当アホ臭いのでみんな嫌ってる. 詳細

オフライン

原義をたどればこういう違いなのだけど, ほぼオンライン編集(編集室入っての最終調整)の前段階の事をゆるく指してたり, 納品前の「チェック映像」のことを指してることすらある.

HS

ハイ(High)スピード(Speed)で撮影すること. つまり, スローモーションのシーン撮りたいときは, HSで撮る. イメージと逆. 対義語は 微速度撮影 (=タイムラプス撮影)

Vコン

ビデオコンテなんだけど, 案件によって色々作り込み具合が違う. プレビズ映像の事を指すこともあれば, コンテを並べただけのこともある. 時々, vimeoの映像つなげただけのしょうもないやつもある.

香盤表

= スケジュール表

制作

「製作」との対比としての「制作」って使われ方と,「 制作進行をする人」「制作会社」って意味での使われ方の2パターンあったりする.

ロケハン / プレロケハン

ロケハンは, 撮影現場を事前にディレクターや撮影監督, 照明部とかで下見すること. プレロケハンは, その場所が決まる以前にディレクターと制作さんとで色々ロケ場所候補回ったりする.

PPM

“Pre Production Meeting”. 撮影前の最終打ち合わせ.

ピンが来てない

= フォーカスが合ってない. ディレクターによってはこういう風に言う.

Yを叩く

なんかカラリストに指示だす時に, 撮影監督が言っててかっこいいと思った. ハイ(明部)の黄色を抑え気味にする, って意味っぽい.

6 18, 2016

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

作業環境を一時的に移動させるときに合ったほうがいいもの

スリットスキャンをヌルっとさせる小技

スリットスキャンをAEの時間置き換えでやるとこうなりがちなんだけど, もう少し滑らかにするメモ. 質問があったので.

  1. 無理してHSで撮らずとも, Twixtorでfpsを強制的に上げればOK.
  2. AEのbit深度を16, 32にする. 大体の場合16bitで十分.
  3. AEのコンポジション設定のfps上限が99である事に気をつける. (pre-composeしてるとトラブルの原因に)

(3)は, HS素材をフッテージの変換から解釈するfpsを変換しやればOK. 半分とか. その分再生時にスローなるので注意ですが.

ビット深度は, マットレイヤーに変なマッハバンドが出ていない限り実はそんな関係なくて, Twixtorでfps上げるのが一番効果的. PhotoBoothで撮った30fpsの動画でも, 上記の設定しゃんとするとこんな感じになる.

(30fps→90fps, 16bit)

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側置いてコピーするのもアリだけど, めんどかったからそのままにした.