Microsoft Word - mtb2011_processing.docx

Transcription

1 メディア 技 術 基 礎 (web ) 脇 田 玲 先 生 (2010) 田 中 浩 也 (2011) Processing [ 第 一 回 ] 基 本 的 な 描 画 線 の 描 画 長 方 形 円 の 描 画 for 文 を 用 いた 繰 り 返 し ランダムな 数 値 を 用 いた 描 画 サンプルプログラム size(400, 400); //ウィンドウのサイズを 決 定 ( 横 幅 縦 幅 ) colormode(rgb,255); //カラーモードを 設 定 (モード 最 大 値 ) background(255,255,255); // 背 景 の 色 を 指 定 (R,G,B)この 場 合 は 白 stroke(0,0,255); strokeweight(2); // 線 の 色 を 指 定 (R,G,B) // 線 の 太 さを 指 定 (ピクセル)

2 line(50,50,350,350); 座 標, 終 点 y 座 標 ) // 線 を 引 く( 始 点 x 座 標, 始 点 y 座 標, 終 点 x [Processing の 座 標 系 ] Processing のウィンドウでは 左 上 が 原 点 となり x は 右 y は 下 が+ 方 向 となる [ 線 を 描 画 する 関 数 ] line(x1,y1,x2,y2); 座 標 (x1,y1)から 座 標 (x2,y2)までの 線 分 を 描 画 [カラーモードを 設 定 する 関 数 する 関 数 ] colormode(mode,value); カラーモードを mode(rgb or HSB)に 設 定 値 を 0 value の 間 で 設 定 RGB モードの 場 合 色 を(Red: 赤 の 強 さ(0 value) Green: 緑 の 強 さ(0 value) Blue: 青 の 強 さ(0 value) Alpha: 透 明 度 (0 value))で 設 定 HSB モードの 場 合 色 を(Hue: 色 相 (0 value) Satulation: 彩 度 (0 value) Brightness: 明 度 (0 value) Alpha: 透 明 度 (0 value))で 設 定

3 練 習 点 (100,100),(100,300),(300,100),(300,300)を 結 んで 正 方 形 を 描 画 しましょう [ 課 題 1-1 Processing 実 行 画 面 サンプル] 1-2(a) 繰 り 返 し(for 文 )を 用 いて 下 のサンプルのような 等 間 隔 の 縦 ラインを 描 画 しましょう サンプルでは ライン 同 士 の 間 隔 は 10 ピクセルで 40 本 のラインを 描 画 しています [ 課 題 1-2(a) 実 行 画 面 ]

