漫画は鳥獣戯画などで知られる「絵巻物」を起源としていると言われています。
その後、印刷・製本の技術発達によって、昨今メジャーとされる「綴じ型」へと変化を遂げました。
現代の技術の進化は、漫画をさらに変化させるはずです。
次世代の漫画を感じさせる、プロトタイプをご紹介いたします。

デジタル技術で探る、漫画表現

漫画の定義には、絵に時間という軸が加わったものだと言う説があります。
コマ割りやセリフの吹き出しや効果音が、いつも見るあの形じゃなくてもいいわけです。
さらにいえば、コマが動いていたって、吹き出しが見えたり見えなかったりしても、いいわけです。

表現は広く、技術が進化すればさらにそれは広がりを見せます。
紙をWEBに焼き直す以上に、表現の幅は広がっているはずです。

今回 私たちは、昔は本を開いている人も多かった電車内で利用されるスマートフォンをピックアップし、
スマートフォンならではの表現を探しました。

短編１：「マンボウの書」

http://www.hackist.jp/UNDER/fm/01_manbou/
↑ 作品はこちらから。　※iPhone6,6sに最適化して作成してあります。（対応機種拡大予定）

この漫画、最初にiPhoneを縦にして読まれたか？
一番最後の仕掛けに、お気づきになられましたか？
この漫画では、iPhoneを縦横に動かすと見える範囲が変わることを利用して、
２軸のストーリーを展開しています。

縦で読むと１人がぼんやりお茶を飲んで、こぼして、そこにマンボウが飛んでくるという不可解なストーリーですが、
横に倒すと実は話し相手がいて、なぜお茶を零したのか、
どこからマンボウがやってきたのか、謎が解けるという仕組みになっています。

短編２：「ガラスの椅子」

http://www.hackist.jp/UNDER/fm/02_glass/
↑ 作品はこちらから。　※iPhone6,6sに最適化して作成してあります。（対応機種拡大予定）

本は、めくる一方向にしか進みませんが、WEBはそうではありません。
タップもあれば、スワイプも、自動操作もあります。
私たちは日々こういった技術を、WEBサイトの制作において利用しています。
この漫画では、その技術を漫画に使用しています。
パララックスと呼ばれる奥行き表現により 瓦礫の飛んでいく様を表現したり、
自動スクロールによって 所謂回想シーンというものを表現しています。

スマートフォンによって変化したインターフェイスを漫画の表現として活用することで、
新しい漫画の体験を模索しました。

実装面について

マンボウの書は見せ方の仕掛けがシンプルであるため、
細かい動きはすべてCSSアニメーションのみにするなど、実装面もシンプルに設計することで、
「普段ウェブを作らない絵描きさんでも簡単に作れるウェブ漫画」を目指して作りました。

逆にガラスの椅子では、普段の業務で培ったウェブの表現やコンテキストをふんだんに漫画に取り込んでおり、
普段ウェブサイトを作っている側の人だからこそできる漫画になっています。

表現的な動きだけではなく、それを実現する技術のあり方も含めて、
「次世代の漫画」を感じていただければと思います。

今後の活動

表現の可能性が溢れていて、既にやりたいこともいくつかあり、
他の表現を利用した漫画を今後も制作していく予定です！
こちらのページで徐々に作品を発表していきますので、
ぜひご覧いただけますと幸いです！
また、更新の情報なども含め、こちらのtwitterアカウントでも発信していきます。

近い未来、ウェアラブルデバイスで利用できる漫画や、AIが作り出す漫画も生まれることでしょう。
それはきっと未知の時間体験です。
漫画の可能性を、今後も感じさせていけたらと思います！

■次世代の漫画 WEBサイト：http://www.hackist.jp/UNDER/fm/
■HACKist_：@HACKistUNDER

クレジット

デザイン、漫画： かさき
実装： ごっしー

先日、アイドルグループ notall さんのワールドツアー 【notall 2nd Anniversary Tour!! ~夏だ！騒ぐぜ！東名湾~】 にて、WebGLをつかったインタラクティブパフォーマンスのご協力をさせていただきました。

インタラクティブパフォーマンス

