Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (9)
Mehr von Atsushi Tadokoro
Mehr von Atsushi Tadokoro (18)
Interactive Music II Processing基本
- 1. Interactive Music II SuperCollider応用 2 Processing基本 東京藝術大学芸術情報センター (AMC) 2013年12月19日 田所 淳
- 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...);
- 11. 座標、点を描く ‣ コンピュータ画面上に図形を描いたりアニメーションをするた めには、どこに図形を描くのか「場所」を指定する必要がある ‣ 場所を指定するには「座標」を使用する ! ‣ ２次元の平面では、原点からみた横の距離と縦の距離を記述 ! ‣ Processingでは、ウィンドウの左上を原点(0,0)とする ‣ 右方向の距離を「x座標」下方向の位置を「y座標」 ‣ 単位はピクセル(Pixel)
- 12. 座標、点を描く ‣ 例えば（300, 200）という点 ‣ 画面表示領域の左上から300ピクセル右、200ピクセル下
- 13. 座標、点を描く ‣ Processingで(300, 200)の場所に点を描いてみる size(640,480); //640x480pixelの画面を生成 point(300,200); //300x200の場所に点を描く
- 16. 線を描く ‣ 線を描くプログラム size(640,480); //640x480pixelの画面を生成 point(300,200); //(300,200)の場所に点を描く line(50,100,400,300); //(50,100)の点から(400,300)の点へ線を引く
- 17. 線を描く ‣ 線が描かれる
- 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の四角形を描く
- 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. コンピュータで絵を描くということ ‣ コンピュータ画面は、縦横沢山のピクセルから構成された巨大 なエクセルの表のようなもの ‣ 例：1024 x 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の値＞);
- 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の楕円を描く
- 31. アニメーション
- 32. アニメーション ‣ 今日は、さわりの部分まで ! ‣ アニメーションをつくるには、すこしづつ変化する画像を、一 定間隔で入れ替える必要がある ‣ パラパラ漫画 ! ‣ Processingでアニメーションを実現するには ‣ 現在のプログラムをより構造化していく必要がある
- 33. アニメーション ‣ setup()とupdate()という二つのパートに構造化してアニメーショ ンを実現 ! ‣ setup() - 初期設定: ‣ プログラムの起動時に一度だけ実行 ‣ 画面の基本設定やフレームレートなどを設定します。 ! ‣ draw() - 描画: ‣ 設定した速さ(フレームレート)でプログラムが終了するまでく りかえし実行されます。
- 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座標を更新 }
- 37. 今日は、ここまで!!