表 6-1 文 字 列 表 示 関 連 のデータ 型 と 関 数 その 1 関 数 名 など PFont String loadfont(file) textfont(f) textfont(f,size) text(str,x,y) text(str,x,y,w,h) textsize(size)

Transcription

1 情 報 メディア 基 盤 ユニット 用 資 料 (2012 年 5 月 22 日 分 ) Processing 言 語 による 情 報 メディア 入 門 文 字 列 と 画 像 の 表 示 と 座 標 変 換 神 奈 川 工 科 大 学 情 報 メディア 学 科 までのプログラムでは 図 形 の 表 示 だけを 扱 ってきました 色 々 今 なプログラムを 作 っていく 際 には 図 形 の 表 示 だけではなく 文 字 や 画 像 の 表 示 を 行 いたいことがあります 今 回 は 文 字 列 や 画 像 の 表 示 を 取 り 扱 います 文 字 列 の 表 示 P rocessing 言 語 で 様 々な 種 類 のフォントを 表 示 することが 出 来 ます そのためには いくつかの 手 順 が 必 要 となります 大 雑 把 に 言 うと 文 字 列 を 表 示 するためには 1) 使 用 したいフォントを 指 定 してから 2) 文 字 列 の 表 示 位 置 と 表 示 文 字 列 を 指 定 するという 手 順 になります 文 字 列 表 示 の 手 順 を 詳 しく 述 べると 以 下 のように なります 佐 藤 尚 手 順 1:フォントの 指 定 文 字 列 を 表 示 するためは まず Processing 内 部 にフォントの 情 報 を 取 り 込 む 必 要 があります そのた めに コンピュータで 使 えるフォント 情 報 を Processing で 扱 うことの 出 来 る vlw フォーマットに 変 換 する 必 要 があり ます この 変 換 処 理 は Tools メニュー の Create Font... を 選 ぶと 表 示 される ダイアログボックスで 行 うことが 出 来 ま す このダイアログボックスで 変 換 し たいフォントを 指 定 し その 大 きさ (size) を 指 定 します OK ボタンをクリックする と Filename 欄 に 表 示 されている 名 前 が ファイル 名 となっている vlw フォーマッ トのファイルが 作 成 されます 作 成 され たファイルは Sketch メニューの Show Sketcch Folder を 選 ぶと 表 示 されるフォ 図 6-1 vlw ファイルの 作 成 ルダー 内 にある data フォルダに 保 存 されています 次 に 生 成 したフォント 情 報 を PFont 型 変 数 の 変 数 に 読 み 込 みま す この 読 み 込 みのためには loadfont 関 数 を 使 用 します さらに どのフォント 情 報 を 使 用 して 文 字 列 の 表 示 を 行 うかを 決 めるために textfont 関 数 を 使 用 します textfont 関 数 では 表 示 するフォントの 大 きさを 指 定 することも 出 来 ます vlw フォーマットでは 文 字 の 形 の 情 報 をイメージとして 保 持 しています 作 成 するフォントのサイズを 大 きくすると 変 換 後 に 作 ら れるファイルのサイズが 大 き くなります 同 様 に 漢 字 な どを 含 むフォントを 変 換 する と 変 換 後 に 作 られるファイル のサイズがかなり 大 きくなり ますので 注 意 して 下 さい 後 で 作 成 したフォント 名 が 必 要 と な る の で Filename 欄 のファイル 名 をコピーして おくと 便 利 です Processing のスケッチ(プロ グラム)で 使 用 されるデータ ファイルは この data フォ ルダ 内 に 保 存 することが 一 般 的 です 複 数 の vlw 形 式 のファイルを 読 み 込 むことで 複 数 のフォ ントで 表 示 を 行 うことが 出 来 ます

2 表 6-1 文 字 列 表 示 関 連 のデータ 型 と 関 数 その 1 関 数 名 など PFont String loadfont(file) textfont(f) textfont(f,size) text(str,x,y) text(str,x,y,w,h) textsize(size) createfont(fname,size) 手 順 2:フォントの 表 示 説 明 フォント 情 報 を 格 納 するデータ 型 文 字 列 を 格 納 するデータ 型 引 数 file で 指 定 された vlw ファイルを 読 み 込 む 関 数 PFont 型 の 引 数 f で 指 定 したフォントを 表 示 に 利 用 する PFont 型 の 引 数 f で 指 定 したフォントを 大 きさ size で 表 示 に 利 用 する 引 数 str で 指 定 された 文 字 列 を 位 置 (x,y) に 表 示 する 関 数 引 数 str で 指 定 された 文 字 列 を 位 置 (x,y) 幅 w 高 さ h の 長 方 形 の 内 部 に 表 示 する 関 数 表 示 に 利 用 するフォントの 大 きさを size に 設 定 する 関 数 大 きさ size で 引 数 fname で 指 定 したフォント 情 報 を 作 成 する 文 字 列 を 表 示 する 際 には text 関 数 を 使 用 します text 関 数 では 表 示 する 文 字 列 と 表 示 位 置 を 指 定 します 文 字 列 の 表 示 色 は fill 関 数 で 指 定 した 色 が 使 用 されます stroke の 指 定 は 無 視 されます 3 つ の 引 数 をとる text 関 数 での 表 示 位 置 の 指 定 は 基 本 的 に 図 の 赤 丸 の 場 所 を 指 定 します 正 方 形 の 指 定 方 法 は 実 行 時 の rectmode により 変 化 しま す createfont 関 数 を 使 用 す る と Tools > Create Font で vlw ファイルを 作 成 しなく ても 大 丈 夫 です 図 6-2 フォント 表 示 の 際 の 位 置 指 定 赤 丸 を 通 る X 軸 に 平 行 な 線 をベースラインと 呼 んでいま す 文 字 列 を 表 示 する 単 純 なサンプル 6-1 PFont font; // フォント 情 報 を 保 存 する 変 数 String msg = "Riho"; size(400,200); font = loadfont("geneva-48.vlw"); // vlw ファイルの 読 み 込 み textfont(font); // 表 示 するフォントの 指 定 fill(0); text("kanagawa Institute Of Technology",10,50); // 文 字 列 を 表 示 textsize(16); // 表 示 するフォントの 大 きさの 変 更 text("kanagawa Institute Of Technology",10,100); textsize(32); // 表 示 するフォントの 大 きさの 変 更 text(msg,10,150); // String 変 数 の 保 存 されている 文 字 列 を 表 示 このサンプルでは Geneva フォントを 使 用 して 大 きさ 48 の vlw ファイルを 作 成 し て 使 用 しています 作 成 した vlw ファイルのフォ ントサイズより 大 きなサイズ では フォントを 表 示 しない 方 が 望 ましと 思 います

