04 線を描いてみようーvertexを使う

直線の方程式

LINE-0400　基本的な直線の方程式を紹介します。まず直交座標を描きます。これは位置関係を分かりやすくするためのものです。その後 translate()で原点をセンターに移動します。そうするとY軸の上の方がマイナスになるのでscale(1, -1)で上下反転させます。
beginShape()で図形の頂点の記録を開始します。直線の方程式で始点と終点を計算しvertex()で頂点を設定します。endShape()で終了し、直線が描画されます。

size(400, 400);
// 直交座標を描く
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(width/2,height/2); //原点をセンターに移動
scale(1, -1); // Y軸を上下反転
int a=1; //勾配
int b=40; //切片
float x; //X座標
float y; //Y座標
stroke(0); //シェイプを開始
beginShape();
x=-150;
y =a*x+b; //　直線の方程式
vertex(x, y);//始点
x=150;
y =a*x+b;
vertex(x, y);//終点
endShape();//シェイプを終了

size(400, 400);

// 直交座標を描く

stroke(128);

line(0, height/2, width, height/2);

line(width/2, 0, width/2, height);

translate(width/2,height/2); //原点をセンターに移動

scale(1, -1); // Y軸を上下反転

int a=1; //勾配

int b=40; //切片

float x; //X座標

float y; //Y座標

stroke(0); //シェイプを開始

beginShape();

x=-150;

y =a*x+b; //　直線の方程式

vertex(x, y);//始点

x=150;

y =a*x+b;

vertex(x, y);//終点

endShape();//シェイプを終了

直線の方程式

方程式	*y=ax+b**	傾きaで座標軸上の交点がbである直線。bが０ならy=a*x
変数	a	勾配　（a=tan）
	b	切片　（座標軸上の交点）

シェイプを開始

構文	beginShape() beginShape(kind)	形状の頂点の記録を開始します。 vertex(),endShape() と共に使用します。 beginShape() 内では座標変換、他のシェイプは使用できません。
パラメータ	kind	(int) POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, または QUAD_STRIP
戻り値	void	なし

シェイプを終了

構文	endShape() endShape(mode)	beginShape() 以降に定義された画像データがイメージバッファ（一時的に保存しておく領域）に書き込まれ、記録を停止します。 vertex(),beginShape() と共に使用します。
パラメータ	mode	(int)　CLOSEを使用して図形を閉じます。（始点と終点を結びます／２点間では不要）
戻り値	void	なし

頂点の設定

構文	vertex(x, y)	点、線〜多角形の頂点座標を指定するために使用されます。 beginShape() と endShape() 関数内でのみ使用されます。 ※他にも3D関係の構文がありますがそれは別ポストで扱います。
パラメータ	x	(float)　頂点のx座標
	y	(float)　頂点のy座標
戻り値	void	なし

beginShape() のパラメータ

LINE-0401　ここからはbeginShape() のパラメータを確認していきます。最初はパラメータなしで四角形を描いています。

size(400, 400);
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(width/2,height/2); //原点をセンターに移動
scale(1, -1); // Y軸を上下反転
stroke(0);
int a=130; //座標の値
beginShape(); //シェイプを開始
vertex(-a, a); //左上
vertex(a, a); //右上
vertex(a, -a); //右下
vertex(-a, -a); //左下
endShape(CLOSE);//シェイプを終了

size(400, 400);

stroke(128);

line(0, height/2, width, height/2);

line(width/2, 0, width/2, height);

translate(width/2,height/2); //原点をセンターに移動

scale(1, -1); // Y軸を上下反転

stroke(0);

int a=130; //座標の値

beginShape(); //シェイプを開始

vertex(-a, a); //左上

vertex(a, a); //右上

vertex(a, -a); //右下

vertex(-a, -a); //左下

endShape(CLOSE);//シェイプを終了

デフォルトで黒の境界線1ピクセル、塗りが白となっています。endShapeでCLOSEしないと左下と左上の頂点が繋がりません。（境界線が描かれない）
LINE-0402　四角形内を塗りつぶさない場合はnoFill()を使用します。

size(400, 400);
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(width/2,height/2); //原点をセンターに移動
scale(1, -1); // Y軸を上下反転
noFill();
stroke(0);
int a=130; //座標の値
beginShape(); //シェイプを開始
vertex(-a, a); //左上
vertex(a, a); //右上
vertex(a, -a); //右下
vertex(-a, -a); //左下
endShape(CLOSE);//シェイプを終了

