processing
基本図形の描画
サーチ…
前書き
Processingでは、図形を描画することがプログラムにとって重要です。それ以外の場合は、画面に何も表示されません。このセクションでは、基本的な図形の描画方法を説明します。
構文
- 行（float x1、float y1、float x2、float y2）
- 行（float x1、float y1、float z1、float x2、float y2、float z2）
- 楕円（浮動小数点数x、浮動小数点数y、浮動小数点数w、浮動小数点数h）
- rect（float x、float y、float w、float h）
- 三角形（float x1、float y1、float x2、float y2、float x3、float y3）
パラメーター
| パラメータ | 詳細 |
|---|---|
| x1 | 最初の点のx座標 |
| y1 | 最初の点のy座標 |
| z1 | 最初の点のz座標 |
| ×2 | 2番目の点のx座標 |
| y2 | 2番目の点のy座標 |
| z2 | 2番目の点のz座標 |
| ×3 | 3番目の点のx座標 |
| y3 | 第3の点のy座標 |
| バツ | x座標 |
| y | y座標 |
| w | 幅 |
| h | 高さ |
備考
Processingの基礎については、参考文献を参照してください。
ラインを描く
処理は、 line()という名前のメソッドを提供し、画面に線を描画します。このコードは、黒の背景に白い10ピクセルの線を描画します。
void setup() {
size(500, 500);
background(0);
stroke(255);
strokeWeight(10);
}
void draw() {
line(0, 0, 500, 500);
}
メソッドline()の署名はこれです。
line(x1, y1, x2, y2);
x1とy1は始点の座標です。 x2 、 y2は終点の座標である。
メソッドstroke()は、描画する線の色を指定するために使用されます。
メソッドstrokeWeight()は、描画する線の太さを指定するために使用します。 （ピクセル単位）
長方形の描画
処理はrect()メソッドを使用して長方形を描画します。このコードは、黒い背景に白い50 X 50の長方形を描きます。
void setup() {
size(500, 500);
background(0);
fill(255);
noStroke();
}
void draw() {
rect(225, 225, 50, 50);
}
メソッドrect()のシグネチャはこれです。
rect(x, y, w, h);
xとyは長方形の座標です。 wとhは矩形の幅と高さです。
メソッドfill()は、矩形の塗りつぶし色や、楕円、三角形、多角形などの他の図形を指定するために使用されます。
メソッドnoStroke()は、矩形の周囲にストロークがないことを指定するために使用されます。このメソッドは、楕円、三角形、多角形などの他の図形にも影響します。
楕円の描画
処理は、 ellipseを描くためにメソッドellipseを提供します。このコードは、25ピクセルの半径を持つ白い円を描きます。
void setup() {
size(500, 500);
background(0);
fill(255);
noStroke();
}
void draw() {
ellipse(225, 225, 50, 50);
}
メソッドellipse()のシグネチャはこれです。
ellipse(x, y, w, h);
xとyは楕円の座標です。 wとhは楕円の幅と高さです。
三角形を描く
処理はtriangleを描くためにtriangle法を提供する。以下のコードは、各定義点の間に25ピクセルのほぼ正三角形を描きます。
void setup() {
size(500, 500);
background(0);
}
void draw() {
triangle(0, 0, 25, 0, 12, 12);
}
triangleの署名はそうです：
triangle(x1, y1, x2, y2, x3, y3);
各x点は点のx軸に対応し、 yはy軸に対応します。 3つのポイントが結合されて三角形が形成されます。
三角形を描く
処理はtriangle()を描画する三角形triangle()を提供します。このコードは黒い背景に白い三角形を描画します。
void setup() {
size(500, 500);
background(0);
fill(255);
noStroke();
}
void draw() {
triangle(250, 225, 225, 275, 275, 275);
}