画面の描画がしたい

この章では画面の描画に関することをまとめる。

図形の描画

processingでは簡単な図形を描く関数がたくさん用意されている。以下に円を描く例を示す。

void setup (){
  circle (width/2,height/2,width/2);
}

widthは画面幅、heightは画面高さを表す変数である。
では、色を変えてみよう。色を変えるにはfill関数を使用する。

void setup (){
  fill (0);
  circle (width/2,height/2,width/2);
}

丸の色が黒に変化した。
他にも描画に関係する関数で代表的なものは次のようなものがある。

関数名(引数)	例	効果
`fill (gray)`	`fill (255)`	`0`~`255`の値で塗りつぶしの色をグレースケールで設定する。
`fill (r,g,b)`	`fill (255,200,200)`	RGB(それぞれ`0~255`で指定)で塗りつぶしの色を設定する。
`background (gray)`	`background (255)`	`0`~`255`の値で背景の色をグレースケールで塗りつぶすする。
`background (r,g,b)`	`background (200,255,200)`	RGB(それぞれ`0~255`で指定)で背景を塗りつぶす。
`rect (x,y,dx,dy)`	`rect (50,50,100,100)`	`(x1,y1)`の点を左上の頂点に持つ幅`dx`、高さ`dy`の四角形を描く。
`circle (x,y,d)`	`circle (100,100,150)`	`(x,y)`を中心とした直径`d`の円を描く。
`ellipse (x,y,dx,dy)`	`ellipse (100,100,100,150)`	`(x,y)`を中心(焦点ではない)に幅`dx`高さ`dy`の楕円を描く。
`line (x1,y1,x2,y2)`	`line (50,50,100,150)`	始点が`(x1,y1)`、終点が`(x2,y2)`の線を引く。
`text (str,x,y)`	`text ("Hello World!",0,0)`	`(x,y)`を起点に文字列`str`を描画する
`textSize (size)`	`textSize (50)`	画面に描画するテキストのサイズを設定する
`textAlign (pos1,pos2)`	`textAlign (CENTER,CENTER)`	テキストの描画の起点をずらす

また、processingにおいて(x,y)=(0,0)の点は画面左上の角であり、右がxプラス方向、下がyプラス方向であることに注意したい。

processingにはdrawというものがある。 draw関数内に記述されたコードは一秒間に約60回実行されるという特徴を持つ。

例. 少しずつ大きくなる円

void setup(){
  size (500,500);
}

int i=0;//draw内で何度も初期化されるのを防ぐ

void draw (){
  circle (250,250,i++);
}

これで図形を描画できるようになったわけだが表示されるウィンドウがとても小さい。しかし安心してほしい。ちゃんとウィンドウのサイズを変える関数が用意されている。

これらの関数はsetup関数の中にのみ記述できるため注意が必要である。

問1. ウィンドウサイズを500×500に設定し、ウィンドウの背景を白に設定せよ。

問2. ウィンドウをフルスクリーンに設定し背景色が白、drawが一度実行されるたび場所がウィンドウの中心から1ずつ右にずれていく、サイズが300×300の赤色の正方形を描画せよ。