size(400, 400);

stroke(128);

line(0, height/2, width, height/2);

line(width/2, 0, width/2, height);

translate(width/2,height/2); //原点をセンターに移動

scale(1, -1); // Y軸を上下反転

noFill();

stroke(0);

int a=130; //座標の値

beginShape(); //シェイプを開始

vertex(-a, a); //左上

vertex(a, a); //右上

vertex(a, -a); //右下

vertex(-a, -a); //左下

endShape(CLOSE);//シェイプを終了

塗りつぶさない

構文	noFill()	図形の塗りつぶしを無効にする。塗りつぶす場合はfill()を使用する。
戻り値	void	なし

LINE-0403　POINTは点を描画します。デフォルトで１ピクセルで、よく見えないので線幅を10ピクセルにしています。塗りつぶしは意味がありません。

size(400, 400);
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(width/2,height/2); //原点をセンターに移動
scale(1, -1); // Y軸を上下反転
stroke(0);
strokeWeight(10);
int a=130; //座標の値
beginShape(POINTS); //シェイプを開始
vertex(-a, a); //左上
vertex(a, a); //右上
vertex(a, -a); //右下
vertex(-a, -a); //左下
endShape();//シェイプを終了

size(400, 400);

stroke(128);

line(0, height/2, width, height/2);

line(width/2, 0, width/2, height);

translate(width/2,height/2); //原点をセンターに移動

scale(1, -1); // Y軸を上下反転

stroke(0);

strokeWeight(10);

int a=130; //座標の値

beginShape(POINTS); //シェイプを開始

vertex(-a, a); //左上

vertex(a, a); //右上

vertex(a, -a); //右下

vertex(-a, -a); //左下

endShape();//シェイプを終了

LINE-0404　LINESはline()関数のような2点間を結ぶ働きをするようです。塗りつぶしは意味がありません。

size(400, 400);
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(width/2,height/2); //原点をセンターに移動
scale(1, -1); // Y軸を上下反転
stroke(0);
int a=130; //座標の値
beginShape(LINES); //シェイプを開始
vertex(-a, a); //左上
vertex(a, a); //右上
vertex(a, -a); //右下
vertex(-a, -a); //左下
endShape();//シェイプを終了

size(400, 400);

stroke(128);

line(0, height/2, width, height/2);

line(width/2, 0, width/2, height);

translate(width/2,height/2); //原点をセンターに移動

scale(1, -1); // Y軸を上下反転

stroke(0);

int a=130; //座標の値

beginShape(LINES); //シェイプを開始

vertex(-a, a); //左上

vertex(a, a); //右上

vertex(a, -a); //右下

vertex(-a, -a); //左下

endShape();//シェイプを終了

LINE-0405　TRIANGLESは３頂点が結ばれ、三角形を描画します。３頂点がセットで、それ以下の頂点があっても無視されるようです。

size(400, 400);
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(width/2,height/2); //原点をセンターに移動
scale(1, -1); // Y軸を上下反転
stroke(0);
int a=130; //座標の値
beginShape(TRIANGLES); //シェイプを開始
vertex(-a, a); //左上
vertex(a, a); //右上
vertex(a, -a); //右下
vertex(-a, -a); //左下 //無視される
endShape();//シェイプを終了

size(400, 400);

stroke(128);

line(0, height/2, width, height/2);

line(width/2, 0, width/2, height);

translate(width/2,height/2); //原点をセンターに移動

scale(1, -1); // Y軸を上下反転

stroke(0);

int a=130; //座標の値

beginShape(TRIANGLES); //シェイプを開始

vertex(-a, a); //左上

vertex(a, a); //右上

vertex(a, -a); //右下

vertex(-a, -a); //左下 //無視される

endShape();//シェイプを終了

LINE-0406　TRIANGLE_STRIPを確認します。トライアングルストリップとは接続された一連の三角形のことで頂点が共有されています。

size(400, 400);
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(width/2,height/2); //原点をセンターに移動
scale(1, -1); // Y軸を上下反転
stroke(0);
int a=130; //座標の値
beginShape(TRIANGLE_STRIP); //シェイプを開始
vertex(-a, -a);
vertex(-a+60, a);
vertex(-a+120, -a);
vertex(-a+180, a);
vertex(-a+240, -a);
vertex(-a+300, a);
endShape();//シェイプを終了

