Dimensions Recordは、あらゆる立体物を音に変換するレコードプレイヤーです。
ターンテーブルの上に乗った立体物は、
その凹凸が音に変換され、スピーカーから音楽として再生されます。

普段目に見えない音のかたちを、見て、触って、変化させる。
そんな新しい音楽体験を提供します。
　
　
　

立体レコード

HACKist展「Digital Fragments」用に作成したプロトタイプ1号機の本作品では
子供から大人まで触っていただけるよう、
「立体レコード」として積み木バージョンとレゴバージョンの2種類を用意。

積み木バージョンではシンプルな形状から、
簡単に配置を変えることで音の変化をわかりやすく、
レゴバージョンではより複雑な音の変化を作り出し、
立体物としての造形と、音の表現を同時に作りこむことができるようにしました。
　
　
　

しくみ

ターンテーブルの上に設置した超音波センサーで立体物の凹凸を読み取り、
その高さに応じて、音の高さも変化します。

センサーは2点で別々に高さを読み取り、
それぞれが別々の音を同時に音を鳴らすことで和音を奏でます。

センサーのコントロールにはArduinoを使用し、
PCに接続、Funnelと連携させたFlashから実行しています。
　
　
今はまだプロトタイプですが、
将来的には、もっと多くの音色で、複雑な音階を作り出せるようになり、
直感的で視覚的な楽曲制作ができたり、
様々な立体物を音として記録することも可能になるかもしれません。
　
　
　
制作：笹垣洋介
サウンド制作：原一弘

新年あけましておめでとうございます。

博報堂アイ・スタジオからささやかではございますが「ご長寿祈願 白蛇様」という、みなさまのご長寿を祈願する年賀コンテンツをご用意させて頂きました。

本年の干支である「巳」の中でも、白蛇様は特に縁起がよいとされており、再生を繰り返す不死の神として崇められ、不老長寿の象徴とされます。

「くらうど」上にいる１匹の白蛇様を文明の利器「すまーとふぉん」を使い、みんなで一緒に伸ばすことで、「りあるたいむ」で「そーしゃる」なご長寿祈願を体験くださいませ。

紹介ムービー

このコンテンツは、PCサイトとスマートフォンサイトをリアルタイムに通信して、マルチスクリーンで楽しむコンテンツです。

スマートフォンサイトから白蛇様のしっぽを引っ張ると、リアルタイムにPCサイトの白蛇様が伸びていきます。ぜひ両方をご覧になりながらお楽しみください。

スマートフォンサイトはこちら（公開終了しました）

http://shirohebi.hackist.jp/sp/

さて以下では、「ご長寿祈願 白蛇様」で用いた特徴的な技術を２点ご紹介させて頂きます。

【HACK 其の一】 スマホでもインタラクティブにうにょうにょ動くしっぽアニメーション

byスマホ実装担当：小井

– 12月某日、新年の企画会議の最中に一つのお題が出されました。

Q: スマホでヘビのしっぽを引っ張ると、いい感じに伸び縮みする表現ってできる？

A: んー、何とかします。

HTML5のCANVAS描画もFlashのGraphics描画もほぼ同じイメージで操作が可能なので、以前フラッシュの勉強で作ったアルゴリズムが使えると考えました。

ベレ法というものです。

http://ja.wikipedia.org/wiki/ベレの方法

よくわかりませんね・・・。

これをものすごく乱暴に要約すると、特定の2点間の距離を一定に保つというものになります。そして2点間の距離を保つという事は、3点にすれば、三角形の形を保つという事になります。

※画像をクリックすると、デモ画面が開きます。

※CANVASに対応したブラウザでご覧ください。

後はこの三角形をヘビのしっぽのような形に整えるだけです。

ヘビの輪郭に沿ってポイントを配置し、点と点を関連づけます。 輪郭やポイントの設定について、方法は色々あると思いますが、今回、実際に使ったモデルは、以下のデモをご覧頂いた方が分かりやすいと思います。

