Interactive Music II Processing基本

2,501 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,501
On SlideShare
0
From Embeds
0
Number of Embeds
802
Actions
Shares
0
Downloads
32
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Interactive Music II Processing基本

  1. 1. Interactive Music II SuperCollider応用 2 Processing基本 東京藝術大学芸術情報センター (AMC) 2013年12月19日 田所 淳
  2. 2. 最終課題に向けての方針 ‣ 前回解説したOSCを活用して、SuperColliderでサウンドを、 Processingでビジュアルを表現します OSC
  3. 3. Processingはじめの一歩
  4. 4. インターフェイスの使いかた
  5. 5. インターフェイスの使いかた ‣ 実行(play)ボタン:プログラムの実行 ‣ 停止(stop)ボタン:プログラムの停止 ‣ 新規作成(new)ボタン:新規ファイル(Processingではスケッ チと呼ぶ)の生成 ‣ 読込み(Opens)ボタン:保存された作品の選択 ‣ 保存(Saves)ボタン:スケッチを保存 (別名で保存したい場合は ファイルメニューより''save As''を選択) ‣ 出力(Exports)ボタン:表示されているスケッチをJAVAアプレッ トとして出力。 JAVAアプレットを表示するために必要な最低 限のHTMLタグも同時に書き出す
  6. 6. Processingのインストールのやりかた ‣ 家でもProcessingを使用したい人のために ! ‣ 入手方法 ‣ http://processing.org/download/ から
  7. 7. Processingプログラミングの基本 ‣ 実行の順序:上から順番に読みこまれていく ‣ 半角の英数字 (全角はダメ) のみを使用すること ‣ 文末にはセミコロン ; を入れる ! ‣ いろいろな括弧が入れ子構造になっている ‣ おなじ括弧に囲まれている部分がひとつのブロック ! ‣ 最小単位 → 関数 ‣ 関数名(引数);
  8. 8. 関数 ‣ 関数 (function) とは ‣ 引数と呼ばれるデータを受け取り、定められた通りの処理を 実行して結果を返す一連の命令群。 ! ‣ Processing=ビジュアルプログラミングのための関数の集合 ‣ 関数名とその引数(パラメータ)から構成される ‣ 引数の数は関数によって異なる 関数名(引数1, 引数2, 引数3...);
  9. 9. Processingで図形を描く
  10. 10. Processingで図形を描く ‣ 実際に簡単な図形を描きながら、Processingの基本を学んでい きましょう
  11. 11. 座標、点を描く ‣ コンピュータ画面上に図形を描いたりアニメーションをするた めには、どこに図形を描くのか「場所」を指定する必要がある ‣ 場所を指定するには「座標」を使用する ! ‣ 2次元の平面では、原点からみた横の距離と縦の距離を記述 ! ‣ Processingでは、ウィンドウの左上を原点(0,0)とする ‣ 右方向の距離を「x座標」下方向の位置を「y座標」 ‣ 単位はピクセル(Pixel)
  12. 12. 座標、点を描く ‣ 例えば(300, 200)という点 ‣ 画面表示領域の左上から300ピクセル右、200ピクセル下
  13. 13. 座標、点を描く ‣ Processingで(300, 200)の場所に点を描いてみる size(640,480); //640x480pixelの画面を生成 point(300,200); //300x200の場所に点を描く
  14. 14. 座標、点を描く ‣ ほとんどわかりませんが、点が描かれている!
  15. 15. 線を描く ‣ Processingでは、線は2つの点を結ぶ図形と考える
  16. 16. 線を描く ‣ 線を描くプログラム size(640,480); //640x480pixelの画面を生成 point(300,200); //(300,200)の場所に点を描く line(50,100,400,300); //(50,100)の点から(400,300)の点へ線を引く
  17. 17. 線を描く ‣ 線が描かれる
  18. 18. 四角形を描く ‣ 次に四角形を描く ‣ まず左上の点の座標を指定して、次に幅と高さを指定する
  19. 19. 四角形を描く ‣ 線を描くプログラム 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の四角形を描く
  20. 20. 四角形を描く ‣ 四角形が追加された!
  21. 21. 楕円を描く ‣ 最後に楕円にトライ ‣ 円や楕円は中心位置の座標と、幅と高さを指定
  22. 22. 楕円を描く ‣ 楕円を追加 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の楕円を描く
  23. 23. 楕円を描く ‣ 完成!
  24. 24. 色を指定する ‣ コンピュータの画面はどうなっているのか? ! ‣ コンピュータの画面を拡大していくと... ‣ 縦横に並んだ点の集合 → ピクセル (Pixel) ‣ 一つのピクセルは赤、緑、青の三原色から成り立っている
  25. 25. コンピュータで絵を描くということ ‣ コンピュータ画面は、縦横沢山のピクセルから構成された巨大 なエクセルの表のようなもの ‣ 例:1024 x 768 の液晶画面 ‣ 横に1024列縦に768行ならんだ巨大な表 ‣ それぞれのセルにR,G,B,A(アルファ値)が格納されている A B G R
  26. 26. 色の指定 ‣ 色を指定するには? ‣ R(赤) G(緑) B(青)の三原色で指定する ! ‣ 加法混色 (光の三原色であることに注意) ←→ 色料の三原色 光の三原色 色料の三原色
  27. 27. 色の指定 ‣ 3つの色の属性 ‣ 背景色 background関数 ! bacground(background(<Rの値>, <Gの値>, <Bの値>); ! ! ‣ 線に色をつける stroke関数 ! stroke(background(<Rの値>, <Gの値>, <Bの値>); ! ! ‣ 塗りの色をつける fill関数 fill(background(<Rの値>, <Gの値>, <Bの値>);
  28. 28. 色の指定 ‣ 色や線塗りつぶしの設定は、それ以降すべての描画に使われる ‣ 色を変えるには改めて別の色を設定する命令を入れる
  29. 29. 色の指定 ‣ 背景色、塗りつぶしの色、ストロークの色の指定 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の楕円を描く
  30. 30. 色の指定 ‣ 背景、線、面に、それぞれ色が塗られる
  31. 31. アニメーション
  32. 32. アニメーション ‣ 今日は、さわりの部分まで ! ‣ アニメーションをつくるには、すこしづつ変化する画像を、一 定間隔で入れ替える必要がある ‣ パラパラ漫画 ! ‣ Processingでアニメーションを実現するには ‣ 現在のプログラムをより構造化していく必要がある
  33. 33. アニメーション ‣ setup()とupdate()という二つのパートに構造化してアニメーショ ンを実現 ! ‣ setup() - 初期設定: ‣ プログラムの起動時に一度だけ実行 ‣ 画面の基本設定やフレームレートなどを設定します。 ! ‣ draw() - 描画: ‣ 設定した速さ(フレームレート)でプログラムが終了するまでく りかえし実行されます。
  34. 34. アニメーション ‣ setup()とupdate() のイメージ
  35. 35. アニメーション ‣ この仕組みを利用して、円が斜め下に移動するプログラムを作成 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座標を更新 }
  36. 36. アニメーション ‣ 円が等速度で移動する
  37. 37. 今日は、ここまで!!

×