◆PROCESSING 逆引きリファレンス
カテゴリー：図形描画
三角形を描画するには
【解説】
PROCESSINGは、様々な図形を簡単に描画できるのが特徴です。
その1つに三角形を描画する命令があります。
【構文】
triangle(x1, y1, x2, y2, x3, y3);
【パラメータ】
x1 float: 最初の点の x座標
y1 float: 最初の点の y 座標
x2 float: 2 番目の点の x座標
y2 float: 2 番目の点の y 座標
x3 float: 3 番目の点の x座標
y3 float: 3 番目の点の y 座標
【戻り値】
void
【注意】
PROCESSINGの座標系は以下のようになっています（クリックすると拡大します）。
x1からx3、y1からy3は三角形の各頂点座標です。（ x1, y1 ）からみて順に右回りの頂点になります。下図を参照してください（クリックすると拡大します）。
なお、xとyが実行結果ウィンドウの範囲外（-100とかwidth*2など）を示していてもエラーにはならず、それなりに描画されるようです。各座標の正当性はプログラマーが意識してねって事ですね（笑）。
【関連記事】
なし
●三角形を描画する例：
|
1 2 3 4 5 6 |
size(300,300); background(255); fill(100,100,255); triangle( width/2, 0, width, height/2, 0, height); |
薄い青の三角形を描画して、塗りつぶしています。
＜出力サンプル＞
●応用例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
float inc = 0.1; //最小回転角度 int centerX; int centerY; float angle = 0; void setup() { size(320, 320); background(255); centerX = width/2; centerY = height/2; } void mouseClicked() { background(255); centerX = mouseX; //クリックされた位置が中心 centerY = mouseY; //クリックされた位置が中心 } void draw() { //回転の中心をクリックされた位置にする translate(centerX, centerY); //0.1度回転する rotate(angle+=inc); if( angle > 360 ){ angle = 0; } //回転した三角形を描く fill(255,255,100); triangle( 10,10, 35,15, 30,30); fill(255,100,100); triangle( 30,40, 70,60, 20,80); fill(100,100,255); triangle( 60,80,80,100,40,120); } |
上記を実行すると、青赤黄の3色の三角形がマウスクリックした座標を中心に回転して、美しい模様を描きます。
＜出力サンプル＞
本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。