クラブイベント告知「LINEAR vol.32」

音楽

今回は、先日ASCII.jpにもとりあげられた*1鼻そうめんP氏（かんざきひろ/Hiroyuki ODA）がゲストDJです。また、CLANNADやリトルバスターズ！など、VisualArt’s/Key作品のリミックスでおなじみのBlasterheadさんがライブで参加！
私はいつも通りVJです。
LINEAR vol.32 フライヤー

  • LINEAR（公式サイト）
    2009年5月30日（土）13:00〜19:00 @ HEAVYSICK ZERO
    W/F ¥2,500 - A/D ¥3,000 (ともに1Drink付)

GUEST DJ
鼻そうめんＰ(かんざきひろ)
DJ
細江慎治 (sampling masters MEGA)
quad (luvtrax)
Hiroshi Okubo (nanosounds)
tuvasa2001
Atsushi Ohara
LIVE
Blasterhead (Silverbox)
VOCAL
haru*nya & Shiho & papico
VJ
qzna
KNOCKHEADZ
KAZUMiX & PePcoMiX (1st-impact)
coda (Antp)
ILLUSTRATOR
シケナオト
DESIGNER
飛人 (KURUDEN)

*1:ASCII.jp：これぞ「プロの犯行」 鼻そうめんPが初音ミクで遊ぶワケ (1/4)

スクリプトで作る幻想的なパターン (PixelWorm3)

PC

VJソース用にFlash(AS3)で作った。なかなか美しい感じのものができたと思う。
PixelWorm3スクリーンショット
スクリプトで作る幻想的なパターン (PixelWorm3) 動作ページ
マウスクリックに反応して一斉に向かってきます。連打しても面白いかもしれません。
PixelWorm3スクリーンショット2
ちなみに動作は結構重めです。CPUパワーが足りないと処理落ちします。

ダウンロード
PixelWorm3 ソースコード一式(ActionScript 3.0/Flash CS4)

Vistaのユーザーディレクトリを別ドライブにしてジャンクション張ろうとしたけど駄目だった

PC

コマンドプロンプト画像
Windows Vistaから普通にシンボリックリンクやジャンクションが使われているようなので、ユーザーのディレクトリを別ドライブに作ってジャンクション張れたら素敵じゃね？と思ってやってみた。
が、駄目だった。起動しなくなるようなことはないけど、新規ユーザー用のデフォルト設定で起動しただけだった。
レジストリファイルがジャンクション経由じゃ駄目なのかなー。
ちなみに試した方法は以下二つ。

  1. 作る予定のユーザー名で先にジャンクション張ったディレクトリを準備して新規ユーザー作成
  2. すでに作ったユーザーアカウントのディレクトリを別ドライブに移動してからジャンクションを張る（別の管理者アカウントでの作業）

1は、すでにあるディレクトリ（ジャンクション）とは別のディレクトリを作られてしまった
2は、最初にあげた現象が発生
あとでレジストリファイルなどのユーザーディレクトリ直下のファイルを除いた各ディレクトリを一つずつジャンクションにして試す、ってのもやってみたいところだけど、その前にVistaやめてXP入れちゃうかも。

ふと思ったのだけど

Windows環境がおかしくなって、元に戻すには再インストールしかないって時、新規にユーザー作ってそっちを使えば問題無かったりするパターンって結構あるんじゃないかな。と、再インストールしてて思った。

参考

JavaScriptを呼び出しまくるFlash(AS3)の内側 （「HTMLの暴走」解説 ActionScript編）

PC

「HTMLの暴走(meltdown3)」における、Flash(ActionScript 3.0)側の解説です。

Flash側は次の様な流れになっています。

  1. iframeや埋め込みFlashなど、動かせなかったり綺麗に動かそうとすると面倒な要素をJavaScriptから取得
  2. 上記要素がある場合、JavaScriptにその要素を非表示にするように指示すると同時にその位置にノイズのアニメーションを設置し、フェードアウトのアニメーションを開始させる
  3. 初音ミクなど、事前に用意した画像からランダムに画像を選択
  4. 選択された画像のピクセル数を計算（完全に透過の部分は除外）
  5. アニメーション対象のHTML要素数をJavaScriptから取得
  6. 画像化に必要なピクセル数とアニメーション対象要素数を比較し、画像化に必要な要素数に達していた場合は画像化演出に分岐