size(400, 400);

stroke(128);

line(0, height/2, width, height/2);

line(width/2, 0, width/2, height);

translate(width/2,height/2); //原点をセンターに移動

scale(1, -1); // Y軸を上下反転

stroke(0);

int a=130; //座標の値

beginShape(TRIANGLE_STRIP); //シェイプを開始

vertex(-a, -a);

vertex(-a+60, a);

vertex(-a+120, -a);

vertex(-a+180, a);

vertex(-a+240, -a);

vertex(-a+300, a);

endShape();//シェイプを終了

LINE-0407　TRIANGLE_FANは1つの中央の頂点を共有する接続された三角形のセットです。

size(400, 400);
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(width/2,height/2); //原点をセンターに移動
scale(1, -1); // Y軸を上下反転
stroke(0);
int a=130; //座標の値
beginShape(TRIANGLE_FAN); //シェイプを開始
vertex(0, 0);
vertex(0, a);
vertex(a, 0);
vertex(0, -a);
vertex(-a, 0);
vertex(0, a);
endShape();//シェイプを終了

size(400, 400);

stroke(128);

line(0, height/2, width, height/2);

line(width/2, 0, width/2, height);

translate(width/2,height/2); //原点をセンターに移動

scale(1, -1); // Y軸を上下反転

stroke(0);

int a=130; //座標の値

beginShape(TRIANGLE_FAN); //シェイプを開始

vertex(0, 0);

vertex(0, a);

vertex(a, 0);

vertex(0, -a);

vertex(-a, 0);

vertex(0, a);

endShape();//シェイプを終了

LINE-0408　QUADSは4頂点が結ばれ、四角形を描画します。４頂点がセットで、それ以下は無視されるようです。

size(400, 400);
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(width/2,height/2); //原点をセンターに移動
scale(1, -1); // Y軸を上下反転
stroke(0);
int a=130; //座標の値
beginShape(QUADS); //シェイプを開始
vertex(-a+50, a);
vertex(-a, -a);
vertex(a, -a);
vertex(a, a-50);
endShape();//シェイプを終了

size(400, 400);

stroke(128);

line(0, height/2, width, height/2);

line(width/2, 0, width/2, height);

translate(width/2,height/2); //原点をセンターに移動

scale(1, -1); // Y軸を上下反転

stroke(0);

int a=130; //座標の値

beginShape(QUADS); //シェイプを開始

vertex(-a+50, a);

vertex(-a, -a);

vertex(a, -a);

vertex(a, a-50);

endShape();//シェイプを終了

LINE-0409　QUAD_STRIPは接続された一連の四角形のことで頂点が共有されています。

size(400, 400);
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(width/2,height/2); //原点をセンターに移動
scale(1, -1); // Y軸を上下反転
stroke(0);
int a=130; //座標の値
beginShape(QUAD_STRIP); //シェイプを開始
vertex(-a, a);
vertex(-a, -a);
vertex(-a+150, a);
vertex(-a+100, -a);
vertex(a, a);
vertex(a, -a);
endShape();//シェイプを終了

size(400, 400);

stroke(128);

line(0, height/2, width, height/2);

line(width/2, 0, width/2, height);

translate(width/2,height/2); //原点をセンターに移動

scale(1, -1); // Y軸を上下反転

stroke(0);

int a=130; //座標の値

beginShape(QUAD_STRIP); //シェイプを開始

vertex(-a, a);

vertex(-a, -a);

vertex(-a+150, a);

vertex(-a+100, -a);

vertex(a, a);

vertex(a, -a);

endShape();//シェイプを終了

多角形を描く

LINE-0410　vertex()を使って多角形を描いてみましょう。円の公式を使います。シェイプの終了でendShape(CLOSE)にしないと線の最後が繋がりません。

size(400, 400);
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(width/2, height/2); //原点をセンターに移動
scale(1, -1); // Y軸を上下反転
stroke(0);
int r=180; //　円の半径
int pnum =5; // 多角形の角数
float ang=TWO_PI/pnum; //多角形の一つの角度
float p; // 多角形の角度

beginShape(); //シェイプを開始
for (int i = 0; i <pnum; i++) {
  p=ang*i;//角度を増分する
  // 円の公式
  float x=r*sin(p);
  float y=r*cos(p);
  vertex(x, y);
}
endShape(CLOSE);//シェイプを終了

size(400, 400);

stroke(128);

