Interactive Music II SuperCollider応用 2 - Processing基本

東京藝術大学芸術情報センター (AMC) 2013年12月19日 田所 淳

最終課題に向けての方針‣ 前回解説したOSCを活用して、SuperColliderでサウンドを、Processingでビジュアルを表現します

OSC

Processingはじめの一歩

インターフェイスの使いかた

インターフェイスの使いかた‣ 実行(play)ボタン：プログラムの実行 ‣ 停止(stop)ボタン：プログラムの停止 ‣ 新規作成(new)ボタン：新規ファイル（Processingではスケッチと呼ぶ）の生成

‣ 読込み(Opens)ボタン：保存された作品の選択 ‣ 保存(Saves)ボタン：スケッチを保存 (別名で保存したい場合はファイルメニューより''save As''を選択)

‣ 出力(Exports)ボタン：表示されているスケッチをJAVAアプレットとして出力。 JAVAアプレットを表示するために必要な最低限のHTMLタグも同時に書き出す

Processingのインストールのやりかた‣ 家でもProcessingを使用したい人のために !

‣ 入手方法 ‣ http://processing.org/download/ から

Processingプログラミングの基本‣ 実行の順序：上から順番に読みこまれていく ‣ 半角の英数字 (全角はダメ) のみを使用すること ‣ 文末にはセミコロン “;” を入れる !

‣ いろいろな括弧が入れ子構造になっている ‣ おなじ括弧に囲まれている部分がひとつのブロック !

‣ 最小単位 → 関数 ‣ 関数名(引数);

関数‣ 関数 (function) とは ‣ 引数と呼ばれるデータを受け取り、定められた通りの処理を実行して結果を返す一連の命令群。

!‣ Processing=ビジュアルプログラミングのための関数の集合 ‣ 関数名とその引数（パラメータ）から構成される ‣ 引数の数は関数によって異なる

関数名(引数1, 引数2, 引数3...);

Processingで図形を描く

Processingで図形を描く‣ 実際に簡単な図形を描きながら、Processingの基本を学んでいきましょう

座標、点を描く‣ コンピュータ画面上に図形を描いたりアニメーションをするためには、どこに図形を描くのか「場所」を指定する必要がある

‣ 場所を指定するには「座標」を使用する !

‣ ２次元の平面では、原点からみた横の距離と縦の距離を記述 !

‣ Processingでは、ウィンドウの左上を原点(0,0)とする ‣ 右方向の距離を「x座標」下方向の位置を「y座標」 ‣ 単位はピクセル(Pixel)

座標、点を描く‣ 例えば（300, 200）という点 ‣ 画面表示領域の左上から300ピクセル右、200ピクセル下

size(640,480); //640x480pixelの画面を生成 point(300,200); //300x200の場所に点を描く

座標、点を描く‣ Processingで(300, 200)の場所に点を描いてみる

座標、点を描く‣ ほとんどわかりませんが、点が描かれている!

線を描く‣ Processingでは、線は2つの点を結ぶ図形と考える

size(640,480); //640x480pixelの画面を生成 point(300,200); //(300,200)の場所に点を描く line(50,100,400,300); //(50,100)の点から(400,300)の点へ線を引く

線を描く‣ 線を描くプログラム

線を描く‣ 線が描かれる

四角形を描く‣ 次に四角形を描く ‣ まず左上の点の座標を指定して、次に幅と高さを指定する

size(640,480); //640x480pixelの画面を生成 point(300,200); //(300,200)の場所に点を描く line(50,100,400,300); //(50,100)の点から(400,300)の点へ線を引く rect(400,100,100,300); //(400,100)の点から、幅100、高さ300の四角形を描く

四角形を描く‣ 線を描くプログラム

四角形を描く‣ 四角形が追加された!

楕円を描く‣ 最後に楕円にトライ ‣ 円や楕円は中心位置の座標と、幅と高さを指定

