Ｐ　Processing (2)　〜動的に変化する画面

ｂｙ　ｆｊｋ

　前報では、静止図形を描画したが、Processinngでは図形を動かすことができる。最初に１回だけ実行される setup()関数を記述し、draw()ブロック内で繰り返し描画を行うことで、パラパラ漫画の原理で、動きを実現する。なお、drawはデフォルトで１秒間に60回実行される（実行回数は frameRate()関数で変更可）。

processing画面

�@　マウスの軌跡を追いかけて●を描く

・輪郭線の「有り」はstroke();、「無し」はnostroke(); で指定

・マウスの「X位置」はmouseX、「Y位置」はmouseY変数に記憶

・例で円は輪郭線が無く、モノクロで半透明（102／255）

・backgroudを有効にする(コメントを外す)と、軌跡が残らない（backgroudは、必ず、描画開始前に記述すること）

・frameRateを有効にすると、描画される●の数が変わる

マウス追いかけ画面

void setup(){ size(480,200); fill(0,102); noStroke(); // frameRate(10); } void draw(){ // background(205); ellipse(mouseX,mouseY,9,9); }

�A 点を繋ぐ、滑らかに動く

・マウスの一つ前の位置は pmouseX、pmouseY変数に記憶されているので、これと現在位置を使って連続線を描く

点を繋ぐと・・

void setup(){ size(500,200); strokeWeight(4); stroke(0,102); } void draw(){ line(mouseX,mouseY,pmouseX,pmouseY); }

・マウスが早く動くと、ぎこちない線になるので、イージング手法で、ゆっくりとマウスについて行く様に描く

イージングを使う

float x,y,px,py; float easing = 0.05; void setup(){ size(500,200); stroke(255,0,0,102); strokeWeight(4) } void draw(){ float targetX = mouseX; x += (targetX - x) * easing; float targetY = mouseY; y += (targetY - y) * easing; line(x,y,px,py); px = x; py = y; }

・easingの値を小さくすると、目的地までのステップ数が増えて、連続線がより細かく綺麗になるが、描画に時間がかかる。

・変数の型が同じ場合、カンマで区切ることで、列挙して宣言できる
　

�B マウスアクション

・マウスボタンの状態は mousePressed変数で知ることが出来る

・mouseButton変数がLEFT、CENTER、RIGHTかでボタンを判断

・図形とマウス位置(mouseX,mouseY)の関係は、

＊円形エリア：	マウス位置と円の中心(x,y)との距離は dist(mouseX,muoseY,x,y)関数で知ることができ、distが円の半径（rad）以下であればマウス位置は円内となる
＊矩形エリア：	マウス位置が、x1〜x2間、且つ、y1〜y2間にある場合、マウスは矩形エリア(x1,y1,x2,y2)の中にあることになる

カーソルが円上に来ると赤枠表示 さらにボタンを押すと色が変わる

int x=150; int y=100; int rad=20; void setup(){ size(300,200); ellipseMode(RADIUS); rectMode(RADIUS); } void draw(){ background(210); fill(255,255,0); float d=dist(mouseX,mouseY,x,y); if(d < rad){ noFill(); stroke(255,0,0); strokeWeight(2); rect(x,y,rad+2,rad+2); fill(255,255,0); if(mousePressed) { fill(0,0,255); } } noStroke(); ellipse(x,y,rad,rad); }

�C キーボードと文字（日本語）表示

・キーボードが押されると keyPressed変数がTRUEになる

・押されたキーは key変数で取得（制御キー等はコード化可能な文字かどうかをCODEDで確認後、KeyCode変数で取得）

・文字('a')の描画は text(char,x,y)、

　文字列("moji")の描画も text(str,x,y)

・文字サイズは textSize(n)で指定

・フォントは textFont(font)で指定

・フォントの色は fill(col)で指定

・文字表示のデフォルト基準点は「左下」

文字を表示

void setup(){ size(200,200); textSize(64); textAlign(CENTER); fill(0); } void draw(){ if(keyPressed){ if(key!=CODED){ //制御文字？ background(204); text(key,100,100); } } }

・英文字はデフォルトフォントでtext関数によって描画できるが、他のフォントや日本語フォントを使いたい場合、事前に createFont(font,size)関数でProcessingで使えるフォントに変換しておく必要がある(変換されたフォントはプロジェクトのdataフォルダーに保存される）。使えるフォントは、「ツール／フォント作成」で確認・選択でき、選択後、OKでファイル化する。

ツール／フォント作成

フォントの設定

・フォント変数は PFontクラスとして宣言してから、使用する

指定フォント （MS-ゴシック） で漢字を表示

PFont font; void setup(){ size(500,200); font=createFont("MS-Gothic-48",48); textFont(font); } void draw(){ background(102); text("漢字です",100,100); }

�D 運　動

●ラスター方式(xy座標で描画位置を指示)

　透過度を設定して背景を描画すると運動の残像が見える

軌跡を残しながらsin波を描く

背景をクリアしないと

float angle = 0.0; float offset = 100; float scalar = 40; float speed = 0.05; void setup(){ size(400,200); } void draw(){ fill(0,31); // 透過度設定 rect(0,0,width,height); fill(255); float y = offset+sin(angle)*scalar; float x = angle*30; ellipse(x,y,40,40); angle += speed; }

●ベクトル方式(PVectorクラスを使用）

・描画エリアの端で運動方向を逆に変更すると、壁にぶつかって跳ね返るようになる

・キーワードnewを使って新らしいPVectorクラスのオブジェクトを作成する

・PVectorクラスのx,yは座標のフィールド変数

・同じクラスのオブジェクトは addメソッドなどで演算可

・random(low,high)はlowからhighまでの間の乱数を発生。low省略時はlow=0となる

壁で跳ね返る様子

背景をクリアしないと

PVector loc, vel; int rad = 10; void setup(){ size(300,200); ellipseMode(RADIUS); loc=new PVector(random(width),random(height)); vel=new PVector(random(2.0,5.0),random(2.0,5.0)); } void draw(){ fill(0,31); rect(0,0,width,height); //背景クリア fill(255); loc.add(vel); if(loc.xwidth-rad){ vel.x=vel.x * -1; } if(loc.yheight-rad){ vel.y=vel.y * -1; } ellipse(loc.x,loc.y,rad,rad); }

�E 移動、回転、拡大、縮小

・アクションは原点を中心に行われ、原点移動は translate(x,y)で行う

・Drawループ終了で原点はリセットされる

・原点移動を続けると加算されるので、一時的に座標変更を行う場合、pushMatrix()で座標データを退避し、popMarix()で元に戻す

・図形描画の基準点を指定するには、rectMode()、ellipseMode()でCENTER、RADIUS、CORNER、CORNERSを使って指定する

・図形を回転させるには、rotate(angle);（angleの単位はラジアン）

・サイズを変更するには、scale(size);（sizeは倍率）

矩形が回転しながら移動

背景をクリアしないと

PVector loc, vel; float angle=0.0; void setup(){ size(400,300); loc=new PVector(random(width),random(height)); vel=new PVector(random(2.0,5.0),random(2.0,5.0)); } void draw(){ fill(0,31); rectMode(CORNER); rect(0,0,width,height); fill(255); loc.add(vel); if(loc.x<0 || loc.x>width){ vel.x=vel.x * -1; } if(loc.y<0 || loc.y>height){ vel.y=vel.y * -1; } translate(loc.x,loc.y); rotate(angle); rectMode(CENTER); rect(0,0,60,20); angle+=0.1; }

Ｗ　Wordでピッタリ位置印刷指定、印刷

ｂｙ　ＴＭＸ

　私が位置指定印刷をするときはWordを使っています。Wordで0.1mm単位で印刷する場所を指定する方法は、

1. レイアウトタブからページ設定→サイズ（用紙）と向きを指定
2. 図形を挿入→図形の書式タブから図形の大きさ、枠の塗りつぶしや枠線を指定
3. レイアウトオプション→位置→水平、垂直方向でページ指定と距離を設定
4. 文字を入れて大きさや書体を指定
5. 印刷して確認してみる

【fjk追記】

• 文字を入力するだけなら、「挿入」「図形」「テキストボックス」でも同じことが出来ます。
  ただし、図形枠を使うと、角丸四角形・楕円など四角形以外の枠が使えます。
• レイアウトの「文字列の折り返し」で「前面」を選ぶと、画面上の任意の位置に枠をおけます。
  そして、マウスで枠の位置やサイズを変更できるので，位置合わせがほぼできます。

---

Ｘ　EXCELでセルサイズをmm単位で指定する

（TMXさんの質問「Excelでの位置合わせは？」に応えて・・）　　　　　ｂｙ　ｆｊｋ

　Excelでは、セルの幅や高さは「ポイント」(ピクセル）単位で指定することで、ほぼ大まかな位置決めはできるが、セルの幅や高さを、（0.1mm程度の誤差が残るが）cm／mm単位で指定するには、

�@「表示」で「ページレイアウト」表示に切り替える

�A 幅・高さが、センチメートル単位で表示されるようになるので、希望の数値を入力する(5mm間隔など）

�B 設定したメッシュで、希望位置に相当するセル位置に文字データなどを入力

�C 必要であれば、セルを結合したり、空白行や列を使って細かな位置調整をする

ページレイアウト表示にすると 幅・高さ表示がcm単位

（応用）A4全面5mmメッシュの 印刷プレビュー

• 「ファイル／オプション／詳細設定」で「ルーラーの単位」をmmにすると、「ページレイアウト」で幅や高さがmm表示となる。また、ルーラーも表示しておくと、位置合わせがしやすくなる。
• ページレイアウト表示で、余白部にマウスカーソルを合わせて、余白を表示させなくすることも出来る。（「余白を表示させない」ポップが表示される場所でクリックすると余白が表示されなくなる）。

　用紙の余白設定は、「ページレイアウト／余白」を選び、「ページ設定」で数値(cm)を入力。ただし、使用するプリンタによっては数値を小さく出来ない場合がある。

「ユーザー設定の余白」を選ぶ

各余白部などの数値を入力

---

※ 本レポートの参考・利用は、あくまでも自己責任でお願いします。

---

「拡大鏡」を使う （Pr-2)動的に変化する画面 Wordで位置指定 Excelのセルをmmで設定

---