3 次 に 複 数 のフォントを 表 示 するサンプルを 示 します 複 数 のフォントで 表 示 する 単 純 なサンプル 6-2 PFont f1;// フォント 情 報 を 保 存 する 変 数 PFont f2; String msg = "The quick brown fox jumps over the lazy dog"; size(400,300); f1 = loadfont("serif-48.vlw");// vlw ファイルの 読 み 込 み f2 = loadfont("sansserif-48.vlw");// vlw ファイルの 読 み 込 み fill(50); textfont(f1,20);// 表 示 するフォントと 大 きさの 指 定 text("riho",50,100); // 文 字 列 の 表 示 textfont(f2,18);// 表 示 するフォントと 大 きさの 指 定 text(msg,50,200); // String 変 数 の 保 存 されている 文 字 列 を 表 示 英 語 の 文 The quick brown fox jumps over the lazy dog の 特 徴 がわかりますか? 割 と 有 名 なフレーズなのです が このサンプルでは サイ ズ 48 の Serif フ ォ ン ト と SanSerifu フォントを 利 用 し て vlw ファイルを 作 成 して います 文 字 列 は 長 方 形 の 領 域 を 指 定 して その 内 部 に 表 示 することが 出 来 ます この 目 的 のためには 5 つの 引 数 をとる text 関 数 を 使 用 します この 関 数 は 最 初 の 引 数 で 表 示 する 文 字 列 を 指 定 し 残 りの 引 数 を 利 用 して 表 示 を 行 う 長 方 形 を 指 定 します この 長 方 形 領 域 の 指 定 方 法 は rect 関 数 の 場 合 と 同 じです 従 って 現 在 の rectmode で 長 方 形 が 指 定 されます 長 方 形 領 域 での 文 字 列 表 示 の 単 純 なサンプル 6-3 PFont font;// フォント 情 報 を 保 存 する 変 数 String msg = "The quick brown fox jumps over the lazy dog"; size(400,300); font = loadfont("serif-48.vlw");// vlw ファイルの 読 み 込 み fill(0); textfont(font);// 表 示 するフォントの 指 定 text(msg,50,50,350,200);// サンプル 5-4 では rectmode を CENTER に 変 更 したものを 示 しま す 表 示 の 違 いを 確 認 して 下 さい CENTER 指 定 での 長 方 形 領 域 での 文 字 列 表 示 のサンプル 6-4 PFont font;// フォント 情 報 を 保 存 する 変 数 String msg = "The quick brown fox jumps over the lazy dog"; size(400,300); font = loadfont("serif-48.vlw");// vlw ファイルの 読 み 込 み rectmode(center); // rectmode を CENTER に 変 更 fill(0); textfont(font);// 表 示 するフォントの 指 定 text(msg,50,50,350,200);// サンプル 5-5 で 長 方 形 領 域 の 指 定 方 法 をマウスボタンが 押 され

4 ているかどうかで 変 更 するものを 示 します 長 方 形 領 域 指 定 方 法 切 り 替 えでの 文 字 列 表 示 のサンプル 6-5 PFont font;// フォント 情 報 を 保 存 する 変 数 String msg = "The quick brown fox jumps over the lazy dog"; size(400,300); font = loadfont("serif-48.vlw");// vlw ファイルの 読 み 込 み rectmode(center); void draw(){ if(mousepressed ){ rectmode(center); // マウスボタンが 押 されていたら CENTER else{ rectmode(corner);// マウスボタンが 押 されていなければ CORNER fill(0); textfont(font);// 表 示 するフォントの 指 定 // 後 ろの 4 つの 引 数 で 表 示 領 域 の 長 方 形 の 指 定 を 行 っている text(msg,mousex,mousey,350,200); nofill(); stroke(255,10,10); rect(mousex,mousey,350,200); // 表 示 領 域 の 表 示 rectmode が CORNER が デ フォルトの 指 定 です サンプル のように 文 字 列 を 表 示 する 長 方 形 領 域 を 指 定 できるとすると 文 字 揃 えなども 行 いたくなります これを 実 行 す るのが textalign 関 数 です サンプル 6-6 で この textalign 関 数 を 利 用 して 文 字 揃 えを 変 更 したものを 示 します 文 字 揃 えの 変 更 を 行 う 6-6 PFont f; String msg = "The quick brown fox jumps over the lazy dog"; size(600,300); f = loadfont("serif-48.vlw"); stroke(200); line(width/2,0,width/2,height); fill(50); textfont(f,16); text(msg,width/2,60); textalign(center); text(msg,width/2,120); textalign(left); text(msg,width/2,180); textalign(right); text(msg,width/2,240); サンプル 6-6 の 実 行 例