line(0, height/2, width, height/2);

line(width/2, 0, width/2, height);

translate(width/2, height/2); //原点をセンターに移動

scale(1, -1); // Y軸を上下反転

stroke(0);

int r=180; //　円の半径

int pnum =5; // 多角形の角数

float ang=TWO_PI/pnum; //多角形の一つの角度

float p; // 多角形の角度

beginShape(); //シェイプを開始

for (int i = 0; i <pnum; i++) {

p=ang*i;//角度を増分する

// 円の公式

float x=r*sin(p);

float y=r*cos(p);

vertex(x, y);

}

endShape(CLOSE);//シェイプを終了

やってみよう　多角形の角数 pnumの値を変えてみよう

LINE-0411　多角形を３未満にすると多角形にはなりません。エラー処理が必要です。アラートウインドウ等はJAVAを使えばできるそうですが、println()で簡易的にコンソールにメッセージを表示するようにします。

size(400, 400);
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(width/2, height/2); //原点をセンターに移動
scale(1, -1); // Y軸を上下反転
stroke(0);
int r=180; //　円の半径
int pnum =2; // 多角形の角数
if (pnum<3){
  println("エラー！　角数は３以上に設定してください");
  exit(); //プログラムを終了
}
float ang=TWO_PI/pnum; //多角形の一つの角度
float p; // 多角形の角度

beginShape(); //シェイプを開始
for (int i = 0; i <pnum; i++) {
  p=ang*i;//角度を増分する
  // 円の公式
  float x=r*sin(p);
  float y=r*cos(p);
  vertex(x, y);
}
endShape(CLOSE);//シェイプを終了

size(400, 400);

stroke(128);

line(0, height/2, width, height/2);

line(width/2, 0, width/2, height);

translate(width/2, height/2); //原点をセンターに移動

scale(1, -1); // Y軸を上下反転

stroke(0);

int r=180; //　円の半径

int pnum =2; // 多角形の角数

if (pnum<3){

println("エラー！　角数は３以上に設定してください");

exit(); //プログラムを終了

}

float ang=TWO_PI/pnum; //多角形の一つの角度

float p; // 多角形の角度

beginShape(); //シェイプを開始

for (int i = 0; i <pnum; i++) {

p=ang*i;//角度を増分する

// 円の公式

float x=r*sin(p);

float y=r*cos(p);

vertex(x, y);

}

endShape(CLOSE);//シェイプを終了

コンソールに書き込む

構文	println() println(what) println(variables)	プロセッシング環境の下部にある黒い四角形のコンソール領域に書き込みます。
パラメータ	what	コンソールにプリントするデータ（文字列の場合は””で囲みます） byte, boolean, char, int, float, String, Object
	variables	コンマで区切られたデータのリスト Object[]
戻り値	void	なし

プログラムを停止/終了する

構文	exit()	プログラムを停止/終了する
戻り値	void	なし

多角形の角数を多くすると、80角以上くらいから円に近づきます。

LINE-0412　多角形の応用で星を描いてみましょう。Switch文を使用して大円と小円の半径の座標を交互に設定します。

size(400, 400);
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(width/2, height/2); //原点をセンターに移動
scale(1, -1); // Y軸を上下反転
stroke(0);
int pnum =10; // 多角形の角数
if (pnum<3) {
  println("エラー！　角数は３以上に設定してください");
  exit(); //プログラムを終了
}
float ang=TWO_PI/pnum; //多角形の一つの角度
float p; // 多角形の角度
int r=180; //大円の半径
int sw =0; //大円と小円の座標をスイッチする
beginShape(); //シェイプを開始
for (int i = 0; i <pnum; i++) {
  p=ang*i;//角度を増分する
  switch(sw) {
  case 0:
    //大円の半径
    r=180; //大円の半径
    sw=1;
    break;
  case 1:
    r=70; //小円の半径
    sw=0;
    break;
  }
  // 円の公式
  float x=r*sin(p);
  float y=r*cos(p);
  vertex(x, y);
}
endShape(CLOSE);//シェイプを終了

size(400, 400);

stroke(128);

line(0, height/2, width, height/2);

line(width/2, 0, width/2, height);

translate(width/2, height/2); //原点をセンターに移動

scale(1, -1); // Y軸を上下反転

stroke(0);

int pnum =10; // 多角形の角数

if (pnum<3) {

println("エラー！　角数は３以上に設定してください");

exit(); //プログラムを終了

}