size(640,480); //640x480pixelの画面を生成 point(300,200); //(300,200)の場所に点を描く line(50,100,400,300); //(50,100)の点から(400,300)の点へ線を引く rect(400,100,100,300); //(400,100)の点から、幅100、高さ300の四角形を描く ellipse(200,340,300,200); //(200,340)の点を中心に、幅300高さ200の楕円を描く

楕円を描く‣ 楕円を追加

楕円を描く‣ 完成!

色を指定する‣ コンピュータの画面はどうなっているのか? !

‣ コンピュータの画面を拡大していくと... ‣ 縦横に並んだ点の集合 → ピクセル (Pixel) ‣ 一つのピクセルは赤、緑、青の三原色から成り立っている

コンピュータで絵を描くということ‣ コンピュータ画面は、縦横沢山のピクセルから構成された巨大なエクセルの表のようなもの

‣ 例：1024 x 768 の液晶画面 ‣ 横に1024列縦に768行ならんだ巨大な表 ‣ それぞれのセルにR,G,B,A(アルファ値)が格納されている

RG

BA

色の指定‣ 色を指定するには? ‣ R(赤) G(緑) B(青)の三原色で指定する !

‣ 加法混色 (光の三原色であることに注意) ←→ 色料の三原色

光の三原色 色料の三原色

色の指定‣ 3つの色の属性 ‣ 背景色 background関数 !!!

‣ 線に色をつける stroke関数 !!!

‣ 塗りの色をつける fill関数

bacground(background(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);

stroke(background(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);

fill(background(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);

色の指定‣ 色や線塗りつぶしの設定は、それ以降すべての描画に使われる ‣ 色を変えるには改めて別の色を設定する命令を入れる

background(15); //背景色 stroke(63,191,255); //線の色 fill(0,127,255,127); //塗りの色 size(640, 480); //640x480pixelの画面を生成 point(300, 200); //(300,200)の場所に点を描く line(50, 100, 400, 300); //(50,100)の点から(400,300)の点へ線を引く rect(400, 100, 100, 300); //(400,100)の点から、幅100、高さ300の四角形を描く ellipse(200, 340, 300, 200); //(200,340)を中心に幅300高さ200の楕円を描く

色の指定‣ 背景色、塗りつぶしの色、ストロークの色の指定

色の指定‣ 背景、線、面に、それぞれ色が塗られる

アニメーション

アニメーション‣ 今日は、さわりの部分まで !

‣ アニメーションをつくるには、すこしづつ変化する画像を、一定間隔で入れ替える必要がある

‣ パラパラ漫画 !

‣ Processingでアニメーションを実現するには ‣ 現在のプログラムをより構造化していく必要がある

アニメーション‣ setup()とupdate()という二つのパートに構造化してアニメーションを実現 !

‣ setup() - 初期設定: ‣ プログラムの起動時に一度だけ実行 ‣ 画面の基本設定やフレームレートなどを設定します。 !

‣ draw() - 描画: ‣ 設定した速さ(フレームレート)でプログラムが終了するまでくりかえし実行されます。

アニメーション‣ setup()とupdate() のイメージ

float posX, posY; //円の中心位置を格納する変数 float speedX, speedY; //円の速度を格納する変数 void setup() { size(640, 480); //640x480pixelの画面を生成 frameRate(60); //フレームレート stroke(63, 191, 255); //線の色 fill(0, 127, 255, 127); //塗りの色 posX = 40; //円の初期位置X posY = 40; //円の初期位置Y speedX = 3; //円の初期位置X speedY = 2; //円の初期位置Y } !void draw() { background(15); //背景を描画 ellipse(posX, posY, 20, 20); //指定した位置に円を描画 posX = posX + speedX; //円のX座標を更新 posY = posY + speedY; //円のY座標を更新 }

アニメーション‣ この仕組みを利用して、円が斜め下に移動するプログラムを作成

アニメーション‣ 円が等速度で移動する

今日は、ここまで!!