4 [for 文 を 用 いた 繰 り 返 し] int i; for(i=0;i<40;i++){ ( 繰 り 返 したい 命 令 ) まず 繰 り 返 しが 何 回 目 かをカウントする 変 数 を 定 義 する 1.( 繰 り 返 しカウント 0)1 回 実 行 { 内 の 命 令 2. 命 令 を 実 行 し 終 えたら 変 数 を 1 カウントし 繰 り 返 す 命 令 の 最 初 に 戻 る 3. 繰 り 返 し 1 回 目 ( 実 行 は 2 回 目 ) 実 行 { 内 の 命 令 4. 命 令 を 実 行 し 終 えたら 変 数 を 1 カウントし 繰 り 返 す 命 令 の 最 初 に 戻 る 5. 上 の 手 順 で 実 行 を 続 ける 6. 繰 り 返 しカウントが 設 定 した 上 限 まで 行 ったら 繰 り 返 し 終 了 となる int i; カウントするための 整 数 を 定 義 する for(i=0;i<40;i++){ i( 繰 り 返 しカウント)が 0 のとき( 初 回 実 行 時 )から 40 未 満 (39 まで)の 間 { 内 の 命 令 を 繰 り 返 す (この 場 合 40 回 繰 り 返 す ) i++は i を1ずつカウントする という 定 義 1-2(b) 1-2(a)で 描 画 したラインの 色 を for 文 ( 変 数 i)を 上 手 く 利 用 して グラデーションにして みましょう ( 線 の x 座 標 値 を 変 化 させていく 方 法 を stroke 関 数 にも 応 用 ) [ 課 題 1-2(b) Processing 実 行 画 面 サンプル] 1-3 下 のような 図 形 を 描 画 してみましょう

5 [ 課 題 1-3 実 行 画 面 サンプル] 一 見 複 雑 に 見 えますが line(0,0,0,400),line(10,0,0,390),..と 始 点 の x 座 標 が 0 から 10 ずつ 増 えていくと 同 時 に 終 点 の y 座 標 が 400 から 10 ずつ 減 っていく という 繰 り 返 し で 書 くことができます smooth(); という 関 数 を 描 画 命 令 の 前 に 書 くと 曲 線 などを 滑 らかに 描 画 できます サンプルプログラム 2

6 size(400, 400); //ウィンドウのサイズを 決 定 ( 横 幅 縦 幅 ) colormode(rgb,255); //カラーモードを 設 定 (モード 最 大 値 ) background(255,255,255); // 背 景 の 色 を 指 定 (R,G,B)この 場 合 は 白 nostroke(); // 線 をなしに 設 定 fill(0,255,0,100); // 塗 りの 色 を 設 定 ( 赤 緑 青 透 明 度 ) rect(0,0,200,200); // 長 方 形 を 描 画 ( 左 上 の 点 の x 座 標,y 座 標, 横 幅, 縦 幅 ) rect(200,200,200,200); fill(0,0,255,100); ellipse(0,0,200,200); // 楕 円 を 描 画 ( 中 心 の x 座 標,y 座 標, 横 幅, 縦 幅 ) ellipse(200,200,200,200);

7 [ 長 方 形 を 描 画 する 関 数 ] rect(x,y,width,height); 座 標 (x,y)を 基 準 ( 左 上 の 角 )とした 幅 width 高 さ height の 長 方 形 を 描 画 rectmode(center) を rect 関 数 の 前 に 記 述 すると 基 準 点 (x,y)を 長 方 形 の 中 心 に することができる [ 楕 円 を 描 画 する 関 数 ] ellipse(x,y,width,height); 座 標 (x,y)を 中 心 とした 幅 width 高 さ height の 楕 円 を 描 画 [ 塗 りつぶしの 色 を 設 定 (RGB の 場 合 )] fill(red,green,blue,alpha); 塗 りつぶしの 色 を 赤 の 強 さ red 緑 の 強 さ green 青 の 強 さ blue 透 明 度 alpha に 指 定 alpha は 0 であれば 透 明 255 では 不 透 明 ( 通 常 の 色 )となる 練 習 (0,0),(200,200),(0,400),(400,0),(400,400)の 点 を 中 心 とする 半 径 200 の 円 を 描 画 してみ ましょう 円 の 色 を 半 透 明 にして 描 画 してみましょう [ 課 題 2-1 Processing 実 行 画 面 サンプル] 2-2(a) for 文 を 用 いて 下 の 図 形 を 描 画 してみましょう 正 方 形 の 一 辺 の 長 さは 80 ピクセル 位 置 は(0,0),(80,80),(160,160),...となっています 透 明 度 や 色 の 設 定 はサンプル 通 りでなくても 構 いません 自 由 に 設 定 してください [ 課 題 2-2(a) 実 行 画 面 サンプル]

8 2-2(b) for 文 を 用 いて 半 透 明 の 正 方 形 を 大 きさを 変 えながら 重 ねて 描 画 し 以 下 のような 描 画 を 行 ってみましょう サンプルでは 書 く 正 方 形 の 透 明 度 は 50 正 方 形 のサイズが 40 ピクセルから 400 ピク セルまで 40 ずつ 増 えています rectmode(center) を rect 関 数 の 前 に 記 述 すると 基 準 点 (x,y)を 長 方 形 の 中 心 にす ることができる [ 課 題 2-2(b) 実 行 画 面 サンプル]

9 2-3 for 文 を 用 いて 以 下 の 例 のような 円 の 中 心 点 が 円 周 上 を 移 動 して 描 かれる 図 形 を 描 画 してみましょう [ 課 題 2-3 実 行 画 面 サンプル]

10 [Hint] 三 角 関 数 を 使 用 して 書 いてみましょう sin(radian),cos(radian),tan(radian) 角 度 radian(ラジアン)の 時 の sin,cos,tan それぞれの 値 を 出 力 例 えば ellipse(300*cos(pi/3),300*sin(pi/3),100,100); 等 のように 使 用 できる ラジアン(rad)と 度 数 の 関 係 は 0 のとき 0rad 180 の 時 πrad 360 の 時 2πrad Processing では π は PI と 書 くことで 使 用 可 能 サンプルプログラム 3

11 size(400, 400); //ウィンドウのサイズを 決 定 ( 横 幅 縦 幅 ) colormode(rgb,255); //カラーモードを 設 定 (モード 最 大 値 ) background(0,0,0); // 背 景 の 色 を 指 定 (R,G,B)この 場 合 は 黒 for(int i=0;i<50;i++){ stroke(0,0,255,255); float ry=random(height); ダムな 数 値 を 出 力 し ry に 代 入 line(0,ry,width,ry); //0 height(ウィンドウの 縦 幅 )までのラン

12 [ランダムに 値 を 設 定 する] 上 限 を 設 定 する 場 合 random(value); 0 value までのランダムな 値 を 出 力 する 範 囲 を 指 定 する 場 合 random(min,max); min max までのランダムな 値 を 出 力 する [ウィンドウの 幅 高 さの 値 を 使 用 する] 変 数 としてウィンドウの 幅 高 さを 使 用 したい 場 合 width,height という 変 数 があらかじ め 用 意 されているので それを 用 いることで サンプルプログラムのように ウィンドウ の 高 さ 幅 を 使 用 することができます 練 習 3 3-1(a) 水 平 な 直 線 ではなく ランダムな y 座 標 から 別 のランダムな y 座 標 までの 直 線 を 描 画 するようにサンプルを 変 更 してみましょう [ 課 題 3-1(a) Processing 実 行 画 面 サンプル] 3-1(b) 座 標 値 だけでなく 色 線 の 太 さにもランダムな 数 値 を 用 いて 描 画 を 行 ってみましょう サンプルでは 線 の 太 さを 1 から 3 の 間 青 緑 の 強 さを 100 から 255 の 間 でランダ ムに 設 定 しています 範 囲 を 決 める 時 は random( 下 限, 上 限 ); を 用 います [ 課 題 3-1(b) Processing 実 行 画 面 サンプル] 3-1(c) line(0,random(400),random(400),0); と 指 定 すればウィンドウの 左 辺 から 上 辺 への 斜 めのランダムな 線 を 描 画 することがで きます これを 利 用 して 左 辺 から 上 辺 右 辺 から 上 辺 左 辺 から 下 辺 右 辺 から 下 辺 すべて

13 についてランダムな 線 の 集 合 を 描 画 してみましょう [ 課 題 3-1(c) Processing 実 行 画 面 サンプル] 3-2 画 面 に 5 5 の 正 方 形 を 描 画 し ランダムを 利 用 して 塗 ってみましょう [Hint] for 文 のネスト( 入 れ 子 )を 使 う for 文 の 中 にもうひとつ for 文 を 作 る for(int i=0;i<5;i++){ for(int j=0;j<5;i++){ [ 課 題 3-2 Processing 実 行 画 面 サンプル] 課 題 Processing で 自 由 な 描 画 を 行 い Java アプレットとして 自 分 のウェブに 載 せましょう 授 業 で 習 っていない 描 画 方 法 などを 使 用 していただいても 結 構 です ( 参 考 URL[Processing.org Reference]) 提 出 締 切 : 5/27 ( 木 ) 23:59 [Processing で 作 ったファイルをウェブにアップする 方 法 ] File メニューから Export を 選 択 (Ctrl+E) Processing のソースが 保 存 されているディレクトリ(デフォルトでは My Documents 以 下 の Processing ディレクトリ 内 プログラム 名 のディレクトリ)に Applet というディレクト リが 作 られ 自 動 的 に 開 かれ 中 には index.html (プログラム 名 ).pde Processing のソースファイル (プログラム 名 ).jar プログラムのアプレット (プログラム 名 ).java プログラムの Java のソースコード

14 loading.gif アプレットロード 時 用 の 画 像 という 5 つのファイルがつくられます index.html には すでにアプレットが 埋 め 込 まれた 状 態 で html になっているので この まま Applet ディレクトリごとアップして ディレクトリ 内 の index.html にリンクを 張 ること で プロセッシングで 作 ったものを Web にアップすることが 可 能 です 課 題 の 提 出 方 法 課 題 を 個 人 のディレクトリに 以 下 の URL になるように 配 置 します

15 Processing [ 第 二 回 ] アニメーションの 基 本 ランダムな 描 画 速 度 を 用 いた 運 動 の 表 現 条 件 分 岐 (if,else) サンプルプログラム サンプルを 表 示 void setup(){ size(400, 400); colormode(rgb,255); background( (255,255,255); //ウィンドウのサイズを 決 定 ( 横 幅 縦 幅 ) //カラーモードを 設 定 (モード 最 大 値 ) // 背 景 の 色 を 指 定 (R,G,B) この 場 合 は 白

16 framerate(30); seconds) //フレームレートを 設 定 (fps:frame per void draw(){ stroke(0,random(255),random(255),50); line(random(width),random(height),random(width),random(height)); [アニメーションの 基 本 ] Processing では メインループ 関 数 (draw 関 数 ) 内 に 書 かれた 命 令 を 繰 り 返 し 実 行 す ることによって 動 的 な 描 画 を 行 います サンプルでは ランダムな 点 からランダムな 点 まで 線 を 引 くという 命 令 を 一 秒 間 に 30 回 のペースで 繰 り 返 し 実 行 するというプログラムで 描 画 を 行 っているます [ 初 期 化 関 数 ] void setup(){ ( 初 期 化 する 内 容 ) プログラムの 最 初 ( 実 行 時 )に 一 度 だけ 実 行 される 命 令 を 書 きます ウィンドウサイズの 指 定 色 モードの 指 定 背 景 色 の 指 定 フレームレートの 設 定 等 初 期 化 で 一 度 だけ 設 定 すればいい 命 令 などを 書 きます [メインループ 関 数 ] void draw(){ (ループさせたい 命 令 ) ここに 書 いた 命 令 は 無 限 ループのように 繰 り 返 し 実 行 されます 繰 り 返 しのインターバルは フレームレートの 設 定 に 依 存 します draw 関 数 内 のプログラムを 上 から 順 に 実 行 一 定 時 間 (サンプルでは 1/30 秒 ) 繰 り 返 し というようになります [フレームレートを 設 定 する 関 数 ]

17 framerate(fps); 一 秒 間 に fps 回 繰 り 返 し 描 画 する (1/30 毎 にメインループ 関 数 内 の 命 令 を 繰 り 返 す) フレームレートの 単 位 は fps:frame per seconds( 一 秒 間 に 描 画 するフレーム 数 )で 表 します このとき フレームとは 映 画 のフィルムや アニメのセル 画 のようなものと 考 えることが できます 練 習 終 点 (もしくは 始 点 )をウィンドウの 中 心 に 設 定 して 放 射 線 状 に 線 を 描 画 してみましょ う [ 練 習 1-1 Processing 実 行 画 面 サンプル] 1-2 ランダムな1 点 で 交 差 する x 軸 と 平 行 な 直 線 と y 軸 と 平 行 な 直 線 を 描 画 してみましょう [Hint] ランダムな y 座 標 をとる x 軸 と 平 行 な 線 ( 水 平 線 )を 引 く 場 合 float ry=random(height); line(0,ry,width,ry); というように 指 定 すればよい [ 練 習 1-2 Processing 実 行 画 面 サンプル] 1-3 ランダムな 位 置 に 正 方 形 を 描 画 してみましょう ( 位 置 が 重 なることがあるので 半 透 明 な 塗 りで 描 画 してみましょう) [ 練 習 1-3 Processing 実 行 画 面 サンプル] サンプルプログラム 2

18 サンプルを 表 示 int x=0; int speed=10; //x 座 標 の 初 期 値 を 設 定 (グローバル 変 数 ) // 速 度 を 設 定 (グローバル 変 数 ) void setup(){ size(400, 400); colormode(rgb,255); background( (255,255,255); framerate(30); seconds) //ウィンドウのサイズを 決 定 ( 横 幅 縦 幅 ) //カラーモードを 設 定 (モード 最 大 値 ) // 背 景 の 色 を 指 定 (R,G,B) この 場 合 は 白 //フレー ームレートを 設 定 (fps:frame per void draw(){

19 nostroke(); // 線 をなしに 設 定 fill(255,255,255,255); rect(0,0,width,height); ンドウをリセット) // 塗 りの 色 を 白 ( 背 景 色 )に 設 定 // 背 景 色 でウィンドウを 塗 りつぶす(ウィ fill(50,50,50,255); ellipse(x,height/2,50,50); // 座 標 (x,height/2)に 円 を 描 画 x=x+speed; 画 する 位 置 を 10 ピクセル 動 かす) // 描 画 後 x を speed(10)だけ 増 やす( 次 に 描 [ 変 数 を 用 いたアニメーション] 今 回 のサンプルでは 円 をこちらが 意 図 したとおりに 動 かしています このとき 1フレームごとに 画 面 をリセット(サンプルの 場 合 はウィンドウを 白 く 塗 る)し x 座 標 を 10 ピクセルずつ 動 かしながら 繰 り 返 し 描 画 することにより 円 が 右 に 移 動 して いるように 見 えるアニメーションを 作 っています [ 画 面 のリセット] fill(255,255,255,255); rect(0,0,width,height); 塗 りの 色 を 白 に 設 定 し ウィンドウの 幅 高 さの 四 角 を 描 画 しています つまり ウィンドウを 白 く 塗 って 画 面 をリセット( 初 期 化 )しています この 部 分 を 書 かずに 描 画 してみるとわかりますが ウィンドウをリセットしないと それ まで 描 画 した 円 が 消 えないため 右 に 移 動 するアニメーションではなく 徐 々に 右 に 伸 びていくアニメーションになってしまいます また メインループプログラムは 上 から 順 に 実 行 した 結 果 を 出 力 するので 画 面 のリ セットを 描 画 命 令 より 下 に 書 いてしまうと 描 画 命 令 の 内 容 を 白 で 塗 りつぶした 結 果 が 出 力 されてしまうため 注 意 してください fill(255,255,255,100); rect(0,0,width,height); のように 半 透 明 の 白 で 塗 りつぶすことで 球 の 動 きの 軌 跡 を 残 すこともできます

20 [サンプルの 円 の 動 きを 軌 跡 を 残 しながら 描 画 した 例 ] [グローバル 変 数 ] サンプルの1 行 目 に 書 いてある int x=0; は 円 を 描 画 する 位 置 ( 変 化 する 値 )を 保 存 する 変 数 と 初 期 値 を 定 義 する 命 令 です int speed=10; は 円 の 移 動 する 速 度 を 保 存 する 変 数 です 初 期 値 は 1/30 秒 に 10 ピクセル 移 動 す る 速 度 に 設 定 しています 関 数 内 で 変 数 を 定 義 した 場 合 その 関 数 内 でしか 定 義 した 変 数 は 使 用 できません(こ れをローカル 変 数 といいます) たとえば 初 期 化 関 数 (setup) 内 で int x=0; と 書 いても プログラムの 最 初 に 実 行 され x に 値 が 入 れられますが メインループ 関 数 (draw) 内 でこの x を 使 うことができません このため どの 関 数 からでもアクセスできる 変 数 (こちらをグローバル 変 数 と 呼 びます) を 定 義 し 初 期 値 を 設 定 したい 場 合 は 初 期 化 関 数 やメインループ 関 数 の 外 で 定 義 を 行 います このサンプルでは int speed=10; を 描 画 関 数 (draw) 内 に 記 述 しても 描 画 には 問 題 あり ませんが 後 の 練 習 で 変 化 させる 必 要 が 出 てくるためグローバル 変 数 として 定 義 して います [ 変 数 の 操 作 ] 移 動 するアニメーションを 作 るには 描 画 するたびに 座 標 が 変 わるようにする 必 要 が あります サンプルでは メインループ 関 数 の 最 後 に x=x+speed; という 命 令 を 書 いています これは x に speed(10) 足 したものを x に 代 入 するという 命 令 で x を 10 増 やすという 意 味 です このサンプルでは メインループの 描 画 の 最 後 にグローバル 変 数 x に speed(10)をプ ラスしているため 次 に 描 画 する 際 x( 円 を 描 画 する x 座 標 )が 10 大 きく(10 ピクセル 右 ) になっています この 場 合 は 10 ピクセルというのは x が 1/30 秒 間 に 進 む 距 離 になるため speed の 値 を 変 えることにより 円 の 運 動 の 速 さを 変 えることができます 練 習 2

21 2-1 サンプルでは x が 400 を 超 えてしまうと 円 がウィンドウの 外 まで 動 いていってしまい 見 えなくなってしまいます x がウィンドウの 右 端 まで 行 ったら また 左 端 に 戻 るようにプログラムを 変 更 してみま しょう [ 練 習 2-1 Processing 実 行 画 面 サンプル] [if 文 を 用 いた 条 件 分 岐 ] この 練 習 では もし x が 400 を 超 えたら x が 0 に 戻 る というような 命 令 を 書 く 必 要 が あります このような ある 条 件 にあてはまったときに 命 令 を 実 行 する というようにしたい 場 合 if 分 を 使 います if( 条 件 式 ){ ( 条 件 式 が true なときに 実 行 する 命 令 ) このように 記 述 し 条 件 式 ( 不 等 式 や 等 式 など)が true つまり 条 件 に 当 てはまる 場 合 括 弧 { 内 の 命 令 を 実 行 する というものです もし 条 件 に 当 てはまらない 場 合 は 括 弧 { 内 の 命 令 は 実 行 されません 条 件 式 の 書 き 方 は たとえば x が 0 の 時 実 行 する 命 令 を 書 きたい 場 合 if(x=0){ y が 200 以 下 の 時 に 実 行 する 命 令 を 書 きたい 場 合 は if(y<=200){というように 書 きます 2-2 サンプルのように 円 が 右 端 まで 動 いたら 壁 にぶつかって 跳 ね 返 るように 運 動 の 方 向 を 左 に 変 え 左 端 に 行 ったらまた 右 に 動 くような 左 右 に 往 復 するアニメーションを させてみましょう [ 練 習 2-2 Processing 実 行 画 面 サンプル] [Hint] else if()を 用 いて 条 件 分 岐 をします

22 [2 つ 以 上 の 条 件 を 用 いた 場 合 分 け] if( 条 件 式 1){ Case 1:( 条 件 式 1がtrueなときに 実 行 する 命 令 ) else if( 条 件 式 2){ Case 2:( 条 件 式 1がfalseで 条 件 式 2がtrueなときに 実 行 する 命 令 ) 条 件 式 1がtrue( 条 件 1に 当 てはまる 場 合 ) Case 1の 命 令 を 実 行 条 件 式 1がfalse( 当 てはまらない)で 条 件 式 2がtrue( 当 てはまる)なとき Case 2 の 命 令 を 実 行 条 件 式 1 も 2 も 共 に false( 当 てはまらない)な 場 合 はどちらも 実 行 されません というような 仕 組 みになっています else if( 条 件 式 2){ は 何 個 でも 記 述 できるため 2 つ 以 上 の 場 合 分 けもすることができます また else{ (どの 条 件 にも 当 てはまらない 時 に 実 行 する 命 令 ) を 用 いることで どの 条 件 にも 当 てはまらない 場 合 の 命 令 も 設 定 することができます if 文 より 細 かい 条 件 分 岐 と 書 くと or && と 書 くと and つまり if(( x < 10 x >20 ) && x <30 ) と 書 くと x が 10 未 満 もしくは x が 21 以 上 で 30 以 下 の 場 合 を 指 す サンプルプログラム 3

23 サンプルを 表 示 float d1=0; (d:degree ) float d2=0; float av1=0.1; (av: angular velocity) float av2=1; (av: angular velocity) int r1=150; int r2=50; // 一 つ 目 の 円 運 動 の 角 度 を 定 義 // 二 つ 目 の 円 運 動 の 角 度 を 定 義 (d:degree) // 一 つ 目 の 円 運 動 の 角 速 度 を 定 義 // 二 つ 目 の 円 運 動 の 角 速 度 を 定 義 // 一 つ 目 の 円 運 動 の 半 径 を 定 義 (r:radius) // 二 つ 目 の 円 運 動 の 半 径 を 定 義 (r:radius) void setup(){ size(400, 400); colormode(rgb,255); //ウィンドウのサイズを 決 定 ( 横 幅 縦 幅 ) //カラーモードを 設 定 (モード 最 大 値 )

24 background(255,255,255); framerate(30); 高 めに 設 定 // 背 景 の 色 を 指 定 (R,G,B)この 場 合 は 白 // 小 刻 みな 描 画 のためフレームレートを void draw(){ smooth(); stroke(0,125,255,100); line(width/2+r1*cos(radians(d1))+r2*cos(radians(d2)), height/2+r1*sin(radians(d1))+r2*sin(radians(d2)), width/2+r1*cos(radians(d1+av1))+r2*cos(radians(d2+av2)), height/2+r1*sin(radians(d1+av1))+r2*sin(radians(d2+av2))); d1=d1+av1; d2=d2+av2; // 角 速 度 分 だけ 角 度 を 増 加 // 角 速 度 分 だけ 角 度 を 増 加 [ 角 度 をラジアンに 変 換 する 関 数 ] radians(degrees); は degrees のときのラジアン(rad: 弧 度 )を 出 力 する radians(); 関 数 を 使 用 することにより 0 ~360 の 角 度 をラジアンに 変 えることがで きます たとえば radians(180)は PI radians(120)は 2*PI/3 というように 出 力 されます [ 線 を 引 くアニメーション] サンプルの 場 合 ウィンドウの 中 央 を 中 心 とした 半 径 r1(150)の 円 周 上 を 回 転 する 半 径 r2(50)の 円 の 円 周 上 の 一 点 が 描 く 軌 跡 を 描 画 しています 複 雑 な 式 になっていますが 一 つ 一 つソースを 読 めば 理 解 できると 思 います このサンプルでは もとの 点 から 半 径 r1 の 円 が 0.1 半 径 r2 の 円 が 1 動 いたとこ ろまで 直 線 を 引 くことを 繰 り 返 し 細 かく 直 線 を 引 き 続 けて 曲 線 に 見 えるように 描 画 し ています 円 を 1 ずつ 描 画 するアニメーションを 書 く 場 合 は void draw(){ line(width/2+radius*cos(radians(degrees)),

25 height/2+radius*sin(radians(degrees)), width/2+radius*cos(radians(degrees+1)), height/2+radius*sin(radians(degrees+1))); degrees=degrees+1; となります (radius は 半 径 degrees は 角 度 です ) 練 習 サンプルは ウィンドウの 中 央 を 中 心 とする 大 きい 円 の 円 周 上 を 小 さい 円 が 回 転 する 時 の 小 さい 円 の 円 周 上 の 一 転 の 軌 跡 を 描 画 しています サンプルは 大 きい 円 が 一 周 する 間 に 小 さい 円 は 10 周 するようなプログラムになって います これを 小 さい 円 が 一 周 する 間 に 大 きい 円 が 10 周 するように 変 えてみましょう ソースが 複 雑 でわかりづらいと 思 いますが 一 つ 一 つ 読 んでみてどの 変 数 を 変 えれ ば 良 いか 考 えてみましょう [ 練 習 3-1 Processing 実 行 画 面 サンプル] 3-2 サンプルのように それぞれの 角 速 度 の 整 数 比 に 最 小 公 倍 数 があるとき その 公 倍 数 になるたびに 図 形 が 閉 じられます (サンプルは 大 円 が 1 回 小 円 が 10 回 回 転 した 時 点 で 閉 じます サンプルでは 描 画 するたびに 少 しずれが 生 じますが 理 論 上 は 常 に 同 じ 軌 道 を 通 り 続 けます ) 無 理 数 を 用 いて 無 限 に 重 ならずに 描 画 し 続 けるプログラムを 書 いてみましょう [ 練 習 3-2 Processing 実 行 画 面 サンプル] [Hint] ルートを 使 って 無 理 数 を 表 現 しましょう 無 理 数 を 用 いる 際 扱 いやすいものに 平 方 根 があります sqrt(number); で number の 平 方 根 を 出 力 します

26 例 えば sqrt(4)は 2 sqrt(2)は ( 無 理 数 )になります サンプルでは 大 円 の 角 速 度 1 に 対 し 小 円 の 角 速 度 を( 5)/10 と 設 定 しています 課 題 Processing で 自 由 なアニメーションを 作 りを 行 い 前 回 同 様 Java アプレットとして 自 分 のウェブに 載 せましょう 授 業 で 習 っていない 描 画 方 法 などを 使 用 していただいても 結 構 です ( 参 考 URL[Processing.org Reference]) 提 出 締 切 : 6/3 ( 木 ) 23:59 課 題 の 提 出 方 法 課 題 を 個 人 のディレクトリに 以 下 の URL になるように 配 置 します

27 Processing [ 第 三 回 ] インタラクティブ マウスに 反 応 させる 描 写 アプリの 作 成 ボタンの 作 成 キー ーボード 入 力 サンプルプログラム サンプルを 表 示 void setup(){ size(400, 400); colormode(rgb,255); //ウィンドウのサイズを 決 定 ( 横 幅 縦 幅 ) //カラーモードを 設 定 (モード 最 大 値 )

28 background(255,255,255); framerate(30); seconds) // 背 景 の 色 を 指 定 (R,G,B)この 場 合 は 白 //フレームレートを 設 定 (fps:frame per void draw(){ nostroke(); // 線 をなしに 設 定 fill(255,255,255,30); rect(0,0, width, height); ンドウをリセット) // 塗 りの 色 を 白 ( 背 景 色 )の 半 透 明 に 設 定 // 背 景 色 でウィンドウを 塗 りつぶす(ウィ fill(0,0,0,255); ellipse( mousex, mousey,50,50); // 円 の 色 を 黒 に 設 定 //マウスの 位 置 に 円 を 描 画 [マウス 操 作 の 基 本 ] Processing では 現 在 のマウスの 座 標 を 取 得 するには 以 下 のように 記 述 します mousex mousey 現 在 のマウスの X 座 標 現 在 のマウスの Y 座 標 練 習 マウスの 位 置 によって 色 を 変 えてみましょう [ 練 習 1-1 Processing 実 行 画 面 サンプル] 1-2 マウスの 左 ボタンが 押 されている 時 だけ 円 が 描 写 されるようにプログラミングしてく ださい [Hint] マウスが 押 されているかどうかは mousepressed で 取 得 することができます

29 [ 練 習 1-2 Processing 実 行 画 面 サンプル] 1-3 マウスのスピードによって 円 の 大 きさを 変 えてみましょう [Hint] マウスの1フレーム 前 の 座 標 を 取 得 するには 以 下 のように 記 述 します pmousex 1フレーム 前 のマウスの X 座 標 pmousey 1フレーム 前 のマウスの Y 座 標 点 間 (ポイント A,ポイント B)の 距 離 を 求 めるには 以 下 のように 記 述 します dist(ポイント A の x 座 標, ポイント A の y 座 標, ポイント B の x 座 標, ポイント B の y 座 標 ); [ 練 習 1-3 Processing 実 行 画 面 サンプル] サンプルプログラム 2

30 サンプルを 表 示 float button1_x; float button1_y; // 左 のボタンの x 座 標 // 左 のボタンの y 座 標 float button2_x; float button2_y; // 右 のボタンの x 座 標 // 右 のボタンの y 座 標 float button scale; //ボタンの 大 きさ float bgcolor; // 背 景 の 色 void setup(){ size(400, 400); colormode(rgb,255); //ウィンドウのサイズを 決 定 ( 横 幅 縦 幅 ) //カラーモードを 設 定 (モード 最 大 値 )

31 background(255,255,255); framerate(30); seconds) // 背 景 の 色 を 指 定 (R,G,B)この 場 合 は 白 //フレームレートを 設 定 (fps:frame per button1_x = 100; button1_y = height/2; //ボタンの 場 所 を 設 定 button2_x = 260; button2_y = height/2; button_scale = 40; //ボタンの 大 きさを 設 定 bgcolor = 255; // 背 景 色 の 初 期 化 void draw(){ stroke(0); // 線 を 黒 色 に 設 定 fill(bgcolor); // 塗 りの 色 をを bgcolor に 設 定 rect(0,0, width, height ); // 背 景 色 でウィンドウを 塗 りつぶす fill(100); // 左 のボタンの 色 を 設 定 rect(button1_x, button1_y,button_scale,button_scale); ンを 作 成 // 左 のボタ fill(200); // 右 のボタンの 色 を 設 定 rect(button2_x,button2_y,button_scale,button_scale); ンを 作 成 // 右 のボタ //マウスの 位 置 が 左 のボタンの 上 にあるかどうかを 判 断 { if ((mousex >= button1_x) && (mousex <= button1_x + button_scale) && (mousey >= button1_y) && (mousey <= button1_y + button_scale))

32 bgcolor = 100; // 背 景 の 色 を 設 定 し 直 す //マウスの 位 置 が 右 のボタンの 上 にあるかどうかを 判 断 { else if((mousex >= button2_x) && (mousex <= button2_x + button_scale) && (mousey >= button2_y) && (mousey <= button2_y + button_scale)) bgcolor = 200; // 背 景 の 色 を 設 定 し 直 す [マウスの 位 置 による 判 定 ] 今 回 のサンプルでは マウスがどこにあるのかを 判 断 をしています マウスがボタンの 上 にあるときを 検 出 したい 場 合 は マウスの 座 標 が ボタンの 枠 内 ( 四 角 形 の 内 側 )にあるかどうかを 判 断 すれば 可 能 と なります このとき 重 要 なのは x 座 標 と y 座 標 をそれぞれ 別 々に 判 断 し if 文 ( 条 件 分 岐 )の 中 で && を 用 いて 範 囲 を 特 定 することです サンプルでの (mousex >= button1_x) && (mousex <= button1_x + button_scale)とは (マウスの x 座 標 >= ボタンの 右 端 ) かつ (マウスの x 座 標 <= ボタンの 左 端 ) という ことです 同 じように && で 上 端 下 端 を 設 定 することで マウスがボタンの 上 にあるかどうか が 分 かります 練 習 ボタンを3つにし 背 景 色 を 赤 緑 青 に 切 り 替 えられるようにしてください [Hint]

33 float bgcolor; の 代 わりに float redcolor; float greencolor; float bluecolor; など 3つの 変 数 を 用 意 してください [ 練 習 2-1 Processing 実 行 画 面 サンプル] 2-2 ボタンをクリックしたときに 背 景 色 が 切 り 替 わるようにしてください [ 練 習 2-2 Processing 実 行 画 面 サンプル] サンプルプログラム 3

34 サンプルを 表 示 PFont myfont; の 箱 を 用 意 します //フォントを 格 納 するため void setup(){ size(400, 400); colormode(rgb,255); background( (255,255,255); framerate(30); seconds) nostroke(); //ウィンドウのサイズを 決 定 ( 横 幅 縦 幅 ) //カラーモードを 設 定 (モード 最 大 値 ) // 背 景 の 色 を 指 定 (R,G,B) この 場 合 は 白 //フレー ームレートを 設 定 (fps:frame per // 線 をなしに 設 定 myfont = loadfont("helveticaneue-48.vlw");

35 void draw(){ fill(255, 255, 255,50); rect(0,0,width,height); す // 背 景 の 塗 りを 白 の 半 透 明 に 設 定 // 背 景 色 でウィンドウを 塗 りつぶ fill(100); レーに 設 定 //テキストの 色 をグ textfont(myfont,24); さを 指 定 text("press any key ",220,height-10); を 表 示 //フォント フォントの 大 き //ナビゲーション 用 のテキスト textfont(myfont,48); //フォント フォントの 大 きさを 指 定 //キーボードが 押 されている 場 合 if (keypressed) { text(key,random(width),random(height)); 画 面 上 の 任 意 の 点 に 描 写 // 押 されたキーの 文 字 を [テキスト 描 写 の 基 本 ] Processing で 文 字 を 描 写 したいとき いくつか 注 意 点 があります [ 前 準 備 ] processing では 好 きなフォントを 使 用 できます どのフォントを 使 用 するか 指 定 するために フォントを 格 納 する 箱 を 用 意 する 必 要 が あります PFont 任 意 の 名 前 ;(サンプル1 行 目 ) PFont の 後 に 任 意 の 名 前 で 箱 を 作 成 してください 変 数 を 作 るときと 同 じです

36 次 に 用 意 した 箱 に フォントのデータを 埋 め 込 んであげます プログラミングの 前 に 以 下 の 作 業 を 行 いフォントデータを 読 み 込 みましょう まず processing のメニューの Tools Create Font... を 選 択 します すると 以 下 のような 画 面 が 出 てきますので 使 用 したいフォントを 選 んでください

37 このとき 選 択 した Filename をコピー ーしておいてください その後 先 ほど 用 意 した 箱 に 使 用 するフォントを 格 納 します 上 で 作 成 したフォントの 箱 = loadfont("フォントのファイル 名 ");(サンプル10 行 目 ) 読 み 込 み 作 業 で 選 択 した Filename をそのまま書 いてください (.vlw http: //processing.org/reference/loadfont_.html を 忘 れずに) [テキストの 描 写 ] テキストの 描 写 では 基 本 的 に 以 下 の2つの 分 が 必 要 となります textfont(フォントの 箱,フォントのサイズ);(サンプル20 行 目 ) text( 表 示 したいテキスト,x 座 標,y 座 標 );(サンプル21 行 目 ) まず textfont で 使 用 したいフォントを 指 定 し フォントの 大 きさを 設 定 します

38 次 に text で 表 示 する 内 容 と 表 示 する 場 所 を 設 定 すれば OK [まとめ] テキスト 描 写 には 以 下 の5つのプロセスが 必 要 になります Tools Create Font... から 使 用 するフォントを 選 択 PFont 任 意 の 名 前 ;(サンプル1 行 目 ) フォントの 箱 = loadfont("フォントのファイル 名 ");(サンプル10 行 目 ) textfont(フォントの 箱,フォントのサイズ);(サンプル20 行 目 ) text( 表 示 したいテキスト,x 座 標,y 座 標 );(サンプル21 行 目 ) 練 習 上 下 ボタンでフォントの 大 きさを 変 えられるようにしてください [Hint] 矢 印 キーのような 特 殊 なキーの 取 得 は keycode を 用 いると 簡 単 にできます [ 練 習 3-1 Processing 実 行 画 面 サンプル] 課 題 Processing で 自 由 なアニメーションを 作 りを 行 い 前 回 同 様 Java アプレットとして 自 分 のウェブに 載 せましょう 授 業 で 習 っていない 描 画 方 法 などを 使 用 していただいても 結 構 です ( 参 考 URL[Processing.org Reference]) 提 出 締 切 : 6/10 ( 木 ) 23:59 課 題 の 提 出 方 法

39 課 題 を 個 人 のディレクトリに 以 下 の URL になるように 配 置 します Processing [ 第 4 回 ] 配 列 配 列 の 理 解 [ 配 列 の 有 効 性 ] 配 列 ってなに?その 前 に 配 列 をどういう 時 に 使 いたくなるか 実 際 に 例 を 出 して 説 明 します! サンプルを 表 示

40 上 のサンプルは 第 7 回 講 義 の 課 題 2-2 の 運 動 を5つ 並 べたものです まだ 良 く 理 解 出 来 ていない 人 は SA を 捕 まえて 復 習 してしまいましょう さて 最 初 のサンプルのように 5つ 並 べたいときはどうしましょう 今 まで 学 んできたことでやると 以 下 のようになります int x0=0; //x 座 標 の 初 期 値 を 設 定 (グローバル 変 数 ) int x1=0; //x 座 標 の 初 期 値 を 設 定 (グローバル 変 数 ) int x2=0; //x 座 標 の 初 期 値 を 設 定 (グローバル 変 数 ) int x3=0; //x 座 標 の 初 期 値 を 設 定 (グローバル 変 数 ) int x4=0; //x 座 標 の 初 期 値 を 設 定 (グローバル 変 数 ) int speed0=10; // 速 度 を 設 定 (グローバル 変 数 ) int speed1=10; // 速 度 を 設 定 (グローバル 変 数 ) int speed2=10; // 速 度 を 設 定 (グローバル 変 数 ) int speed3=10; // 速 度 を 設 定 (グローバル 変 数 ) int speed4=10; // 速 度 を 設 定 (グローバル 変 数 ) void setup(){ size(400, 400); //ウィンドウのサイズを 決 定 ( 横 幅 縦 幅 ) colormode(rgb,255); //カラーモードを 設 定 (モード 最 大 値 ) background(255,255,255); // 背 景 の 色 を 指 定 (R,G,B)この 場 合 は 白 framerate(30); //フレームレートを 設 定 (fps:frame per seconds) void draw(){ nostroke(); // 線 をなしに 設 定 fill(255,255,255,50); rect(0,0,width,height); ンドウをリセット) // 塗 りの 色 を 白 ( 背 景 色 )に 設 定 // 背 景 色 でウィンドウを 塗 りつぶす(ウィ fill(50,50,50,255);

41 ellipse(x0,0,50,50); ellipse(x1,100,50,50); ellipse(x2,200,50,50); ellipse(x3,300,50,50); ellipse(x4,400,50,50); // 座 標 (x0,height/2)に 円 を 描 画 // 座 標 (x1,height/2)に 円 を 描 画 // 座 標 (x2,height/2)に 円 を 描 画 // 座 標 (x3,height/2)に 円 を 描 画 // 座 標 (x4,height/2)に 円 を 描 画 if (x0 < 0 x0 > width) { speed0 = -1*speed0; if (x1 < 0 x1 > width) { speed1 = -1*speed1; if (x2 < 0 x2 > width) { speed2 = -1*speed2; if (x3 < 0 x3 > width) { speed3 = -1*speed3; if (x4 < 0 x4 > width) { speed4 = -1*speed4; //x0 が 画 面 からはみ 出 したら // 円 の 進 む 方 向 を 逆 方 向 にする //x1 が 画 面 からはみ 出 したら // 円 の 進 む 方 向 を 逆 方 向 にする //x2 が 画 面 からはみ 出 したら // 円 の 進 む 方 向 を 逆 方 向 にする //x3 が 画 面 からはみ 出 したら // 円 の 進 む 方 向 を 逆 方 向 にする //x4 が 画 面 からはみ 出 したら // 円 の 進 む 方 向 を 逆 方 向 にする x0=x0+speed0; x1=x1+speed1; x2=x2+speed2; x3=x3+speed3; x4=x4+speed4; 赤 い 部 分 のように 描 写 する 円 の 数 だけ 対 応 する 変 数 を 増 やしてあげれば 出 来 ます よね それでは 円 の 数 を 10 個 にしてみましょう! それができたら 円 の 数 を 100 個 にしてみましょう! それができたら 円 の 数 を 1000 個 にしてみましょう!

42 嗚 呼 それはさすがに 大 変 です 上 のソースでは 赤 い 部 分 はほとんど 同 じ 事 を 書 いています こういった x0,x1,x2,x3...といったまとまったデータを 扱 うときに 便 利 なものが 配 列 で す! 配 列 を 使 用 すると 上 のプログラムがどうなるか 示 してみましょう サンプルプログラム サンプルを 表 示 int cnum = 5; // 円 の 数 を 保 存 する 変 数

43 int[] x = new int[cnum]; を 準 備 int[] speed = new int[cnum]; 準 備 //x 座 標 を 保 存 する 配 列 // 速 度 を 保 存 する 配 列 を void setup(){ size(400, 400); //ウィンドウのサイズを 決 定 ( 横 幅 縦 幅 ) colormode(rgb,255); //カラーモードを 設 定 (モード 最 大 値 ) background(255,255,255); // 背 景 の 色 を 指 定 (R,G,B)この 場 合 は 白 framerate(30); //フレームレートを 設 定 (fps:frame per seconds) for(int k = 0;k < cnum; k++){ x[k] = 0; //x 座 標 を 初 期 化 speed[k] = 5; //スピードを 設 定 ( 初 期 化 ) void draw(){ nostroke(); smooth(); fill(255,255,255,50); rect(0,0,width,height); ンドウをリセット) // 線 をなしに 設 定 // 塗 りの 色 を 白 ( 背 景 色 )に 設 定 // 背 景 色 でウィンドウを 塗 りつぶす(ウィ fill(50,50,50,255); for(int i = 0;i < cnum; i++){ ellipse(x[i],i*height/(cnum-1),50,50); 円 を 描 画 // 座 標 (x,height/2)に if(x[i] > width x[i] < 0){ speed[i] = -1 * speed[i]; x[i]=x[i]+speed[i];

44 [ 配 列 のとは?] 少 し シンプルになりました コードの 説 明 をする 前 に 配 列 の 説 明 をします 今 まで 数 や 文 字 を 操 作 するために 箱 ( 変 数 )を 用 意 する 方 法 を 学 んできました 最 初 の 例 では x0,x1,x2...と5つ 別 々の 箱 を 用 意 してましたが 配 列 ではこの5つを 一 つのまとまりとして 扱 うことができます 配 列 で 扱 うメリットは x の 配 列 の 何 個 目 という 使 い 方 ができるようになることです サンプルに 沿 って 具 体 例 をあげると 5つの 円 を 描 く 場 合 以 下 のように 記 述 すること ができます ellipse(x0,0,50,50); ellipse(x1,100,50,50); for(int i = 0;i < 5; i++){ ellipse(x2,200,50,50); ellipse(x[i],i*100,10,10); ellipse(x3,300,50,50); ellipse(x4,400,50,50);

45 配 列 x の1つ 目 2つ 目 という 概 念 があるため for 文 でくくり 順 番 に 処 理 することが 可 能 となります 5つだと 大 して 労 力 は 変 わらない 気 もしますが 円 を 100 個 書 きたい 場 合 も 配 列 を 使 えば 上 のように3 行 で 記 述 することができるの です 便 利 な 気 がしてきたでしょう? [processing で 配 列 を 使 用 する 方 法 ] 変 数 を 使 用 前 に 宣 言 したように 配 列 も 使 用 する 前 には 必 ず 配 列 使 うよ と 宣 言 し ましょう 型 名 [] 並 列 名 = new 型 名 [ 配 列 の 数 ]; ( 例 )int[] x = new int[5]; [Hint] 配 列 の 要 素 ( 箱 )を 取 り 出 した 場 合 hoge = x[0]; 要 注 意 のように 取 り 出 すことができます このとき 配 列 要 素 は 0 番 から 始 まるため 配 列 要 素 を5つ 用 意 した 場 合 は x[0],x[1],...,x[4]の5つとなり x[5]はありません 練 習 円 の 数 を10 個 にしてみましょう [ 練 習 1-1 Processing 実 行 画 面 サンプル] 1-2 円 の 移 動 スピードをそれぞれ 変 えてみましょう [ 練 習 1-2 Processing 実 行 画 面 サンプル]

46 1-3 円 の 色 をそれぞれ 変 えてみましょう [ 練 習 1-3 Processing 実 行 画 面 サンプル] サンプルプログラム 2 サンプルを 表 示 PVector pos, next; // 座 標 用 の 変 数 void setup(){ size(400, 400); //ウィンドウのサイズを 決 定 ( 横 幅 縦 幅 )

47 colormode(rgb,255); //カラーモードを 設 定 (モード 最 大 値 ) background(255,255,255); // 背 景 の 色 を 指 定 (R,G,B)この 場 合 は 白 framerate(30); //フレームレートを 設 定 (fps:frame per seconds) pos = new PVector(0, 0); next = new PVector(0, 0); void draw(){ nostroke(); smooth(); fill(255,255,255,255); rect(0,0,width,height); ンドウをリセット) // 線 をなしに 設 定 // 塗 りの 色 を 白 ( 背 景 色 )に 設 定 // 背 景 色 でウィンドウを 塗 りつぶす(ウィ next.x = pos.x + (mousex - pos.x)*0.1; next.y = pos.y + (mousey - pos.y)*0.1; fill(50,50,50,255); ellipse(next.x,next.y,10,10); pos = next; 練 習 円 の 数 を10 個 にしてみましょう [ 練 習 2-1 Processing 実 行 画 面 サンプル] 課 題 Processing で 配 列 を 用 いた 自 由 なアニメーションを 作 りを 行 い 前 回 同 様 Java アプレ ットとして 自 分 のウェブに 載 せましょう

48 授 業 で 習 っていない 描 画 方 法 などを 使 用 していただいても 結 構 です ( 参 考 URL[Processing.org Reference]) Processing [ 第 三 回 ] API すごい 人 たちが 作 った 有 難 いライブラリを 使 おう processing には 世 界 中 のプログラマーによって 便 利 なライブラリが 作 られています 今 回 は 世 界 中 のすごい 人 たちが 作 った 有 難 いライブラリの 使 い 方 を 学 びましょう processing の 本 サイトでいくつかライブラリが 紹 介 されています 今 回 はライブラリの 使 用 方 法 を 学 びましょう Processing にはもともといくつかのライブラリがインストールされています その 他 にも 世 界 中 にたくさん 存 在 するライブラリをインストールすることで 使 用 する 事 ができます まずは 最 初 からインストールされているライブラリを 使 用 してみましょう まずは 音 を 扱 うライブラリ MinimAudio です processing を 起 動 してみましょう メニューから Sketch Improt Library の 中 に 使 用 できるライブラリの 一 覧 が 表 示 されます その 中 にある MinimAudio を 選 択

49 すると import ddf.minim.*; という1 文 が 追 加 されます これで ESS のライブラリを 使 用 する 準 備 ができました では サンプルを 見 てみましょう サンプルプログラム サンプルを 表 示 import ddf.minim.*; // minim ライブラリを import Minim minim; // 変 数 定 義 AudioPlayer player;

50 void setup(){ minim = new Minim(this); // インスタンス 生 成 player = minim.loadfile(" "test.mp3"); // ロード void draw(){ player. play(); // 再 生 [Hint] mp3 ファイルが 用 意 出 来 ない 人 は こちらのサンプルを 使 って 下 さい 一 度 名 前 を 付 けてファイルを 保 存 して 下 さい そのディレクトリの 中 に data というディレクトリを 作 成 し その 中 に 再 生 したい 音 楽 ファイルを 入 れておきましょ ょう 練 習 サンプルに 再 生 ボタンと 停 止 ボタンを 作 成 せよ [ 練 習 1-1 Processing 実 行 画 面 サンプル] [Hint]

51 第 8 回 のボタンの 復 習 停 止 : AudioPlayer 変 数 名.close(); 1-2 ビジュアライザを 追 加 せよ [ 練 習 1-2 Processing 実 行 画 面 サンプル] [Hint] ビジュアライザは 以 下 のプログラムによって 描 画 出 来 ます for(int i = 0; i < player.buffersize()-1; i++ +){ float x1 = map(i, 0, player.buffersize(), 0, width); float x2 = map(i+1, 0, player.buffersize(), 0, width); line(x1, 50 + player.left.get(i)*50, x2, 50 + player.left.get(i+1)*50); line(x1, player.right.get(i) *50, x2, player.right. get(i+1)* *50); ここまでくればライブラリの 使 い 方 がわかってきたかな 世 界 中 のすごい 人 達 たちは まだまだだ 沢 山 ライブラリ 作 ってくれました 次 は 物 理 的 な動 きを 表 現 するのに 便 利 な Physics というライブラリを 紹 介 します

52 TRAER.PHYSICS : ダウンロードしたフォルダには 何 やら 解 り 難 い 名 前 がついています この 名 前 を traer (このライブラリの 作 者 )に 変 えておきましょう Processing が 置 いてあるフォ ルダの 中 の libraries というフォルダを 作 成 してください 作 った libraries のフォルダの 中 にダウンロードしたライブラリを traer ごと 移 動 する とインストール 完 了 です 確 認 Processing / libraries / traer / physics / library / physics.jar サンプルプログラム

53 サンプルを 表 示 import traer.physics.*; ParticleSystem physics; Particle p; Particle anchor; Spring s; void setup(){ size( 400, 400 ); smooth( (); fill( 0 ); ellipsemode( CENTER ); physicss = new ParticleSystem( 1, 0.05 );

54 p = physics.makeparticle( 1.0, width/2, height/2, 0 ); anchor = physics.makeparticle( 1.0, width/2, height/2, 0 ); anchor.makefixed(); s = physics.makespring( p, anchor, 0.5, 0.1, 75 ); void mousepressed(){ p.makefixed(); p.position().set( mousex, mousey, 0 ); void mousedragged(){ p.position().set( mousex, mousey, 0 ); void mousereleased(){ p.makefree(); void draw(){ physics.tick(); background( 255 ); line( p.position().x(), p.position().y(), anchor.position().x(), anchor.position().y() ); ellipse( anchor.position().x(), anchor.position().y(), 5, 5 ); ellipse( p.position().x(), p.position().y(), 20, 20 ); 次 は 今 流 行 っている twitter を ライブラリを 使 用 して Processing 上 で 表 示 してみよう twitter の 情 報 を 扱 うためには twitter の XML を 読 み 込 む 必 要 があります XML とは 情 報 交 換 するためのものと 考 えて 下 さい

55 まず XML のライブラリをインストールします simpleml : /downloads// 先 程 作 った libraries のフォルダの 中 にダウンロードした SimpleML を 移 動 すればイ ンストール 完 了 です 確 認 Processing / libraries / SimpleML / library / SimpleML.jar サンプルプログラム サンプルを 表 示

56 ///// ライブラリの 読 み 込 み ///// import simpleml.*; // simpleml の 読 み 込 み import java.net.authenticator; import java.net.passwordauthentication; ///// java における http 認 証 ///// String user = "username"; // ユーザーネームの 入 力 String pass = "password" ; // パスワードの 入 力 String url = " ; // RSS の URL を 入 力 ///// クラスの 定 義 ///// class BasicAuth extends java.net.authenticator{ private String user; private String pass; public BasicAuth(String user, String pass){ this.user = user; this.pass = pass; protected PasswordAuthentication getpasswordauthentication(){ return new PasswordAuthentication(user,pass.toCharArray()); ///// 初 期 設 定 ///// XMLRequest xmlrequest; void setup() { size(screen.width/2, screen.height/2); background(255, 255, 255); BasicAuth tw_authenticator = new BasicAuth(user, pass); // ユー ザー 情 報 を 設 定 Authenticator.setDefault(tw_authenticator); // 認 証 設 定 xmlrequest = new XMLRequest(this, url); xmlrequest.makerequest(); // XML のリクエストを 送 信

57 示 ///// tweet を 表 示 する 関 数 を 定 義 ///// void netevent(xmlrequest ml) { PFont fonta = loadfont("osaka-16.vlw"); // フォントの 読 み 込 み textfont(fonta, 16); // フォントを 設 定 String titles[] = ml.getelementarray("title"); for (int i=0; i < titles.length; i++) { fill(0, 0, 200); // 文 字 色 の 設 定 text( titles[i].replaceall("\n",""),5,18*(i+1)); // tweet を 表 void draw() { background(255); netevent(xmlrequest); 補 足 フォントを 設 定 する 時 に 日 本 語 対 応 フォントを 選 択 また All Characters にチェックを 入 れる これを 忘 れると 日 本 語 が 正 しく 表 示 されません 今 回 今 まで 使 用 してこなかった 言 葉 が 所 々ありましたが 全 部 理 解 出 来 なくて 大 丈 夫 です ライブラリを 使 用 するとこんな 事 もできるんだと 実 感 できれば OK. 課 題 Processing で Minim SimpleML 叉 は 他 のライブラリを 用 いた 自 由 なアニメーション 作 りを 行 い 前 回 同 様 Java アプレットとして 自 分 のウェブに 載 せましょう 授 業 で 習 っていない 描 画 方 法 を 使 用 していただいても 結 構 です ( 参 考 URL[Processing.org Reference])

58 Processing [ 第 六 回 ] 座 標, 3D 僕 3D やりたいんです 私 3D なんです と 言 う 皆 様 の 期 待 に 応 えて 今 回 のテーマは 3D についてという 事 になりました 最 初 のサンプルはとても 簡 単 画 面 の 真 ん 中 に 立 方 体 を 表 示 させるだけです サンプルプログラム - 1

59 サンプルを 表 示 int sz = 50; void setup(){ size(400, 400, P3D); colormode(rgb, 255); framerate(30); fill(0, 0); void draw(){ background(0, 100); translate(width/2, height/2, 0);

60 stroke(255, 100); box(sz); [Hint] box(size); は 直 方 体 の 形 しか 指 定 する 事 は 出 来 ないので 必 ず 原 点 に 描 画 され ます そこで 直 方 体 を 任 意 の 場 所 に 描 画 する 為 には translate(x, y, z); を 使 って 軸 を 移 動 させる 方 法 を 採 ります でもこれだけではあまり 3D っぽくないし 何 だか 物 足 りませんよね それでは この 立 方 体 を 並 べてみましょう 少 しは 3D っぽく 見 えて 来 るかも 知 れません サンプルプログラム - 2

61 サンプルを 表 示 int numx = 30, sz = 10; void setup(){ size(400, 400, P3D); colormode(rgb, 255); framerate(30); fill(0, 0); void draw(){ background(0, 100); translate(width/2-sz*numx/2, height/2, 0);

62 for(int j=0; j<numx; j++){ stroke(255, 100); pushmatrix(); translate(sz*j, 0, 0); box(sz); popmatrix(); [Hint] 並 んだ 立 方 体 の 内 の 真 ん 中 にある 立 方 体 が 画 面 中 央 に 来 る 様 に 上 手 く translate(x, y, z); の 値 を 調 節 してみましょう 1 度 translate を 行 うと その 状 態 は 自 動 では 初 期 化 されないので 次 のフレームにも 適 用 されてしまいます pushmatrix(); を 使 うと その 直 後 に 記 述 された 内 容 は popmatrix(); 後 にリセットさ れます translate で 平 行 移 動 した 座 標 のイメージが 解 らなくなってしまった 人 は 座 標 系 を 確 認 したい 場 所 に 以 下 のコードを 入 れてみましょう line(-400, 0, 0, 400, 0, 0); // DRAW X-AXIS line(0, -400, 0, 0, 400, 0); // DRAW Y-AXIS line(0, 0, -400, 0, 0, 400); // DRAW Z-AXIS うーん これでもやっぱりイマイチ 3D って 感 じがしませんね それでも translate の 使 い 方 は 何 となく 解 ってきたのではないでしょうか この 考 え 方 を 応 用 して 早 速 今 回 の 練 習 問 題 に 挑 戦 してみましょう! 練 習 1

63 マウスの X 座 標 に 合 わせて 並 んだ 立 方 体 の 高 さが 変 わる 様 にしましょ ょう [ 練 習 1 Processing 実 行 画 面 サンプル] [Hint] dist(x1, y1, z1, x2, y2, z2) を 使 えばマウスの 座 標 と 立 方 体 の 距 離 を 測 る 事 が 出 来 ます 練 習 2 立 方 体 を 平 面 上 に 配 置 しましょう マウスの Y 座 標 にも 合 わせて 立 方 体 の 高 さが 変 わる 様 にしてみましょ ょう また マウスを 縦 方 向 にドラッグすると カメラのアングルが 変 わる 様 にしましょう

64 [ 練 習 2 Processing 実 行 画 面 サンプル] [Hint] rotate(); によって 軸 を 回 転 させる 事 が 出 来 ます 今 回 の 場 合 は rotatex(); ; を 使 うと 良 いでしょう 課 題 Processing で 3Dを 用 いた 自 由 なアニメーション作 りを 行 い 前 回 同 様 Java アプレット として 自 分 のウェブに 載 せましょう 授 業 で 習 っていない 描 画 方 法 などを 使 用 して 頂 いても 結 構 です ( 参 考 : [Processing.orgg Reference])

65 提 出 締 切 : 7/1 ( 木 ) 23:59 課 題 の 提 出 方 法 課 題 を 個 人 のディレクトリに 以 下 の URL になるように 配 置 します