画像化演出の場合

  1. 画像化に不要な余り要素をまず画面外に飛ばす
  2. 事前に作っておいたランダムにピクセル情報を返すオブジェクトから、ピクセル情報を取得
  3. 各要素を適当にかっこよく動かしてピクセルに変化させる
  4. 全部終わったら終了演出へ

画像化演出が無い場合

  1. 2種類の動きからランダムに選択
  2. 全部動かし終わったら終了演出へ

タグが飛び回る終了演出

  1. JavaScriptからHTMLで使用されているタグの情報を取得
  2. 右下に表示されるタグの統計情報を作る
  3. タグアニメーションスタート

動く文字の正体

Flashで動かすためにJavaScriptから文字の情報を取得すると同時にHTML側の文字を消しています。そして取得した情報を元に同じ場所にFlashで文字を配置してアニメーションさせています。
そのFlash側で配置した文字は内部的には文字ではなく、ビットマップ画像です。
フォントを埋め込むとファイルサイズが大きくなる、ユーザー環境のデバイスフォントだと融通が利かない。これをクリアするために、描画したデバイスフォントをビットマップにコピーしてスプライトとして利用しています。

ExternalInterface.call()のトラップ

var tagInfos:Array = ExternalInterface.call('function(){return KAZUMiXmeltdown3.tagInfos}');

上記のようにJavaScript側で用意した配列を丸ごと受け取れればよかったのですが、配列が大きいと異常に時間がかかったり、受け取りに失敗したりすることが多発。（だいたい1000以上のオブジェクトの配列で挙動が怪しくなってました）
しかたなくループで一つずつ受け取りました。

ExternalInterface.call()でIEだと必ずnullが返ってくる

Flash自身のタグががDOM操作で追加されたものだとExternalInterface.call()の呼び出しが成功しても戻り値が必ずnullになってしまう現象に遭遇。私だけではなく、どうもそういうものらしい。

参考
苦い開発: ExternalInterface.call　関数の戻値

DIV要素を作り、そのinnerHTMLの中にFlashの埋め込みタグを書き込むことで回避してます。

パズルのピースが崩れるアニメーション

崩れるパズルピース
これはAdobe After Effectsで作ったアニメーションを静止画のシーケンスで出力し、Vector Magic (Desktop版)を使ってベクター化したものをFlashで使っています。
Vector Magic Desktop 動作画面
ベクター化することで容量は小さくなり、拡大縮小しても劣化がなくとても扱い易いくなります。
Flashのオーサリング機能にもビットマップをベクター化する機能はあります。ほとんど直線で構成されているような画像ならこれで十分な場合も多いのですが、曲線が多いとポイント数が膨大になてしまいちょっといまいちです。

関連エントリー

FlashでHTMLの文字を1文字ずつ操作するために使ったJavaScript側のトリック（「HTMLの暴走」解説 JavaScript編）

PC

先日の「HTMLの暴走(meltdown3)」においてJavaScript側で使った技の解説です。
初音ミク出現
通常JavaScriptで操作可能なHTMLの対象はタグ付けされた要素です。テキストであればPタグなどなんらかのタグで囲われた一連の文字列が対象になります。にもかかわらず「HTMLの暴走」では1文字ずつ操作しています。
どうやっているのか？
一文字ずつタグで囲ってるんです。実は。
例えば次の様に表示されている部分があったとします。
例
これを一文字ずつタグで囲った場合の状態を分かりやすく赤枠を付けると次の様になります。
一文字ずつタグで囲った例
こんな感じで一文字ずつタグ付けし、それぞれのタグの座標を計算して対応しているのです。
実際に使ったタグはSPANなどではなく、KZMというオレオレタグです。一般的なタグはデフォルトスタイルやCSSの影響がありえるため、適当なタグを作って対応しています。
HTML(XHTML)の定義に存在しないタグはクリーンなため非常に扱い安いです。実際、document.createElement()でも自由に適当なタグを作れます。getElementsByTagNameでの取得も可能です。もちろんDTDに存在しなければ文法エラーということになりますが、現実的にブラウザはそんなこと気にしないので動作は問題ありません。（というか定義が無い場合のルールというのがあるのかな？）
今回の解説を書くついでにJavaScriptのソースにコメントを追加しておきました。

