前回のMinimの導入では、サウンドファイルを再生し、波形を表示することができるようになりました。しかし、音の波形を表示したら音響を視覚化したことになるでしょうか。実は我々の耳は音を波形ではなく、周波数に分解して知覚しています。ですので、波形をそのま操作して表示しても、あまり音と一致した映像にはなりません。音を周波数の帯域ごとの音量に分解するには、フーリエ解析という手法を用います。これにより、音を周波数帯域ごとの強さにわけて取得することが可能となります。今回は、このフーリエ解析を利用して、音を可視化してみましょう。
今回から数回にわたり、最終課題の制作に向けたテーマをとりあつかいます。最終課題のテーマ「音響の映像化」にあわせて、まずは過去の作家達の、様々な映像と音響の融合の試みを紹介していきます。そうした過去の試みを受けて、後半はProcessingのライブラリMinimを使用して、Processingのプログラムの中で音響信号を扱う基本を紹介していきます。
今回からは、各種センサーのアナログ値をArduinoで取得して、その値をProcessingに送り視覚化するやり方について解説します。ArduinoとProcessingを連携する方法には、Serial通信とFunnelを使用する方法がありますが、今回はSerial通信を使用してみましょう。まずは可変抵抗を使用して実際に値を送る方法について試した後、各種のセンサーを使用してみましょう。
Webページを作成してWebサーバにアップロードしても、外部からのアクセスが無ければ、せっかく公開した情報も誰の目にも触れることはありません。公開したページは、より多くの人に見てもらえるように様々な工夫が必要です。
これまでページを多くの人に見てもらうため一般的だった手法は、GooleやYahooなどに代表されるような検索エンジンで上位にランクされるように最適化する、SEO (サーチエンジン最適化) というテクニックでした。しかし、最近になってより注目されているのは、いかにして現実社会との繋りをWeb上で活用するかという視点です。現実の人間の繋り (= ソーシャルグラフ) を活用するという方法が今後ますます重要となります。今回はこうしたソーシャルなメディアと連携する方法について解説していきます。
今回は前回のCSSの入門をさらに発展して、CSSによるページレイアウトに挑戦します。そのために必須の知識として、まずCSSの「ボックスモデル」という概念を紹介します。ボックスモデルの概念を理解した上で、グリッドシステムを利用したCSSレイアウトに挑戦します。
今回から数回にわたり、最終課題の制作に向けたテーマをとりあつかいます。最終課題のテーマ「音響の映像化」にあわせて、まずは過去の作家達の、様々な映像と音響の融合の試みを紹介していきます。そうした過去の試みを受けて、後半はProcessingのライブラリMinimを使用して、Processingのプログラムの中で音響信号を扱う基本を紹介していきます。
[code language=”javascript”]
import com.greensock.*;
import com.greensock.easing.*;
this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
this.mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
function rollOverHandler(e:MouseEvent):void {
TweenLite.to(this.mc, 1, {scaleX:4.0, scaleY:4.0, ease:Elastic.easeOut});
}
function rollOutHandler(e:MouseEvent):void {
TweenLite.to(this.mc, 1, {scaleX:1.0, scaleY:1.0, ease:Elastic.easeOut});
}
[/code]
https://yoppa.org/wp-content/uploads/2010/07/01_touchEaseing.swf,550,400
[code language=”javascript”]
import com.greensock.*;
import com.greensock.easing.*;
this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
function rollOverHandler(e:MouseEvent):void {
TweenLite.to(this.mc, 1, {x:Math.random()*550, y:Math.random()*400, rotation:Math.random()*360, ease:Elastic.easeOut});
}
[/code]
https://yoppa.org/wp-content/uploads/2010/07/02_touchEaseing.swf,550,400
[code language=”javascript”]
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);
this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
this.mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
function rollOverHandler(e:MouseEvent):void {
var color:Number = Math.random() * 0xffffff;
TweenLite.to(this.mc, 1, {scaleX:4.0, scaleY:4.0, tint:color, ease:Elastic.easeOut});
}
function rollOutHandler(e:MouseEvent):void {
var color:Number = Math.random() * 0xffffff;
TweenLite.to(this.mc, 1, {scaleX:1.0, scaleY:1.0, tint:color, ease:Elastic.easeOut});
}
[/code]
https://yoppa.org/wp-content/uploads/2010/07/03_touchEaseingColor.swf,550,400
[code language=”javascript”]
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);
this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
this.mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
function rollOverHandler(e:MouseEvent):void {
TweenMax.to(this.mc, 1, {scaleX:4.0, scaleY:4.0, blurFilter:{blurX:50, blurY:50}, ease:Elastic.easeOut});
}
function rollOutHandler(e:MouseEvent):void {
TweenMax.to(this.mc, 1, {scaleX:1.0, scaleY:1.0, blurFilter:{blurX:0, blurY:0}, ease:Elastic.easeOut});
}
[/code]
https://yoppa.org/wp-content/uploads/2010/07/04_touchEaseingBlur.swf,550,400
[code language=”javascript”]
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);
this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
this.mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
function rollOverHandler(e:MouseEvent):void {
TweenMax.to(this.mc, 1, {scaleX:4.0, scaleY:4.0, glowFilter:{color:0x91e600, alpha:1, blurX:30, blurY:30}, ease:Elastic.easeOut});
}
function rollOutHandler(e:MouseEvent):void {
TweenMax.to(this.mc, 1, {scaleX:1.0, scaleY:1.0, glowFilter:{alpha:0, blurX:0, blurY:0}, ease:Elastic.easeOut});
}
[/code]
https://yoppa.org/wp-content/uploads/2010/07/04_touchEaseingGlow.swf,550,400
今回は、物理演算を使用した今度なアニメーションに挑戦します。まず始めに「ばね」の動きを再現してみます。ばねの運動はどのような法則でできているのか、それをプログラムで再現するにはどうすれば良いのか考えていきます。後半はこうした物理演算を手軽に実現できるライブラリ、Physicsライブラリを紹介します。Physicsライブラリを使用して、ばねや重力を使用した表現に挑戦してみましょう。
ワークショップの前半は、先週の課題の講評を行います。後半は、今後のワークショップ内でセンサーで計測してビジュアライズしていく「My植物」をワークショップの受講者同士で紹介し合います。その後、Processinを用いて「My植物」をスケッチしてみましょう。スケッチのヒントとして、アルゴリズムによる植物の形態の抽象化して描画する方法について解説します。
openFrameworksをiPhone開発に用いることで、音の再生(サウンド、音楽)、音声の録音といった、音にまつわる機能を簡単に実装することが可能です。音とiPhoneのタッチパネルや、マイクからの入力などを活用して、音をインタラクションの要素として使用した「音アプリ」をアイデア次第でいろいろ作成することが可能です。今回はタッチパネルを使ってフレーズのループを演奏できる簡易シーケンサー的な音アプリと、マイクに入力された音のレベルにあわせて画面上の顔の表情が変化するという2種類の「音アプリ」を作ってみます。