float ang=TWO_PI/pnum; //多角形の一つの角度

float p; // 多角形の角度

int r=180; //大円の半径

int sw =0; //大円と小円の座標をスイッチする

beginShape(); //シェイプを開始

for (int i = 0; i <pnum; i++) {

p=ang*i;//角度を増分する

switch(sw) {

case 0:

//大円の半径

r=180; //大円の半径

sw=1;

break;

case 1:

r=70; //小円の半径

sw=0;

break;

}

// 円の公式

float x=r*sin(p);

float y=r*cos(p);

vertex(x, y);

}

endShape(CLOSE);//シェイプを終了

やってみよう　多角形 pnumの値を変えてみよう。(ただし偶数) 小円の大きさを変えてみよう

選択肢から分岐する

構文	switch(expression) { case name: statements break;// Optional case name: // Optional statements break; // Optional default: statements }	expressionの値と同じ値のcase name:に分岐します。３つ以上の選択肢がある場合はif else文より見やすく使いやすいです。 caseのnameの最後は : コロンです。 default:は省略可能です。
パラメータ	expression	byte, char, または int 例）int num = 1; switch(num) char letter = ‘N’; switch(letter)
構文	case name:	switch構造体のパラメータで評価される異なる名前を示します。
パラメータ	name	byte, char, または int 例）case 1: case 2: case 3: case “A”: case “B”: case “C”:
	statements	実行される1つ以上のステートメント
構文	break;	switch、for、whileなどの構造体の実行を終了し、次のステートメントにジャンプします。 breakがない場合はswitch内の残りのステートメントはすべて実行されます。
構文	default:	スイッチのデフォルト条件を定義するキーワード。どのケース名もswitchパラメータと一致しない場合、デフォルト構文の後のステートメントが実行されます。

LINE-0413　正六角形の中に内接する正六角形を描くプログラムです。参考書籍を基にBasicプログラムをプロセシング用にリライトしました。

参考

パソコンによる作図の基礎　著者：福永節夫、柴田　優、千葉睦朗、長江貞彦　発行日：昭和６２年１月１０日　初版発行　発行所：焙風館

//==================六角形を徐々に小さく==========
size(400, 400);
translate(200, 200); //原点を移動
scale(1, -1); // Y軸を上下反転
//==================初期設定==================
int num=24; //図形数
float dt=0; //移動角度
float th; //角度変換係数
float R = 180; //図形の中心から頂点までの長さ
float x; //X座標
float y; //Y座標
int c=255; //塗りつぶしカラー
int c1=0;
int c2=c/num;
//==================メイン==================
for (int i=1; i<=num; i++) { //図形数くり返す
  beginShape();
  for (th=dt; th<=TWO_PI+dt; th+=TWO_PI/6) {
    x=R*cos(th); //円の方程式
    y=R*sin(th);
    vertex(x, y);
  }
  fill(c-=c2, 200, c1+=c2) ;//塗りつぶしカラー
  endShape();
  dt=dt+PI/6; //移動角度を変化
  R=sqrt(3)/2*R; //次の一辺の長さ
}

//==================六角形を徐々に小さく==========

size(400, 400);

translate(200, 200); //原点を移動

scale(1, -1); // Y軸を上下反転

//==================初期設定==================

int num=24; //図形数

float dt=0; //移動角度

float th; //角度変換係数

float R = 180; //図形の中心から頂点までの長さ

float x; //X座標

float y; //Y座標

int c=255; //塗りつぶしカラー

int c1=0;

int c2=c/num;

//==================メイン==================

for (int i=1; i<=num; i++) { //図形数くり返す

beginShape();

for (th=dt; th<=TWO_PI+dt; th+=TWO_PI/6) {

x=R*cos(th); //円の方程式

y=R*sin(th);

vertex(x, y);

}

fill(c-=c2, 200, c1+=c2) ;//塗りつぶしカラー

endShape();

dt=dt+PI/6; //移動角度を変化

R=sqrt(3)/2*R; //次の一辺の長さ

}

正六角形は正三角形の集まりなので、一辺がR（右図緑の線）とすると正三角形の高さは公式により√３/2*R（青の線）となり、次の正三角形の一辺Rとなる。これを角度をずらして繰り返していくことになります。

塗りつぶし色を設定

色の設定には何種類かの方法があります。デフォルトではfill(R,G,B)です。

構文	fill(rgb)	rgb（int）16進法の色値　例）#ff0000
	fill(rgb, alpha)	alpha（float）不透明度
	fill(gray)	gray 白から黒の間の値　デフォルトの最大値は 255
	fill(gray, alpha)	白から黒の間の値、不透明度　数値はカラーモードの最大値の指定による
	fill(v1, v2, v3)	v1, v2, v3(float)はカラーモードが RGBの場合；R（赤）,G（緑）,B（青） HSBの場合；H（色相）,S（彩度）,B（明度）になる　数値はカラーモードの最大値の指定による
	fill(v1, v2, v3, alpha)	上記+不透明度
戻り値	void	なし

LINE-0414　多角形に内接する多角形を描いてみましょう。参考書籍を基にBasicプログラムをプロセシング用にリライトしました。線の描画にはline()を使用していますので、多角形に色は付けられません。vertex()を使っても同様です。プログラムを変えない限りできません。線に色は付けられます。

参考

数式によるパソコン・グラフィックスのテクニック　著者：依田　谺　発行日：昭和６１年８月１日　初版発行発行所：一橋出版株式会社

//==================多角形に内接する多角形========
size(400, 400);
translate(200, 200); //原点を移動
scale(1, -1); // Y軸を上下反転
//==================初期設定==================
int N=4; //多角形の角数
float M=radians(2); //傾き角度
int T=80; //多角形の数
float R = 180; //図形の中心から頂点までの長さ
float x, x2; //X座標
float y, y2; //Y座標
float P1=TWO_PI/N; //多角形の一つの角度
float th=0; //多角形の角度
//内接多角形の相似比
float S=PI*(N-2)/N;
float A=S/2;
float B=PI-A-M;
Float K=sin(A)/sin(B); 
//==================メイン==================
for (float j=1; j<=T; j++) {//T回繰り返す
  x2=R*cos(th);
  y2=-R*sin(th);
  // 内接多角形の描画
  for (float i=0; i<=TWO_PI; i+=P1) {
    stroke(255-i*40,0,0+i*40); //線の色
    println(i*40);
    x=R*cos(i+th);
    y=-R*sin(i+th);
    line(x, y, x2, y2);
    x2=x;
    y2=y;
  }
  //内接多角形の大きさと内接角度を変える
  R=R*K;
  th=th+M;
}

//==================多角形に内接する多角形========

size(400, 400);

translate(200, 200); //原点を移動

scale(1, -1); // Y軸を上下反転

//==================初期設定==================

int N=4; //多角形の角数

float M=radians(2); //傾き角度

int T=80; //多角形の数

float R = 180; //図形の中心から頂点までの長さ

float x, x2; //X座標

float y, y2; //Y座標

float P1=TWO_PI/N; //多角形の一つの角度

float th=0; //多角形の角度

//内接多角形の相似比

float S=PI*(N-2)/N;

float A=S/2;

float B=PI-A-M;

Float K=sin(A)/sin(B);

//==================メイン==================

for (float j=1; j<=T; j++) {//T回繰り返す

x2=R*cos(th);

y2=-R*sin(th);

// 内接多角形の描画

for (float i=0; i<=TWO_PI; i+=P1) {

stroke(255-i*40,0,0+i*40); //線の色

println(i*40);

x=R*cos(i+th);

y=-R*sin(i+th);

line(x, y, x2, y2);

x2=x;

y2=y;

}

//内接多角形の大きさと内接角度を変える

R=R*K;

th=th+M;

}

やってみよう　多角形の角数 N、傾き角度 M、多角形の数 Tを色々変えてみよう

背景色を設定

背景色の設定には何種類かの方法があります。

構文	background(rgb)	rgb（int）16進法の色値　例）#ff0000
	background(rgb, alpha)	alpha（float）不透明度
	background(gray)	gray (float) 白から黒の間の値　デフォルトの最大値は 255
	background(gray, alpha)	白から黒の間の値、不透明度　数値はカラーモードの最大値の指定による
	background(v1, v2, v3)	v1, v2, v3(float)はカラーモードが RGBの場合；R（赤）,G（緑）,B（青） HSBの場合；H（色相）,S（彩度）,B（明度）になる　数値はカラーモードの最大値の指定による
	background(v1, v2, v3, alpha)	上記+不透明度
	background(image)	(PImage) 背景として設定するP画像（スケッチウィンドウと同じサイズである必要があります）
戻り値	void	なし