5 表 6-2 文 字 列 表 示 関 連 のデータ 型 と 関 数 その 2 関 数 名 など textalign(center) textalign(left) textalign(right) textwidth(str) textdescent() textascent() 説 明 指 定 した 長 方 形 領 域 に 文 字 列 を 中 央 揃 え で 表 示 するようにする 指 定 した 長 方 形 領 域 に 文 字 列 を 左 揃 えで 表 示 するようにする 指 定 した 長 方 形 領 域 に 文 字 列 を 右 揃 えで 表 示 するようにする 現 在 の 表 示 文 字 設 定 で 文 字 列 str を 表 示 した 時 の 幅 を 求 める 関 数 現 在 の 表 示 文 字 設 定 で 文 字 列 を 表 示 した 時 のベースラインからどれだけ 下 に 表 示 さ れるかを 求 める 関 数 現 在 の 表 示 文 字 設 定 で 文 字 列 を 表 示 した 時 のベースラインからどれだけ 上 に 表 示 さ れるかを 求 める 関 数 図 6-1 に 示 すように 文 字 g はベースラインの 下 の 方 にも 文 字 の 一 部 が 出 ています また 文 字 によって 文 字 の 高 さが 異 なっていま すし 文 字 によってその 幅 も 異 なっています これらの 情 報 がわか れば 文 字 列 が 描 かれる 仮 想 的 な 長 方 形 を 決 めることができます このようなことが 出 来 れば ウインドウの 端 で 跳 ね 返 るようなプロ グラムを 作 成 することができます サンプル 6-7 は 図 6-1 を 描 く 際 に 利 用 したプログラムです テキストの 表 示 位 置 を 求 めるサンプル 6-7 PFont font; String msg = "Anegasaki"; size(1024,512); font = loadfont("serif-128.vlw"); textfont(font); void draw(){ fill(0); text(msg,mousex,mousey); stroke(255,10,10); fill(255,10,10); ellipse(mousex,mousey,10,10); line(-128+mousex,mousey,width,mousey); line(-128+mousex,mousey+textdescent(), width,mousey+textdescent()); line(-128+mousex,mousey-textascent(),width,mousey-textascent()); line(mousex,mousey+128,mousex,0); line(mousex+textwidth(msg),mousey+textdescent(), mousex+textwidth(msg),0);

6 次 のサンプル 6-8 は textwidth 関 数 を 使 用 した 例 です 左 端 で 表 示 文 字 列 が 消 えると 右 側 から 現 れてきます 長 方 形 や 円 の 場 合 と 同 じように 表 示 位 置 を 少 しずつ 変 化 させると 文 字 列 の 移 動 が 実 現 出 来 ます このサンプルでは 文 字 列 が 最 後 がウインドウの 左 端 に 到 達 したら また 右 端 から 文 字 列 を 表 示 するようにしています 文 字 列 の 移 動 サンプル 6-8 PFont f; String msg = "The quick brown fox jumps over the lazy dog"; float x; // 文 字 列 の 表 示 開 始 位 置 の x 座 標 size(400,200); colormode(rgb); f = loadfont("serif-48.vlw"); x = width; void draw(){ fill(50); textfont(f,16); float widthofmsg = textwidth(msg); text(msg,x,height/2); x -= 2; // 2 ずつ 左 に 移 動 if(x < -widthofmsg){ // 文 字 列 の 最 後 がウインドウから 消 えたら x = width; この 後 に 学 習 する 知 識 などを 使 用 すると Star Wars のオープニン グのようなプログラムを 簡 単 に 作 ることができます おまけのサンプル 6-9 PFont f; String msg = "A New Hope n na long long time ago nin a galaxy far far away..."; float y=0; size(400,400,p3d); // 3D 表 示 を 行 う f = loadfont("serif-48.vlw"); textfont(f); textalign(center); void draw(){ background(0); fill(5,200,255); translate(width/2,height/2); rotatex(pi/4); text(msg,0,y); y--; 文 字 列 の 表 示 位 置 の X 座 標 の 値 は x です 文 字 列 を 表 示 する 際 に 必 要 となる 幅 は widthofmsg なので 文 字 列 を 表 示 した 際 の 右 端 の X 座 標 の 値 は x+widthofmsg と なります この 場 所 がウイン ドウの 左 端 から 出 てしまうの は x+widthofmsg < 0 の 時 です widthofmsg を 右 辺 に 移 項 すると if 命 令 の 条 件 部 分 になります 文 字 列 中 の n は 表 示 される ことがありません この n があると そこで 改 行 が 行 わ れます C 言 語 系 のプログラ ミング 言 語 では 文 字 列 中 に n があると 改 行 を 意 味 して います このような と 組 みになって 特 別 な 意 味 を 表 す ものをエスケースシーケンス と 呼 んでいます 本 によっては の 代 わりに \ を 使 用 している 場 合 があり ます これは 文 字 コードの 問 題 が 関 連 しています IT 基 礎 で 関 連 する 話 題 が 出 てくる と 思 います

7 画 像 ファイルとしての 保 存 今 までのプログラムでは 作 成 した 画 像 はプログラムの 実 行 を 終 了 す ると 消 えていました プログラムを 実 行 せずに 作 成 した 画 像 を 見 るた めには 作 成 した 画 像 を 保 存 することが 必 要 となります Processing では ウインドウの 内 容 を 画 像 ファイルとして 保 存 する save 関 数 と saveframe 関 数 が 用 意 されています save 関 数 は ウインドウの 内 容 を 1 つの 画 像 ファイルとして 保 存 します 一 方 saveframe 関 数 は 連 番 の 番 号 付 きファイル 名 で 画 像 を 保 存 します 保 存 される 画 像 ファイルは Tools メニューの Show Sketch Folder を 選 んだ 時 に 出 てくるフォルダ 内 にある data フォルダの 中 に 保 存 されます 表 6-3 画 像 ファイルとしての 保 存 関 連 の 関 数 関 数 説 明 filename で 指 定 したファイル 名 でウインドウ の 内 容 を 画 像 ファイルとして 保 存 します ファ save(filename) イル 名 には 保 存 する 画 像 ファイルの 形 式 を 指 定 する 拡 張 子 が 必 要 です 指 定 できる 拡 張 子 は tif,tga,jpg,png です ウインドウの 内 容 を 連 番 の 画 像 ファイルとして 保 存 します 保 存 されるファイル 名 は screen- 連 番.tif saveframe() です この 関 数 を 呼 び 出 す 度 に 連 番 部 分 の 数 字 が 増 えていきます ウインドウの 内 容 を 連 番 の 画 像 ファイルとして 保 存 します 引 数 の filename は filename-####. 拡 張 子 の 形 となります #### の 部 分 が 連 番 の 数 saveframe(filename) 字 となります # が 4 つあれば 4 桁 の 数 字 で 連 番 の 部 分 の 数 字 が 決 まります 指 定 できる 拡 張 子 は tif,tga,jpg,png です つまり 次 の 4 つのファイ ル 形 式 で 画 像 をファイルに 保 存 出 来 ます tif:tiff 形 式 tga:targa 形 式 jpg:jpeg 形 式 png:png 形 式 サンプル 6-8 はサンプル 6-1 の 最 後 に save 関 数 の 呼 び 出 しを 追 加 して ウインドウの 内 容 を 画 像 ファイルとして 保 存 するものです save 関 数 を 利 用 した サンプル 6-8 PFont font; // フォント 情 報 を 保 存 する 変 数 String msg = "Riho"; size(400,200); font = loadfont("geneva-48.vlw"); // vlw ファイルの 読 み 込 み textfont(font); // 表 示 するフォントの 指 定 fill(0); text("kanagawa Institute Of Technology",10,50); // 文 字 列 を 表 示 textsize(16); // 表 示 するフォントの 大 きさの 変 更 text("kanagawa Institute Of Technology",10,100); textsize(32); // 表 示 するフォントの 大 きさの 変 更 text(msg,10,150); // String 変 数 の 保 存 されている 文 字 列 を 表 示 save("test.jpg"); // ウインドウの 内 容 を test.jpg ファイルに 保 存 draw 関 数 内 で save 関 数 を 呼 び 出 し 画 像 ファイルとし て 保 存 する 場 合 には プロ グラムの 実 行 を 終 了 するタ イミングによっては 正 し く 保 存 されない 場 合 があり ます 画 像 ファイルがどこに 保 存 されるか ちゃんと 確 認 し ておいて 下 さい

8 画 像 ファイルの 読 み 込 み プ ログラムを 作 成 していると 外 部 で 作 成 した 画 像 をファイル の 表 示 や 利 用 などを 行 いたいことがあります Processing 言 語 では 画 像 データを 保 存 するために PImage 型 が 用 意 されいます PImage 型 の 変 数 には 画 像 データを 記 憶 させておくことが 出 来 ます Processing でファイルに 保 存 されている 画 像 を 表 示 するためには 1. 画 像 ファイルに 保 存 されている 画 像 データをコンピュータ 内 に 読 み 込 む 2. 読 み 込 んだ 画 像 データを 表 示 する という 手 順 をとります 手 順 1: 画 像 ファイルの 読 み 込 み このプログラムで 読 み 込 む 画 像 ファイルはどこに 置 かれているの でしょうか? Processing では プログラム 中 で 読 み 込 む 画 像 ファイ ルなどの 保 存 場 所 が 決 まっています それ は Show Sketch Folder で 表 示 されるフォ ルダ 内 にある data という 名 称 のフォルダで す もし そこの data フォルダが 無 い 場 合 には data フォルダを 作 成 して そこの 利 用 する 画 像 ファイルなどをコピーして 下 さ い これが 面 倒 な 場 合 には Processing の プログラムを 書 いている 部 分 にドラッグ& ドロップすると 自 動 的 に data フォルダに コピーされます 画 像 ファイルを 読 み 込 むためには loadimage 関 数 を 使 用 します 読 み 込 んだ 情 報 を PImage 型 の 変 数 に 代 入 します 手 順 2: 画 像 ファイルの 表 示 読 み 込 んで PImage 型 変 数 に 保 存 されている 画 像 を 表 示 するため いには image 関 数 を 使 用 します 関 数 PImage 表 6-4 画 像 データ 表 示 関 連 の 関 数 など 説 明 画 像 情 報 を 保 存 するためのデータ 型 filename で 指 定 した 画 像 ファイルを 読 み 込 む TIFF 形 式 loadimage(filename) TARGA 形 式 JPEG 形 式 PNG 形 式 の 画 像 ファイルを 読 み 込 むことが 出 来 ます 引 数 extでは 読 み 込 む 画 像 データの 種 類 loadimage(name,ext) (png,jpg,gif など ) を 指 定 する PImage 型 引 数 img で 指 定 した 画 像 の 内 容 を 引 image(img,x,y) image(img,x,y,w,h) 図 6-3 データファイルの ドラッグ & ドロップ 数 x,y で 指 定 された 場 所 に 表 示 する 位 置 の 指 定 方 法 は imagemode 関 数 で 指 定 します PImage 型 引 数 img で 指 定 した 画 像 の 内 容 を 引 数 x,y で 指 定 された 場 所 に 横 方 向 の 大 きさを w 縦 方 向 の 大 きさを h に 変 更 して 表 示 する 文 字 列 の 表 示 と 同 じような 手 順 となっています 実 は loadimage 関 数 はかな り 強 力 な 機 能 を 持 っていま す 画 像 は 長 方 形 になっているの で rect 関 数 で 長 方 形 を 描 画 するのと 同 じ 方 法 で 画 像 の 描 画 位 置 を 指 定 します image 関 数 のように 引 数 の 数 やデータ 型 によって 処 理 の 内 容 によって 異 なる 関 数 定 義 を 行 うことを 多 重 定 義 (オー バーロード)と 呼 びます 以

9 関 数 imagemode(mode) 説 明 引 数 mode で 指 定 された 方 法 で 表 示 する 画 像 位 置 を 指 定 できるようになります 引 数 mode には 値 CORNER,CENTER,CORNERS を 指 定 することが 出 来 ます それぞれの 値 の 意 味 は rectmode の 場 合 と 同 じです 前 から 使 用 していた fill 関 数 や stroke 関 数 も 多 重 定 義 さ れている 関 数 です サンプル 6-9 は loadimage 関 数 を imae 関 数 を 利 用 した 単 純 なプロ グラムです image 関 数 を 利 用 した サンプル 6-9 PImage src; // 画 像 データを 保 存 するための 変 数 src = loadimage("laval.jpg");// ファイル 名 は 適 当 なものに 変 えること void draw(){ image(src,random(width),random(height)); // デタラメな 位 置 に 表 示 Processing では 異 なる 変 数 に 画 像 データを 記 録 させておけば 複 数 の 画 像 を 扱 うことが 出 来 ます サンプル 6-10 は 複 数 の 画 像 を 取 り 扱 うサンプルプログラムです このプログラムは マウスボタン を 押 した 状 態 と 離 した 状 態 で 表 示 する 画 像 を 切 り 替 えています ま た src2.width と src2.height のようにすると src2 に 保 存 されてい る 画 像 の 横 方 向 の 画 素 数 と 高 さ 方 向 の 画 素 数 を 取 り 出 すことが 出 来 ます 複 数 の 画 像 を 利 用 した サンプル 6-10 PImage src1,src2; size(600,600); src1 = loadimage("2cv.jpg");// ファイル 名 は 適 当 なものに 変 えること src2 = loadimage("laval.jpg"); void draw(){ if(mousepressed==true){ image(src1,mousex,mousey); else{ // 画 像 を 半 分 の 大 きさにして 表 示 image(src2,mousex,mousey,src2.width/2,src2.height/2); 表 6-5 画 像 データの 取 得 フィールド 名 意 味 記 録 されている 画 像 の 横 方 向 の 画 素 数 を 記 憶 PImage 型 変 数.width している 記 録 されている 画 像 の 縦 方 向 の 画 素 数 を 記 憶 PImage 型 変 数.height している

10 QR コードの 作 成 (おまけ) 像 ファイルを 表 示 するために 使 用 した loadimage 関 数 は 単 にパ 画 ソコン 内 の 画 像 を 読 み 込 むだけではなく もう 少 し 高 度 なこと も 出 来 ます その 一 例 として loadimage 関 数 を 利 用 して QR コー ドを 作 ることに 挑 戦 します Google では Chart API と 呼 ばれる web を 利 用 してグラフを 描 く 機 能 を 提 供 しています この 機 能 の 中 に QR コードを 描 くものがあるので これを 利 用 します サンプル 6-11 は QR コードを 表 示 するものです この 方 法 は クラウドと 呼 ば れている 情 報 処 理 を 利 用 して いると 見 ることもできます QR コードの 表 示 サンプル 6-11 PImage qrcode_img; // QR コード 画 像 を 保 存 する 変 数 String ur い ; // 文 字 列 を 保 存 する 変 数 String qrcode_google_api = " int qrcode_size = 300; // 表 示 する QR コードの 大 きさを 決 める 値 String data = " // QR コードの 中 に 埋 め 込 みたい 情 報 size(qrcode_size, qrcode_size); // Google Chart API を 呼 び 出 すための URL を 作 る ur い = qrcode_google_api + "chs=" + qrcode_size + "x" + qrcode_size + "&cht=qr&chl=" + data; // Google Chart API の 機 能 を 利 用 して QR コード 作 成 qrcode_img = loadimage(uri,"png");// PNG 型 で 画 像 ファイル image(qrcode_img,0,0); // 作 成 した QR コードを 表 示 save("myqrcode.png"); // 表 示 した QR コードを 保 存 ファイル 名 は 変 更 可 能 ここで 使 用 している + も 多 重 定 義 されています int 型 や float 型 の 際 には 加 算 として 機 能 しますが String 型 の 際 には 文 字 列 の 連 結 となってい ます 鋭 い 人 は 気 がついたかもしれませんが Processing の loadimage 関 数 は data フォルダ 内 の 画 像 だけでなく ファイル 名 を URI で 指 定 すると web サイトなどに 置 かれている 画 像 を 読 み 出 すことも 出 来 ます この 機 能 を 利 用 したものがサンプル 6-12 です Uniform Resource Identifier PImage img; URI 指 定 での 画 像 の 表 示 サンプル 6-12 size(300,300); // setup 内 で 画 像 を 読 み 込 まないと ちょっと 面 倒 なことが 起 きるかも img = loadimage(" void draw(){ image(img,0,0); ネット 越 しに 画 像 データ の 取 得 を 行 っているので loadimage 関 数 の 実 行 が 終 わっても 画 像 データの 読 み 込 みが 完 全 に 終 了 していない 場 合 があります その 場 合 には 上 手 く 表 示 が 行 われないこと になります このような 処 理 の 仕 方 をノン ブロッキング 処 理 と 呼 びま す ネット 系 のプログラムで は 良 く 使 用 される 方 法 です

11 座 標 軸 の 移 動 までの 知 識 で 図 6-4 のような 画 像 を 作 ろう 今 とすると ちょっと 大 変 です このような 画 像 を 作 るために 必 要 となる 座 標 軸 の 移 動 ( 座 標 変 換 )について 説 明 します Processing では 座 標 軸 は 図 6-5 のように 決 まっ ています この 座 標 軸 を 基 準 に 図 形 の 描 画 が 行 わ れています そこで 図 6-4 のような 斜 めになっ た 図 形 を 描 くためには 描 画 の 基 準 となる 座 標 軸 が 傾 いていれば 可 能 です このように 基 準 とな る 座 標 軸 を 傾 けたり 移 動 させたりすることを 座 標 変 換 と 呼 んでいます 平 面 の 場 合 にの 座 標 変 換 は 下 の 式 のようなもので 表 すことが 出 来 るもの です しかし コンピュータグラフィックなどで 図 6-4 図 6-5 画 用 紙 を 傾 けて 絵 を 描 き そ の 画 用 紙 をものと 向 きに 戻 す と 傾 いた 絵 になっています よね 座 標 変 換 の 詳 しい 話 は 線 形 代 数 学 やグラフィクス 基 礎 論 で 学 びます 正 確 には 逆 行 列 をもってい るようなものに 限 定 されます が は 余 り 一 般 的 な 座 標 変 換 は 扱 わずに 次 の 4 種 類 の 特 別 な 座 標 変 換 とそれを 組 み 合 わせたものを 扱 います CG では 最 初 の 3 つを 良 く 使 用 します 1. 平 行 移 動 :translate 2. 回 転 :rotate 3. 拡 大 縮 小 :scale 4. 剪 断 ( 傾 け):skear 関 数 translate(x,y) rotate(angle) scale(s) 表 6-6 座 標 変 換 に 関 わる 関 数 その 1 意 味 現 在 の 原 点 を 移 動 させる 関 数 現 在 の X 軸 方 向 に x 現 在 の Y 軸 方 向 に y だけ 現 在 の 原 点 を 移 動 させる 移 動 した 先 が 新 た な 現 在 の 原 点 となります 座 標 軸 の 向 き は 変 わりません 現 在 の 原 点 を 中 心 に X 軸 と Y 軸 を 回 転 さ せる 関 数 引 数 angle は 回 転 角 度 の 指 定 は ラジアンで 行 います 現 在 の 座 標 軸 を s 倍 する つまり 現 在 の 1 の 長 さが s となる scale(sx,sy) 現 在 の X 軸 の 長 さを sx 倍 現 在 の Y 軸 の 長 さを sy 倍 する randians(angle) angle 度 をラジアンでの 値 に 変 換 する 関 数 Processing で も applymatrix 関 数 をすると 一 般 的 な 座 標 変 換 も 取 り 扱 うと こが 出 来 ます Processing で は scale は 余 り 利 用 することが 少 ないよう な 気 が 実 は Processing で は 3 次 元 空 間 での 座 標 変 換 の 関 数 も 持 っています

12 平 行 移 動 平 行 移 動 は 一 番 簡 単 な 座 標 変 換 です 平 行 移 動 では 原 点 の 位 置 を 移 動 させます 原 点 の 位 置 を 移 動 させるだけですので X 軸 や Y 軸 の 向 きは 変 化 しません 座 標 変 換 を 行 う 関 数 を 実 行 すると その 度 に 座 標 軸 が 移 動 していきます サンプル 6-13 は これを 確 認 する プログラムです translate を 利 用 した 例 その 1 サンプル 6-13 colormode(hsb,359,99,99); background(0,0,99); nostroke(); for(int x=0;x <6;x++){ fill(60*x,99,99); rect(0,0,50,50); // 原 点 (0,0) で 正 方 形 を 描 く translate(65,65); // 原 点 を X 軸 方 向 に 65 Y 軸 方 向 に 65 移 動 させる 数 学 的 には 変 換 の 合 成 ( 簡 単 にいうと 行 列 のかけ 算 ) になっています サンプル 6-13 は for 命 令 を 利 用 して 色 を 変 えながら 6 個 の 正 方 形 を 描 くプログラムです for 命 令 の 繰 り 返 し 部 分 の rect 関 数 は 毎 回 同 じ 場 所 (0,0) で 正 方 形 を 描 い ています ところが こ のプログラムを 実 行 して みると 異 なった 場 所 に 正 方 形 を 描 かれています これは なぜでしょうか? それは rect 関 数 の 後 に 実 行 している translate 関 数 に 理 由 があります つ まり rect 関 数 で 正 方 形 を 描 いた 後 に translate(65,65); で 原 点 の 位 置 (0,0) を 動 かしてい るからです translate(65,65); translate(65,65); translate(65,65); translate(65,65); translate(65,65); translate(65,65); 図 6-6 つまり 一 番 目 の 赤 色 の 正 方 形 を 描 くときには 通 常 のウインド ウの 左 上 に 原 点 がある 状 態 で rect(0,0,50,50) が 実 行 されるので 左 上 に 正 方 形 が 描 画 されます その 後 transalte(65,65) が 実 行 される ので 現 在 の 原 点 (ウインドウの 左 上 )が 現 在 の X 軸 方 向 に 65 現 在 の Y 軸 方 向 に 65 だけ 移 動 します つまり ウインドウ の 左 上 から 横 方 向 に 65 縦 方 向 に 65 だけ 移 動 した 場 所 に 現 在 の 原 点 が 移 動 します ですから 2 番 目 の 黄 色 の 正 方 形 を 描 くときに は この 現 在 の 原 点 を 基 準 に 描 画 を 行 うので rect(0,050,50) を 実 行 すると 赤 色 の 正 方 形 より 少 し 右 下 の 部 分 に 描 かれることにな ります その 後 再 び translate(65,65) が 実 行 されるので 現 在 の 原 点 が 現 在 の 原 点 (ウインドウの 左 上 )が 現 在 の X 軸 方 向 実 は この 座 標 軸 の 移 動 です が image 関 数 などの 実 行 に も 有 効 です

13 に 65 現 在 の Y 軸 方 向 に 65 だけ 移 動 します つまり ウインド ウの 左 上 から 横 方 向 に 130 縦 方 向 に 130 だけ 移 動 した 場 所 に 現 在 の 原 点 が 移 動 します 3 番 目 の 緑 色 の 正 方 形 を 描 くときには こ の 現 在 の 原 点 を 基 準 に 描 画 を 行 うので rect(0,050,50) を 実 行 す ると 黄 色 の 正 方 形 より 少 し 右 下 の 部 分 に 描 かれることになります この 後 translate(65,65) を 実 行 するので 現 在 の 原 点 が 現 在 の 原 点 (ウインドウの 左 上 )が 現 在 の X 軸 方 向 に 65 現 在 の Y 軸 方 向 に 65 だけ 移 動 します つまり ウインドウの 左 上 から 横 方 向 に 195 縦 方 向 に 195 だけ 移 動 した 場 所 に 現 在 の 原 点 が 移 動 します このような 操 作 を 繰 り 返 すので 徐 々に 右 下 に 移 動 しながら 正 方 形 が 描 かれるようになります translate 関 数 を 利 用 した 別 のサンプルを 示 します このサン プル 6-14 では ellipse 関 数 を 利 用 して 毎 回 現 在 の 原 点 に 直 径 50 の 円 を 描 いています ただし ellipse 関 数 を 実 行 するまえに translate 関 数 を 呼 び 出 して 現 在 の 原 点 の 位 置 を 変 更 しています そのために 異 なった 位 置 に 円 が 描 画 されています なお draw 関 数 の 一 番 先 頭 では 現 在 の 原 点 はウインドウに 左 上 の 位 置 に 初 期 化 されています translate を 利 用 した 例 その 2 サンプル 6-14 colormode(hsb,359,99,99); smooth(); background(0,0,99); void draw(){ // この 場 所 では 現 在 の 原 点 はウインドウに 左 上 に 初 期 化 されている fill(random(360),random(100),random(100)); // 色 はランダム transalte(random(width),random(height));// 現 在 の 原 点 を 移 動 ellipse(0,0,50,50); // 現 在 の 原 点 を 中 心 に 円 を 描 画 回 転 移 動 平 行 移 動 だけだと 図 形 を 描 画 す る 位 置 を 変 更 するだけ 対 応 出 来 るの で あまりありがたみがわきません ここで 説 明 をする 回 転 移 動 と 組 み 合 わせると 描 画 できる 形 状 がより 豊 富 になります rotate 関 数 による 回 転 移 動 は 現 在 の 原 点 を 中 心 として 座 標 軸 の 回 転 を 行 います 回 転 を 考 える 際 には 回 転 方 向 の 向 きが 問 題 となりますが Processing では 図 6-7 のよう になっています 図 6-7 回 転 の 向 き まず シンプルな rotate 関 数 を 使 用 したサンプル 6-15 を 示 します rotate 関 数 を 実 行 しただけで は 現 在 の 原 点 の 位 置 は 移 動 しません 座 標 軸 の 傾 き だけが 変 わります

14 rotate を 利 用 した 例 サンプル 6-15 stroke(0); fill(150); rect(200,0,100,100); rotate(pi/4); fill(150,10,10); rect(200,0,100,100); サンプル 6-15 では 2 回 rect(200,0,100,100) を 実 行 することで 2 つの 正 方 形 を 描 いていますが 異 なった 場 所 に 描 かれています 1 番 目 の 灰 色 の 正 方 形 が 描 かれたときには 座 標 変 換 の 関 数 を 一 切 実 行 していないので ウインドウの 左 上 に 原 点 があり 横 方 向 の 左 か ら 右 方 向 に X 軸 が 上 から 下 方 向 に Y 軸 が 位 置 しています その 座 標 軸 の 状 態 で rect(200,0,100,100) を 実 行 するので 灰 色 の 正 方 形 が ウインドウの 上 に 水 平 の 描 画 がされます この 後 rotate(pi/4) を 実 行 するので 現 在 の 原 点 の 位 置 は 変 わりません が 現 在 の 原 点 を 中 心 に PI/4(=45 度 ) だけ X 軸 と Y 軸 を 回 転 させます その 後 再 び rect(200,0,100,100) を 実 行 するので 画 面 の 中 央 部 分 に 傾 いた 赤 い 正 方 形 が 描 か れることになります 図 6-8 rotate 前 後 の 座 標 軸 rotate 関 数 は 現 在 の 原 点 を 中 心 に 現 在 の 座 標 軸 を 回 転 させ るので rotate 関 数 単 体 では 使 い 道 が 限 られてしまいます 座 標 変 換 を 行 う 関 数 を 実 行 するたびに 現 在 の 原 点 や 現 在 の 座 標 軸 が 移 動 していくので translate 関 数 を 利 用 して 現 在 の 原 点 を 回 転 の 中 心 に 移 動 させ その 後 rotate 関 数 を 実 行 するとで 任 意 の 場 所 で 座 標 軸 の 回 転 を 行 うことが 出 来 ます サンプル 6-16 は マウスカーソルの 位 置 で 長 方 形 を 回 転 させるも のです 前 にも 説 明 しましたが PI は 円 周 率 を 表 す 定 数 です translate 関 数 で 回 転 の 中 心 となる 現 在 の 原 点 を 適 切 な 場 所 に 移 動 させます そ の 後 rotate 関 数 で 現 在 の 座 標 軸 を 回 転 させます こ れにより 希 望 する 場 所 での 回 転 を 実 現 できます translate と rotate を 利 用 した 例 その 1 サンプル 6-16 float angle = 0; // 現 在 の 座 標 軸 の 回 転 角 度 rectmode(center); smooth(); fill(128); stroke(0);

15 void draw(){ // この 時 点 では 現 在 の 原 点 と 現 在 の 座 標 軸 は 初 期 位 置 // 現 在 の 原 点 をマウスカーソルの 位 置 に 移 動 translate(mousex,mousey); rotate(angle); // 現 在 の 座 標 軸 を angle だけ 回 転 させる rect(0,0,50,100); angle = angle + PI/180; // 回 転 角 度 を 増 やす サンプル 6-16 では 最 初 に translate 関 数 で 現 在 の 原 点 の 位 置 をマウスカーソルの 場 所 に 移 動 させます その 後 rotate 関 数 で 現 在 の 座 標 軸 を angle だけ 回 転 させます その 後 回 転 角 度 を 示 す 変 数 angle の 値 を 少 しだけ 増 加 (PI/180 = 1 度 ) させます draw 関 数 が 呼 び 出 されるたびに 回 転 角 度 が 増 加 す るので マウスカーソルの 位 置 で 長 方 形 が 回 転 しているように 見 えます サンプル 6-17 では translate(width/2, height/2) で 現 在 の 原 点 をウインド ウの 中 心 に 移 動 させます その 後 色 を 変 えながら ellipse(150,0,60,60) で 円 を 描 画 します 円 の 描 画 後 rotate 関 数 を 使 って 24 度 ずつ 現 在 の 原 点 を 中 図 6-9 rotate 後 の 座 標 軸 心 に 現 在 の 座 標 軸 を 回 転 させます これにより 円 周 上 に 円 を 配 置 することが 出 来 ます 図 6-9 では tranlsate 後 の 座 標 軸 rotate 関 数 を 5 回 実 行 した 後 の 座 標 軸 rotate 関 数 を 10 回 実 行 した 後 の 座 標 軸 を 表 示 しています translate と rotate を 利 用 した 例 その 2 サンプル 6-17 colormode(hsb,359,99,99); smooth(); background(0,0,99); nostroke(); // 現 在 の 原 点 をウインドウの 中 心 に 移 動 translate(width/2,height/2); for(int angle = 0;angle < 360;angle += 24){ fill(angle,99,99); // 描 画 色 の 変 更 ellipse(150,0,60,60); // 円 の 描 画 rotate(radians(24)); // 現 在 の 座 標 軸 を 24 度 回 転 させる サンプル 6-18 は translate 関 数 と rotate 関 数 を 上 手 く 利 用 して 画 像 を 作 成 したものです 今 までのサンプルプログラムとは 異 なり rotate translate が 組 みになって 繰 り 返 し 実 行 しています つ まり X 軸 方 向 にちょっと 移 動 して 少 し 向 きを 変 えるという 処 理 に 回 転 角 度 はラジアンで 指 定 す る 必 要 があるので radians 関 数 を 用 いて ラジアンに 変 換 しています この 処 理 は 円 運 動 の 簡 易 的 な モデルになっています

16 なっています translate と rotate を 利 用 した 例 その 3 サンプル 6-18 colormode(hsb,359,99,99); smooth(); nostroke(); background(0,0,99); translate(240,60); // スタート 位 置 に 移 動 for(int i=0;i<12;i++){ fill(i*30,99,99); // 描 画 色 の 設 定 stroke(i*30,99,99); line(0,0,150,0); // 座 標 軸 を 表 示 line(0,0,0,150); rect(0,0,40,40); // 正 方 形 の 描 画 rotate(radians(30)); // 現 在 の 原 点 を 中 心 に 座 標 軸 を 回 転 // 現 在 の 原 点 を 現 在 の X 軸 の 正 の 方 向 に 80 移 動 translate(80,0); 拡 大 縮 小 scale 関 数 は translate 関 数 や rotate 関 数 に 比 べると 利 用 の 機 会 は 少 ないですが 座 標 軸 の 拡 大 縮 小 が 行 えます この 関 数 は 座 標 軸 の 目 盛 りを 拡 大 縮 小 します scale 関 数 の 実 行 結 果 は 現 在 の 座 標 軸 に 対 して 有 効 です 従 って scale 関 数 を 呼 び 出 す 前 の 図 形 は 関 わりません 現 在 の 座 標 軸 の 目 盛 りの 大 きさを 変 えてしますの で 線 の 太 さなども 変 わってします 一 応 サンプルをのせておき ます scale を 利 用 した 例 サンプル 6-19 smooth(); 途 中 までの 描 画 状 況 for(int x = 80; x < width;x += 80){ fill(x % 256,10,10); ellipse(x,height/4,50,50); scale(0.5); // 現 在 の 座 標 軸 の 目 盛 りを 半 分 の 長 さにする for(int x = 80; x < width;x += 80){ fill(x % 256,10,10); ellipse(x,height,50,50); 座 標 軸 の 記 憶 何 回 も 座 標 変 換 を 行 っていくと どんどん 現 在 の 座 標 軸 が 移 動 していきます プログラムによっては 前 の 座 標 軸 に 戻 りた いことがおきます これを 実 現 するために Processing 言 語 では pushmatrix 関 数 と popmatrix 関 数 が 用 意 されています pushmatrix このあたりの 設 計 は OpenGL と 呼 ば れ る 3D-CG 用 の API の 影 響 を 強 く 受 けて います

17 関 数 は 現 在 の 座 標 軸 の 状 況 を 一 時 的 に 記 憶 します 逆 に popmatrix 関 数 は 現 在 の 座 標 軸 を 一 時 的 に 記 憶 されている 過 去 の 座 標 軸 に 変 更 します 関 数 名 pushmatrix() popmatrix() resetmatrix() 表 6-7 座 標 変 換 に 関 わる 関 数 その 2 意 味 現 在 の 座 標 軸 を 一 時 的 に 記 憶 する 現 在 の 座 標 軸 を 一 時 的 に 記 憶 されている 過 去 の 座 標 軸 に 変 更 します 現 在 の 座 標 軸 を 初 期 状 態 に 戻 します pushmatrix 関 数 と popmatrix 関 数 による 座 標 軸 の 記 憶 は 普 通 の 変 数 によるものとは ちょっと 異 なっています 次 のような 制 限 が あります 1. popmatrix 関 数 の 説 明 で 書 かれている 過 去 の 座 標 軸 とは この popmatrix 関 数 を 呼 び 出 す 直 前 に 呼 び 出 された pushmatrix 関 数 が 保 存 した 現 在 の 座 標 軸 です 2. popmatrix 関 数 を 実 行 すると 過 去 の 座 標 軸 は 消 えてしまい ます 3. pushmatrix 関 数 と popmatrix 関 数 が 一 対 のものになっている この 辺 りの 話 をやり 出 すと ちょっと 面 倒 なので 今 回 はあまり 深 入 りはしません この 処 理 は 円 運 動 の 簡 易 的 な モデルになっています この ような 情 報 の 記 憶 の 仕 方 をス タック (stack) と 呼 んでいま す スタックを 利 用 して 情 報 を 記 憶 することをプッシュ (push) 記 憶 されている 情 報 を 取 り 出 すことをポップ (pop) と 呼 びます pushmatrix と popmatrix 利 用 した 例 サンプル 6-20 smooth(); colormode(hsb,359,99,99); background(0,0,99); nostroke(); // 現 在 の 原 点 をウインドウの 中 心 に 移 動 させる translate(width/2,height/2); float len = 10; for(int angle=0;angle < 1080;angle += 24){ pushmatrix(); // 現 在 の 座 標 軸 を 一 時 的 に 記 憶 rotate(radians(angle)); // 現 在 の 座 標 軸 を 回 転 させる translate(len,0); // 現 在 の 原 点 を X 軸 方 向 に len だけ 移 動 させる fill(angle % 360,99,99);// 塗 りつぶし 色 の 決 定 ellipse(0,0,20,20); // 円 の 描 画 popmatrix();// 直 前 に 記 憶 した 座 標 軸 の 状 況 を 現 在 の 座 標 軸 にする len *= 1.1; // 移 動 量 を 1 割 増 やす

18 resetmatrix 利 用 した 例 サンプル 6-21 size(200,200); smooth(); translate(width/2,height/2); // 現 在 の 原 点 をウインドウ 中 央 に 移 動 fill(255,10,10); // 現 在 の 原 点 を 中 心 に 赤 色 の 円 を 描 く ellipse(0,0,100,100); resetmatrix();// 現 在 の 原 点 を 初 期 状 態 (ウインドウの 左 上 )に 移 動 fill(10,255,10);// 現 在 の 原 点 を 中 心 に 緑 色 の 色 の 円 を 描 く ellipse(0,0,100,100); 応 用 : 時 計 の 制 作 今 回 学 習 した 内 容 に 加 えて 時 間 を 取 得 する 方 法 があれば 時 計 を 作 ることが 出 来 ます Processing では 現 在 の 時 刻 を 取 得 できる 関 数 が 用 意 されています 表 6-8 時 間 に 関 わる 関 数 関 数 名 意 味 hour() 現 在 の 時 間 の 時 (0 23 の 整 数 )を 返 す 関 数 minute() 現 在 の 時 間 の 分 (0 59 の 整 数 ) を 返 す 関 数 second() 現 在 の 時 間 の 秒 (0 59 の 整 数 ) を 返 す 関 数 year() 現 在 の 年 を 返 す 関 数 month() 現 在 の 月 (1 12 の 整 数 ) を 返 す 関 数 day() 現 在 の 日 (1 31 の 整 数 ) を 返 す 関 数 millis() プログラムを 実 行 してからの 時 間 をミリ 秒 単 位 で 返 す 1 秒 =1000 ミリ 秒 です サンプル 6-21 ではデジタル 時 計 のサンプルです text 関 数 では 文 字 列 (String) しか 表 示 できません そこで str 関 数 を 利 用 して 強 制 的 に int 型 を String 型 に 変 換 しています 実 は draw 関 数 の 中 は サンプル 6-23 のように 書 いても 同 じ 動 作 となります これは 式 hour()+":"+minute()+":"+second() を 見 ると 数 値 データ 同 士 の 加 算 ではなく 文 字 列 の 連 結 と 判 断 できるので 自 動 的 に hour() な どの 値 を String 型 に 変 換 してくれます hour()+":" などのように 数 字 と 文 字 列 に 対 して + を 計 算 しようとしてるので + は 加 算 ではなく 文 字 列 の 連 結 と 判 断 しています デジタル 時 計 サンプル 6-22 PFont font; size(400,64*3); smooth(); font = loadfont("helvetica-128.vlw"); textfont(font,64); textalign(center); rectmode(center); fill(0);

19 void draw(){ String h = str(hour()); // 時 間 を String 型 に 変 換 String m = str(minute()); // 分 を String 型 に 変 換 String s = str(second()); // 秒 を String 型 に 変 換 String t = h + ":" + m + ":" + s; // 表 示 する 文 字 列 作 成 int hs = textascent()+textdescent();// 表 示 する 文 字 列 の 高 さを 取 得 text(t,width/2,height/2,width,hs); デジタル 時 計 の 一 部 サンプル 6-23 void draw(){ // 表 示 する 文 字 列 作 成 String t = hour() + ":" + minute() + ":" + second(); int hs = textascent()+textdescent(); text(t,width/2,height/2,width,hs); サンプル 6-24 では アナログ 時 計 の 秒 針 の 部 分 だけを 表 示 するサ ンプルです 0 秒 時 には 鉛 直 上 方 向 に 秒 針 が 来 る 必 要 があります 初 期 状 態 での 座 標 軸 は 原 点 を 中 心 に -PI/2 だけ 回 転 させた 位 置 にある ことに 注 意 が 必 要 です 秒 針 だけのアナログ 時 計 サンプル 6-24 smooth(); void draw(){ // 現 在 の 原 点 をウインドウの 中 心 に 移 動 translate(width/2,height/2); float angle = -90+6*second();// 現 在 の 秒 から 秒 針 の 角 度 を 求 める rotate(radians(angle)); // 現 在 の X 軸 を 秒 針 方 向 に 傾 ける fill(50); triangle(0,5,180,0,0,-5); // 秒 針 を 三 角 形 として 表 示

20 おまけのサンプル 座 標 変 換 を 利 用 すると 複 雑 な 図 形 を 表 示 出 来 るようになります やっていることは 単 純 で 現 在 の 座 標 軸 を 色 々と 移 動 させながら line(0,0,0,-100) で 直 線 を 描 いているだけです smooth(); stroke(0); translate(width/2,height); line(0,0,0,-100); translate(0,-100); pushmatrix(); // (a) rotate(-pi/6); line(0,0,0,-100); translate(0,-100); pushmatrix(); // (b) rotate(-pi/6); line(0,0,0,-100); popmatrix(); // (b) // 右 上 に 続 く おまけ サンプル 6-23 rotate(pi/6); line(0,0,0,-100); popmatrix(); //(a) rotate(pi/6); line(0,0,0,-100); translate(0,-100); pushmatrix(); // (c) rotate(-pi/6); line(0,0,0,-100); popmatrix(); // (d) rotate(pi/6); line(0,0,0,-100); フラクタルと 呼 ばれる 図 形 の 描 画 の 基 礎 となるプログラム です フラクタルは CG にお ける 自 然 物 を 再 現 するにしば しば 用 いられる 手 法 です