interactive music ii processing基本
TRANSCRIPT
インターフェイスの使いかた‣ 実行(play)ボタン:プログラムの実行 ‣ 停止(stop)ボタン:プログラムの停止 ‣ 新規作成(new)ボタン:新規ファイル(Processingではスケッチと呼ぶ)の生成
‣ 読込み(Opens)ボタン:保存された作品の選択 ‣ 保存(Saves)ボタン:スケッチを保存 (別名で保存したい場合はファイルメニューより''save As''を選択)
‣ 出力(Exports)ボタン:表示されているスケッチをJAVAアプレットとして出力。 JAVAアプレットを表示するために必要な最低限のHTMLタグも同時に書き出す
Processingのインストールのやりかた‣ 家でもProcessingを使用したい人のために !
‣ 入手方法 ‣ http://processing.org/download/ から
Processingプログラミングの基本‣ 実行の順序:上から順番に読みこまれていく ‣ 半角の英数字 (全角はダメ) のみを使用すること ‣ 文末にはセミコロン “;” を入れる !
‣ いろいろな括弧が入れ子構造になっている ‣ おなじ括弧に囲まれている部分がひとつのブロック !
‣ 最小単位 → 関数 ‣ 関数名(引数);
関数‣ 関数 (function) とは ‣ 引数と呼ばれるデータを受け取り、定められた通りの処理を実行して結果を返す一連の命令群。
!‣ Processing=ビジュアルプログラミングのための関数の集合 ‣ 関数名とその引数(パラメータ)から構成される ‣ 引数の数は関数によって異なる
関数名(引数1, 引数2, 引数3...);
座標、点を描く‣ コンピュータ画面上に図形を描いたりアニメーションをするためには、どこに図形を描くのか「場所」を指定する必要がある
‣ 場所を指定するには「座標」を使用する !
‣ 2次元の平面では、原点からみた横の距離と縦の距離を記述 !
‣ Processingでは、ウィンドウの左上を原点(0,0)とする ‣ 右方向の距離を「x座標」下方向の位置を「y座標」 ‣ 単位はピクセル(Pixel)
size(640,480); //640x480pixelの画面を生成 point(300,200); //300x200の場所に点を描く
座標、点を描く‣ Processingで(300, 200)の場所に点を描いてみる
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
色の指定‣ 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() - 描画: ‣ 設定した速さ(フレームレート)でプログラムが終了するまでくりかえし実行されます。
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座標を更新 }
アニメーション‣ この仕組みを利用して、円が斜め下に移動するプログラムを作成