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