※画像をクリックすると、デモ画面が開きます。

※CANVASに対応したブラウザでご覧ください。

点と点の間を一定の距離に保つといったのですが、厳密には「2点間をゴムで出来た棒で繋ぐ」という表現の方が正しいかもしれませんね。

ベレ法の実装に加え、各ポイントの位置をユーザーのインタラクションによって少しずつ変える事でこの不思議な動きを実装する事が出来ました。

【HACK 其の二】 WebSocket+Node.jsを使ったPC⇔スマホのリアルタイム通信

byバックエンド実装担当：貴田

WebSocketと、Node.jsという２つの技術を組み合わせると、これまで難しかった、「大量のクライアントに対して、サーバーからリアルタイムに通知を送る」ことが可能になります。ウェブの通信の歴史とともに、語弊を承知でざっくりとその仕組みを解説させて頂きます。

数年前までは、「サーバー側の情報をリアルタイムに知りたい。」と思ったら、クライアントからサーバーに、「今どんな感じ？」「ねえねえ、今どんな感じ？」といちいち聞きにいかないといけませんでした。これはちょっとうざったいですね。

ところが、HTML5から新しく導入された”WebSocket”と呼ばれるクライアント⇔サーバー間で双方向通信を実現する規格を使うことで、サーバーからクライアントに対して、「新しい情報があるよ！」とお知らせを送ってもらえるようになりました。さきほどと比べて効率がよさそうですね！

ここに”Node.js”と呼ばれる、既存のサーバーサイド言語（PHPなど）と比較すると、大量なI/O処理をさばくことを得意としたプラットフォームを使うことで、たくさんのスマホから「ひっぱったよ！」と通知をうけ、たくさんのクライアントに「ひっぱられたよ！」と通知をブロードキャストできるようになりました。

このような仕組みで、スマホをまるでリモコンのようにして、PCコンテンツとリアルタイムに同期する”マルチスクリーン型コンテンツ”を実現しています。

それでは、みなさまのご長寿を祈願して、

スタッフ一同、白蛇様をたくさん伸ばさせていただきます。

本年も博報堂アイ・スタジオとHACKistをよろしくお願いいたします。

Credit /

Planning：望月重太朗

Art Direction + Design：堀井正紀

PC Site Develop：高野祥宏、茶谷亮裕

Smartphone Site Develop：小井仁

Back-end Develop：貴田達也

Special Thanks：一階武史、岡本慎理

こんにちは、HACKistのデバイス方面担当、Mです。

今回は「Gainer（ゲイナー）」を使って、マウスやキーボードなどのいわゆる一般外部デバイスとは異なる【オリジナルデバイス】からFLASHを制御する習作をつくってみました。

「Gainer」 というのは、おおざっぱに言うと外部入力デバイスとPCとを簡単につないでくれる、便利なハード・ソフトウェアのことです。

つまりセンサやスイッチ・LEDなどの電子回路と、FLASHやMAX/MSP・ProcessingなどのPC側のプログラムとのやりとりを、ものすごく簡単に実現してくれるすごいやつです。他と比べて入出力もシンプルで、各言語にライブラリが用意されているのでとても取っ付きやすいです。

今回は習作なので、半田を使わずに回路が組める「ブレッドボード（動画に映る白い板）」を使用しています。回路の組み直しが何度もできる、とっても便利なボードです。

外部入力には「加速度センサ」と「光センサ」と「タクトスイッチ」を、 外部出力に「フルカラーLED」を使っています。

デバイスを傾けるとフルカラーLEDの色が、 光センサーの光量でフルカラーLEDの光量が変わります。更に、デバイス側につけたスイッチを押すことで、現在の傾きで選ばれている色をした花火を、PC側に打ち上げています。
＊花火のスクリプトは、wonderflのものを参考にさせていただいてます。

こんな風に外部デバイスとFLASHを組み合わせると、いろんな可能性が広がりますね。しばらく研究してみようと思います。