インタラクティブというと、対話、双方向といった意味になるのですが、今回のケースでは、アイドルメンバーやライブにいらしているお客さんの放つ声や音、カメラから入力された映像情報を元に、ステージ上に投影される映像演出をダイナミックに変えていくというパフェーマンスを行いました。
こういった演出の多くは、最近流行りであるUnityやMAX、openFrameworksといったソフトウェアを用いて行うのですが、今回は国内でも例の少ないWebGL/GLSLに特化させて演出を行っています。

今回は全体で4曲の演出を行ったのですが、その中から3曲の内容を少し紹介させていただければと思います。

1. UNU

【 0:00 – 0:10 】
EDM調の楽曲で、全体としてアブストラクトな表現を行っています。パーティクル系の表現と、光の効果を活かせるような構成を行いました。

2. ウサギツンデレラ

【 0:10 – 0:16 】
キネティックタイポグラフィという表現方法を使い、テンポ良く楽曲の中に背景を取り入れる演出を行いました。
楽曲と演者のマイクから入力された音により映像を変化させる仕組みを取り入れ、リアルタイムに変化する映像効果を実現しています。

3. マジ

【 0:17 – 0:32 】
パーティー感の強い楽曲で、曲の持つ楽しいイメージを再現するため、様々な3Dオブジェクトを作り、それを直接演出の中に取り込んでいます。3Dオブジェクトの生成にはBlenderとIllustratorを組み合わせ取り込みを行いました。

舞台裏

「マジ」のリハーサル中。
楽曲の音によって自動的な処理がかかる部分もありますが、人の手を入れる部分をあえて残すことで、リアルタイムVJプレイの要素も残しています。
VJだけの演出であればそう難しくはないのですが、実際はステージの進行と合わせることが必須であり、音響や照明機材、演者の状況などを含め連携しつつ進めていくため数時間にわたるリハーサルを入念に行っています。

機材はGPUを強化したマシンを軸に、キーボード、マウス、MIDIコントローラー、オーディオインターフェイスなどを揃え、今回の演出にカスタマイズした構成を用意。プラン通りの演出はもちろん想定される緊急時の対応方法まですべてをコントロール下におきました。

HACKistは今まで何度かVJに関わらせていただく機会に恵まれ、様々な演出を行っています。
今回は大規模なライブイベントで、WebGLを軸にしたステージの演出を行うことができ、最高の演出ができたと思っています。

今回はWebGLに特化したVJだったのですが、また機会があれば新しい体験の場を作れればと思っています。

■ Credit（HACKist制作スタッフ）
Creative:
谷岡 尚人
高野 祥宏 / 八木 啓太 / 齋藤 陽一
岩橋 卓 / 横山 幸正 / 荒瀬 亮太
佐野 彩香
小井 仁

PM:
小井 仁

Produce:
十字 賢

stackGL.
stackGLはシンプルなデモコンテンツを通じ、WebGLを学習するHAckist活動の一つです。
http://hackist.jp/webgl/

WebGLを学習するにあたって作ってきた小さな検証ファイルが主たる部分なのですが、GLSLを書いたアブストラクトな表現物であったり、ローポリゴンでつくった箱庭であったりウェブに限らずイベントVJやムービー素材としての扱いがあったりと比較的広いジャンルになっています。

今回は主にthree.jsというライブラリをベースにしており、その使い方に終始している部分もあるのですが、本格的にWebGLと向き合うというとGLSLを理解する必要が出てきます。このコンテンツはその一歩手前の段階にある、初心者から中級者になるプロセスをたどった物と考えています。

もちろんこの中には、学習用で使ったスクリプトファイルだけではなくDE DE MOUSEさんのライブで使ったVJのオリジナルデータも一部入っている太っ腹ぶり！

今後も面白いサンプルを随時追加していく予定ですのでご期待いただければと！

ご存知の方も多いと思います。Google Chromeの43から「WebMIDI API」がサポートされております。
これは平たく言うと、外付けMIDIキーボードをサポートしますよ。という事になります。
HACKistではVJイベントや、データビジュアライズと言われる分野をよく行うのですが、その際につかう外部デバイスの選択肢が一気に広がるということもあり、非常にわくわくしながら恒例のデモを一つ作ってみました。

