Processing/1はじめに/5いろいろな図形の履歴(No.2)

履歴一覧
ソースを表示
Processing/1はじめに/5いろいろな図形は削除されています。
- 1 (2019-05-21 (火) 16:55:17)
- 2 (2019-05-21 (火) 17:02:11)
- 3 (2019-05-21 (火) 17:14:26)

#navi(contents-page-name): No such page: Processing/1はじめに

2次元図形†

円と長方形の他にもいろいろな図形が用意されている。

↑

線分†

line(x1,y1,x2,y2)で点(x1,y1)から点(x2,y2)への線分が描かれる。

↑

点†

point(x,y)で、点(x,y)が描かれる。

↑

楕円†

ellipse(x,y,dx,dy)で楕円を描く。ただし、 ellipseModeによって以下の通りになる。

ellipseMode	楕円の描き方
CENTER	点(x,y)を中心とする、x軸方向の直径dx、y軸方向の直径dyの楕円
RADIUS	点(x,y)を中心とする、x軸方向の半径dx、y軸方向の半径dyの楕円
CORNER	点(x,y), (x+dx,y+dy)を対角線とする長方形に内接する楕円
CORNERS	点(x,y), (dx,dy)を対角線とする長方形に内接する楕円

ellisepModeは何も指定しなければCENTERであり、それ以外を指定するには、ellipseMode()を用いる。

↑

円†

circle(x,y,d)で円を描く。描き方はellipseModeで設定する。これはellipse(x,y,d,d)と同じことを表す。

circle(40,50,10);
ellipseMode(RADIUS);
circle(80,70,10);
circle(70,40,20);

で、点(40,50)を中心とする直径10の円、点(80,70)を中心とする半径10の円、点(70,40)を中心とする半径20の円が描かれる。

↑

円弧†

arc(x,y,dx,dy,a1,a2,mode)で中心(x,y)、x方向の直径dx、y方向の直径dy、開始角a1、終了角a2の楕円弧を描く。a1, a2はラジアン単位なので、度単位で指定するには、radians()を用いる。例えば、

arc(50,50,100,100,radians(45), radians(225));

は中心(50,50)、半径50で45度回転させた半円を描く。また、modeはOPEN, CHORD, PIEのいずれかで、始点、終点の処理を表す。OPENは何もせず、CHORDは始点と終点を線分で結び、PIEは始点、終点をそれぞれ中心と線分で結ぶ。modeを省略するとOPENとみなされる。

↑

長方形†

rect(x,y,w,h)で長方形を描く。ただし、rectModeによって以下の通りになる。

rectMode	長方形の描き方
CORNER	点(x,y), (x+w,y+h)を対角線とする長方形
CORNERS	点(x,y), (w,h)を対角線とする長方形
CENTER	点(x,y)を中心とする幅w、高さhの長方形
RADIUS	点(x,y)を中心とする幅2w、高さ2hの長方形

rectModeは何も指定しなければCORNERである。それ以外を指定するには、rectMode()を用いる。

↑

正方形†

square(x,y,w)で正方形を描く。描き方はrectModeで設定する。これは、rect(x,y,w,w)と同じ。

↑

三角形†

triangle(x1,y1,x2,y2,x3,y3)で3点(x1,y1), (x2,y2), (x3,y3)を頂点とする三角形が描かれる。

↑

四角形†

quad(x1,y1,x2,y2,x3,y3,x4,y4)で4点(x1,y1), (x2,y2), (x3,y3), (x4,y4)を頂点とする四角形が描かれる。

例1 [#lff9d65d]

size(400,400); 
arc(200,90,250,250,0,radians(180)); 
quad(100,50,60,90,340,90,300,50); 
triangle(200,200,180,190,220,190); 
arc(200,140,60,60,radians(70),radians(110),PIE); 
ellipse(140,130,20,30); 
line(250,115,270,145); 
line(270,115,250,145);

五角形以上を描く命令は用意されていないが、連続する直線や曲線を描くための仕組みが用意されている。

beginShape();	図形を描き始める。
vertex(x,y);	頂点(x,y)を追加する。
endShape();	図形を描き終えるが、最初の頂点と最後の頂点の間に線を引かない。
endShape(CLOSE);	最初の頂点と最後の頂点を線で結び、図形を描き終える。

例2

beginShape(); 
  vertex(150.0,  50.0); 
  vertex(245.1, 119.1); 
  vertex(208.8, 230.9); 
  vertex( 91.2, 230.9); 
  vertex( 54.9, 119.1); 
endShape(CLOSE);

例3

beginShape(); 
  vertex(150.0,  50.0); 
  vertex(245.1, 119.1); 
  vertex(208.8, 230.9); 
  vertex( 91.2, 230.9); 
  vertex( 54.9, 119.1); 
endShape(CLOSE);

例4

beginShape(); 
  vertex(150.0,  50.0); 
  vertex(208.8, 230.9); 
  vertex( 54.9, 119.1); 
  vertex(245.1, 119.1); 
  vertex( 91.2, 230.9); 
endShape(CLOSE);

Processing/1はじめに/5いろいろな図形 の履歴(No.2)