HTMLの暴走 JavaScript側のソースコード
meltdown3.js

関連エントリー

HTMLの暴走 (meltdown3)

PC

HTMLの暴走(meltdown3)イメージ

javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown3.js?'+(new Date).getTime();s.charset='UTF-8';s.id='KM3';d.body.appendChild(s);})(document)

上記のコードをアドレスバーに貼り付けて実行すると、そのページが暴走を開始します。
JavaScriptコード、アドレスバー実行例
ページによってはアニメーションが始まるまでちょっと待たされることがあるかもしれません。
色んなページで遊んでみてください。

アドレスバー貼り付けではなく、リンク動作の実験版

ブラウザ対応状況

Firefox
ページによってはアニメーションが処理落ちしまくることがあります（だんだん軽くなってゆく）。それ以外は理想的に動作します
IE
Firefoxで重いページが軽かったりします。ただしアニメーションが始まるまで若干待たされたり、アニメーション時に位置ずれが発生するページがあったりします
Webkit (Google Chrome, Safari)
floatでテキストの回り込みをしている部分が残念な感じに。その他レイアウト崩れが発生しがちですが、動作は軽いです
Opera
動作せず（原因不明）

注意事項

初音ミク出現

  • ページの要素が画像に変化する演出は、画像化に必要な素材が足りない場合は発生しません

技術的な仕組み

JavaScript側で死ぬほど面倒で地味な準備を行った後、ActionScript 3.0 (Flash)に制御を移して楽しくアニメーションさせてます。

ソースコード一式
ダウンロード meltdoen3 ver 1.01 （JavaScript + FlashCS3 ActionScript3.0 クラス30個以上あるのにパッケージ切ってなくてごめんなさい版）

解説記事

参考書籍

ゲームプログラマになる前に覚えておきたい技術

ゲームプログラマになる前に覚えておきたい技術

シーン遷移の概念の影響をうけました。解説に利用している言語はC/C++ですが、ActionScript 3.0が分かる人なら問題無いと思います。
シューティングゲーム プログラミング

シューティングゲーム プログラミング

大量のオブジェクトの管理手法（タスクシステム）の概念の影響をうけました。上に同じくC/C++での解説です。
デザインパターンとともに学ぶオブジェクト指向のこころ (Software patterns series)

デザインパターンとともに学ぶオブジェクト指向のこころ (Software patterns series)

デザインパターンってよく聞くけどなんなの？と思って読んでみた本。Bridgeパターンの概念を知らずにコピペクラス爆発させてた過去の自分にさようならｗ 時々解説に使われているコードはJavaですが（以下略）
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

クロージャをナチュラルに使えるようになったのはこの本のおかげ。
ActionScript 3.0 アニメーション

ActionScript 3.0 アニメーション

前提としてActionScript 3.0を理解している必要はありますが、AS3アニメーションの基礎です。価格が強気の7,000円（税別）。
その他影響を受けた本たち。
最近読んだ本

近況

去年まではこのブログを見た方からなどのお仕事依頼は個人でうけていたのですが、今年からは去年末に立ち上げたデジタルコンテンツ制作会社、株式会社ファーストインパクトとしてうけています（私は前線で活動する実働取締役）。肩書きがVJとなっている名刺は法人化前に作ったものなのでレアになるかもしれませんｗ （でも実はまだ大量にある）
VJ依頼に関してはクラブイベントなどの現場で捕まえてくれると嬉しいです。
VJ現場

関連エントリー