残念ながらMIDIコントローラーで動かすという物ですので動画を用意しています。
このデモでは、MIDIコントローラから送った値をブラウザ側で取得し、それをWebGL（GLSL）に送り込む事でVJとしての機能を実現しました。ちなみにこれは先日のDE DE MOUSE リリースパーティー「for 2EPs」のときに小井が実際に使ったWebGLをカスタマイズした物になります。

ちなみに余談になるのですが、弊社のVJコントロール界隈（の、ごく一部）では、「コントローラーは物理的な物の方が直感的でよい」という派閥と、「ボタンが自由につくれないから作った方が汎用性がある」（ハードという物理的な制約が生まれるのでソフトウェアコントローラーを作る）という派閥に分かれています。
ちなみに小井は前者の物理ボタン派ですが、必要な状況に応じてコントローラーも選択できるというのは非常に適応能力の高いチームだと改めて感じました。

ではまた！

先日のDigitalFragmentsで展示した「Customize Journey」の紹介をします！

Customize Journeyとは、iPad上でカスタマイズしたオリジナルロケットを、スクリーン上の宇宙に旅立たせて楽しむ作品となっています。
「イベントの参加者に何らかの足跡を残してもらい、会場の盛り上がり具合を把握したい」という私的な要望から作るに至っています。

飛ばしたロケットは大体20~30分滞在するので、滞在しているロケットの数から、盛り上がり具合を把握する事が出来ます。
滞在しているロケットを参考に、自分のロケットを他のロケットより格好良くカスタマイズしましょう。

上記iPadの画面から、Head、Body、Wing、Jetの4か所のパーツをカスタマイズする事が出来ます。
選んだパーツによってスペックが変わり、飛び方や速度も変わるので、個性を存分に発揮できるようになっています。
ちなみにこのパーツ群、どんな組み合わせでも不自然なくハマるよう、デザイナー加藤 咲の匠の技術が使われています。

カスタマイズが完了したら、右のバーを上までグッと上げてもらう事で、オリジナルロケットをスクリーン上の宇宙に旅立たせてあげる事が出来ます。

他のロケットと共に、旅に出るオリジナルロケットの勇姿を、手を振って見てあげてください。
ちなみに飛び立つ仕組みはNode.jsです。

以下、操作の流れをまとめた動画になります。

今後の展開としては、自分で作ったロケットをスマートフォンで持ち帰ってもらえるよう改良中です。
スマートフォン上でのロケットは、数日後着陸し、ロケットのパーツに応じたアイテムを持ち帰っている、というストーリーになっています。
そちらを含めて近日中に、URLを公開させて頂きます！

それではまた、宇宙で！

―――――――――――――――――
スタッフクレジット：
サウンド:小野 翔太郎
デザイナー:加藤 咲
プログラマー:宮林 竜平

先日、当ブログにてご紹介させていただいた「東京メトロリアルタイムシミュレーションwebアプリ metrogram」をバージョンアップさせたビジュアライゼーション作品「metrogram3D」をリリースいたしましたのでご紹介いたします。

タイトルでお気づきの方もいらっしゃるかと思いますが、今回は何と3Dになっています。3D視点から東京の地下鉄を眺めることができます。

地下鉄のデータなので、当然駅ごとに深さの情報も存在しており、今まではすべて平面上での曲線計算だったものを、3軸での曲線計算に調整。表現はもとより、車両の描画なども複雑になっているのですが、ウェブ上での3次元表現技術である「WebGL」を用いる事で、相当のパフォーマンス向上につながりました。

そのパフォーマンスを生かす形での演出の追加。そしてカメラ視点を自在に操っています。

1. TOPビュー: 旧metrogramと同様のカメラワーク
2. 俯瞰ビュー: 東京メトロ全域が入るように距離感を調整
3. ラインビュー1: 各路線にスポットを当てて路線全域をカメラが追いかけます
4. ラインビュー2: 路線を真上から見つめるカメラ視点
5. 駅ビュー: 特定の駅を中心にカメラが回り続ける視点

この強力な「WebGL」ですが、現在使えるブラウザ環境が限られており、なかなかお目見えできる事が少ないのですが、これからはブラウザやスマートフォン環境の向上によりネット上での表現をより豊かにしてくると思います。

今回は、東京メトロのデータを元にビジュアライズを行っていますが、一定量以上のデータさえあれば様々な分野の情報を視覚化する事ができます。それによってさらに新しい視点で物事をとらえる事ができるようになる。それはとても意味があり、そして何より楽しいですよね！

さて、次は何を作りましょう?

ではまた！

昨年の事になるのですが、東京メトロ オープンデータ活用コンテストというものに、個人的にいくつかの作品を応募したのでその中から社内外に好評だった「metrogram」をご紹介させていただきます。

すごく簡単に紹介させてもらうと、「普段見る事のできない地下鉄の流れを視覚的に見えるように」という、いわゆる「みえる化」の作品になります。

使った技術的にはそう多くはありませんし、ここ数年流行の「ライブラリを利用してできました」という流れの逆をいく「基本的なアルゴリズムを考え抜いた」というものになります。扱った情報としては

• 駅座標の配置と、それらを繋ぐ曲線
• 時刻表管理
• 乗り換え情報の管理（未使用
• 処理の高速化
• 各種最適化

という予想を裏切らない内容なのですが、今回はこの中からいくつかの部分をピックアップしました。

駅座標とそれらを繋ぐ曲線

今回、駅と駅を繋ぐ線（=線路）を曲線で描く事にしました。曲線と言っても厳密には短い直線を複数組み合わせる事で曲線に見せています。
その曲線を描く方法ですが、以下の方法が考えられました。（以下の方法しか現状知らないとも言えますが。。。。）

• 2次ペジェ曲線
• 3次ペジェ曲線
• スプライン曲線
• エルミート曲線

連続した点という事で、2次ペジェ曲線を最初扱っていたのですが、結局スプライン曲線を採用。
理由としては、複数の点を結んだ曲線を算出する式ということで、駅と駅の間を繋ぐ線の\目的にぴったりはまったという点。
さらに、利用した関数では、点と点の間を任意の分割数に割る事ができるものだったのも理由の一つです。

【DEMO】

スプライン曲線

スプライン曲線 + 動的な描画

処理の高速化

複数層になるcanvasレイヤー

metrogramでは多くの描画を行う必要がありました。
そのなかでも特に、路線を描く処理が多くを占め、そこを以下に効率化するか?が処理速度を調整する上で大きな課題でした。
そこで、レイヤーの考え方を導入し、描画される対象ごとにcanvasを使い分ける方法を採用しました。
具体的には以下の層に分けられています。

• 背景レイヤー (背景色描画)
• 路線レイヤー (各駅を繋ぐ線路の描画)
• 駅 + 文字レイヤー (駅相当の箇所に、駅マークと、駅名を描画)
• 電車レイヤー (運行中の電車の位置に電車アイコンを描画)

【DEMO】

CANVASによるレイヤー処理

各種最適化

各種最適化と言いつつも、広告系のお仕事ではなかなかやる事の少ない処理

• 画像圧縮
• コード圧縮
• gzip

以下３項目を実施。

この中でも特に、gzipによるデータ圧縮は非常に効果が高く、特にモバイル環境であればあるほど実施するメリットが高くなると思われます。

metrogramの中心処理を記述したJSをgzipで圧縮したところ、75%の容量圧縮に成功。

同様に、駅情報を記載したXMLファイルをgzipで圧縮したところ、86%の容量圧縮に成功。

gzipのやり方ですが、私はMAC環境でおこなっており、ターナルから以下の処理を行う事で実行しています。

h-koi-air:~ h_koi$ gzip [zipしたいファイルパス、もしくは対象となるファイルをドラッグアンドドロップ]

最後に、htaccessを記述してgzip対応が完了します。

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
  
<FilesMatch "\.css\.gz$">
  ForceType   text/css
  AddEncoding x-gzip .gz
</FilesMatch>
  
<FilesMatch "\.js\.gz$">
  ForceType   application/x-javascript
  AddEncoding x-gzip .gz
</FilesMatch>

<Files ~ ".(gif|jpe?g|png|ico|js|css|gz|woff)$">
  Header set Cache-Control "max-age=604800"
</Files>

比較的少ない手数で得られる効果は高いので、制作物によっては非常に強力な手段と言えるでしょう。

今回の記事では主に描画面と、その為のパフォーマンスチューニングの部分について触れてみました。
次はmetrogram3Dとかやってみると面白いかな?と思いつつ、年度末を駆け抜けようと思います。

※ 今回デモ等で参照できるコードをご利用の際は、自己責任のもとでのご利用をお願いします。

今回は、本ブログで扱っている背景の演出「三角形フラクタル」について少し触れさせていただければと思います。

– 5月某日、HACKistの定例会議の最中にブログリニューアルの話が持ち上がり、そこから一つのお題が出されました。

Q: ブログトップを自由に使って何か演出はできませんかね？

A: んー、何か考えます。

白蛇様のときもそうでしたが結構な振りですね。ですが真っ白なキャンバスを出されると燃えてしまうのがHACKist。お題が出されて数日の間に、様々なパターンを考えた結果、HACKistロゴの基となってる三角形を使ってフラクタル処理を扱った演出という答えに行き着きました。

フラクタルとは、わかりやすくいうと「同じ規則性をつかってひたすら何かを描き続けてできるもの」というイメージです。その規則性を以下3つのルールとしました。

1. 三角形を設定する
2. 描いた三角形を一定の確率で4分割する
3. 一定回数処理するまでは1に戻る

文字だけで見ると不思議な感じですよね?ではちょっと図を使ってみてみましょう。

この処理を一定回数繰り返します。

1. 基本の三角形を分割。

2. 分割された三角形のうち、中央と右下のものを再度分割しました

3. 中央の三角形の一部をさらに再分割

一見複雑そうなものが、実は簡単な法則だったなんてことはよくあります。
フラクタルはその最たる例なのですが、いつかまたこういった作品をお見せできればと思います。

これからもHACKistをよろしくお願いします！

その際、「HACKistとして作った作品で出るんだから、ただ出るのではなく、やはり何かハックしなきゃ！」と思いたち、プレゼン資料ハックをして、スクリーンに投影される発表資料に対して、ニコニコ動画的にコメントをリアルタイムに投稿できるようにしてみました。

 

そのときの発表の様子がこちらです！！

（プレゼンのおしゃべりが下手くそですが、見て頂かないと伝わらないので。。）

仕組みについて

まずPowerPointやKeynoteは使わず、HTMLでコーディングしてブラウザベースでプレゼン資料を作りました。資料作成には、hakimさんという方が作られているreveal.jsという、HTMLでかんたんにプレゼンテーションが作れるフレームワークを使用させていただきました。

このフレームワークをベースに、reveal.jsの中でメインで使われている描画要素の上に、新規にcanvas要素を敷いて、サーバー経由で投稿されてきたコメントのテキストデータを流せるようにすこし改造させていただきました。また、スマホからプレゼン資料へのリアルタイムなコメントの通信は、この分野では定番になりつつある、Node.jsとSocket.IOを使いました。

やってみてわかったことは、以下です。

• 理想的には、プレゼン資料の上を流れるコメントを見ながら、インタラクティブに発表をしたいと思っていたのですが、プレゼンに時間制限があり、焦りながら喋っていたので、全くコメントが頭に入ってこなかったです。コメントに触れつつ、プレゼンする場合は、発表時間に余裕をもった方がいいなとおもいました。（これは自分がプレゼン慣れしてないせいかもしれないですが。。）
• 「みんなのコメントで発表がにぎやかになって、おもしろかった。」というプラスの意見と、「コメントばかり気になって、発表内容が頭に入ってこなかった。」というマイナスの意見と、両方の感想を聞くことができました。お固い発表にはこのままの演出だと不向きで、楽しく発表したいときは向いてるな、と感じました。
• 発表前にコメントの量や内容がどうなることか全く予測できなかったですが、発表開始から終了まで終始、激励コメントや、発表内容に関するツッコミなどのコメントが流れていました。コメントのフィルタリングは、一切していなかったですが、意味不明なものもありますが、基本的に好意的なものが多く、アイスタはいい人が多いなあ、と感じました。

結果として、このプレゼン大会では部門賞をいただきました。

ありがとうございました。それでは！