01　円を描いてみようー円の基本

円を描く5つのスタイル

プロセシングには円が描ける構文が5つあります。circle()、ellipse()、arc()、verex()、point()です。それぞれ特徴があり、circle()は真円のみ、ellipse()は楕円（長円）を描き、幅と高さを同じにすると円になります。（円は楕円の一種）arc()は円弧を描きます。幅と高さを同じにし、開始角度0と終了角度TWO_PI、モードをOPENにすれば円となります。verex()は頂点同士を結ぶ多角形の角を細かくすれば擬似的に円となります。最後にpoint()は本来点を描くものですが、線幅を大きくすれば円となります。境界線自体を大きくしているので、他の円のように塗りつぶし＋境界線の表現はできません。

真円を描く

CIRCLE-0100　circle()で真円を描きます。円の中心位置と直径を決めます。

//===========================================
// circle()で真円を描く
//===========================================
// CreationDate: 2025年2月4日 火曜日16:54:50
//=================【環境設定】================
size(400, 400); //負画面サイズ
// 直交座標を描く
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(200, 200); //原点を移動
//=================【初期設定】================
stroke(0); //円の線色
//==================メイン====================
circle(0, 0, 280);

//===========================================

// circle()で真円を描く

//===========================================

// CreationDate: 2025年2月4日火曜日16:54:50

//=================【環境設定】================

size(400, 400); //負画面サイズ

// 直交座標を描く

stroke(128);

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

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

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

//=================【初期設定】================

stroke(0); //円の線色

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

circle(0, 0, 280);

真円を描く

構文	circlr(x, y, extent)	x,yの位置に直径 extentの真円を描く。
パラメータ	x,	(float)　円の中心のX座標
	y	(float)　円の中心のY座標
	extent	(float)　デフォルトで円の直径 (extent: 範囲)
戻り値	void	なし

ellipse()で円を描く

CIRCLE-0101　ellipse()で円を描きます。中心座標x,yと幅、高さを設定します。作図は上記と同じになるので省略します。

//===========================================
// ellipse()で円を描く
//===========================================
// CreationDate: 2025年2月4日 火曜日17:19:15
//=================【環境設定】================
size(400, 400); //負画面サイズ
// 直交座標を描く
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(200, 200); //原点を移動
//=================【初期設定】================
stroke(0); //円の線色
//==================メイン====================
ellipse(0,0,280,280); //円を描く

//===========================================

// ellipse()で円を描く

//===========================================

// CreationDate: 2025年2月4日火曜日17:19:15

//=================【環境設定】================

size(400, 400); //負画面サイズ

// 直交座標を描く

stroke(128);

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

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

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

//=================【初期設定】================

stroke(0); //円の線色

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

ellipse(0,0,280,280); //円を描く

楕円を描く

構文	ellipse(x, y, w, h)	x,yを中心に幅w、高さhの楕円を描きます。中心場所はellipseMode()で変更可能です。
パラメータ	x	(float)　楕円の中心のX座標　または左上のX座標
	y	(float)　楕円の中心のY座標　または左上のY座標
	w	(float)　デフォルトで楕円の幅　または右下のX座標
	h	(float)　デフォルト楕円の高さ　または右下のY座標
戻り値	void	なし

ellipseMode()について

ellipseMode()はellipse()に与えられたパラメータの解釈を変更して円や楕円が描画される場所、大きさなどを変更します。ellipseMode(CENTER)はデフォルトで通常のellipse()のパラメータと同じです。

ellipseMode(RADIUS)の中心座標はセンターで、幅と高さを半径で指定します。幅と高さは通常の2倍となります。

※ 一部のみ掲載
//==================メイン====================
ellipseMode(RADIUS); //w,hを半径とする
fill(255,0,0); //赤
ellipse(0,0,180,100); //円を描く
ellipseMode(CENTER); //デフォルト
fill(255);
ellipse(0,0,180,100); //円を描く

※ 一部のみ掲載

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

ellipseMode(RADIUS); //w,hを半径とする

fill(255,0,0); //赤

ellipse(0,0,180,100); //円を描く

ellipseMode(CENTER); //デフォルト

fill(255);

ellipse(0,0,180,100); //円を描く

ellipseMode(CORNER)は中心座標を図形の左上隅にします。幅と高さは通常通りです。

※一部のみ掲載
//==================メイン====================
ellipseMode(CENTER); //デフォルト
fill(255);
ellipse(0,0,180,100); //円を描く
ellipseMode(CORNER); //場所を左上隅に移動
fill(255,0,0);
ellipse(0,0,180,100); //円を描く

※一部のみ掲載

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

ellipseMode(CENTER); //デフォルト

fill(255);

ellipse(0,0,180,100); //円を描く

ellipseMode(CORNER); //場所を左上隅に移動

fill(255,0,0);

ellipse(0,0,180,100); //円を描く

ellipseMode(CORNERS)は中心座標を楕円の境界ボックスの1つの角の位置にします。幅と高さは反対側の角の位置と解釈します。

※一部のみ掲載
//==================メイン====================
ellipseMode(CENTER); //デフォルト
fill(255);
ellipse(0,0,180,100); //楕円を描く
ellipseMode(CORNERS); //場所を左上隅に移動
fill(255,0,0);
ellipse(0,0,180,100); //楕円を描く

※一部のみ掲載

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

ellipseMode(CENTER); //デフォルト

fill(255);

ellipse(0,0,180,100); //楕円を描く

ellipseMode(CORNERS); //場所を左上隅に移動

fill(255,0,0);

ellipse(0,0,180,100); //楕円を描く

arc()で円を描く

CIRCLE-0103　arc()で円を描きます。x, yで中心位置、w, hで円弧の大きさ、start, stopで円弧の開始と終了角度をラジアンで指定します。この場合は0〜TWO_PI（360度）で円になります。

※一部のみ掲載します
//==================メイン====================
arc(0,0,280,280,0,TWO_PI); //円弧を描く

※一部のみ掲載します

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

arc(0,0,280,280,0,TWO_PI); //円弧を描く

円弧を描く

構文	arc(x, y, w, h, start, stop) arc(x, y, w, h,start, stop, mode)	x,y位置にw,hの大きさでstart角からstop角まで円弧を描きます。X軸プラス方向を０度とし、時計回りに弧を描きます。
パラメータ	x	(float)　円弧の楕円のx座標
	y	(float)　円弧の楕円のy座標
	w	(float)　デフォルトで円弧の楕円の幅
	h	(float)　デフォルトで円弧の楕円の高さ
	start	(float)　ラジアンで指定された円弧を開始する角度
	stop	(float)　ラジアンで指定された円弧を終了する角度
	mode	(int)　PIE、OPEN、およびCHORD
戻り値		void

終了角度を変えて円弧を描いています。分かりやすいように色を付けています。

//===========================================
// 　円弧
//===========================================
// CreationDate:2025年2月5日 水曜日18:26:41
//=================【環境設定】================
size(400, 400); //負画面サイズ
translate(200, 200); //原点を移動
//==================メイン====================
fill(#D888C0); //塗りつぶし色
arc(0, 0, 300, 300, 0, TWO_PI); //　0〜2π
fill(#76A6D8);
arc(0, 0, 250, 250, 0, PI+HALF_PI); //　0〜π+1/２π
  fill(#84CB98);
arc(0, 0, 200, 200, 0, PI); //　0〜π
  fill(#F0B16D);
arc(0, 0, 150, 150, 0, HALF_PI); //　0〜1/２π
  fill(#EAEA85);
arc(0, 0, 100, 100, 0, QUARTER_PI); //　0〜1/4π

//===========================================

// 　円弧

//===========================================

// CreationDate:2025年2月5日水曜日18:26:41

//=================【環境設定】================

size(400, 400); //負画面サイズ

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

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

fill(#D888C0); //塗りつぶし色

arc(0, 0, 300, 300, 0, TWO_PI); //　0〜2π

fill(#76A6D8);

arc(0, 0, 250, 250, 0, PI+HALF_PI); //　0〜π+1/２π

fill(#84CB98);

arc(0, 0, 200, 200, 0, PI); //　0〜π

fill(#F0B16D);

arc(0, 0, 150, 150, 0, HALF_PI); //　0〜1/２π

fill(#EAEA85);

arc(0, 0, 100, 100, 0, QUARTER_PI); //　0〜1/4π

モードをOPENにします。開始点と終了点が繋がり、境界線が描かれません。

※一部掲載
//==================メイン====================
fill(#76A6D8);
arc(0, 0, 300, 300, 0, PI+QUARTER_PI,OPEN);

※一部掲載

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

fill(#76A6D8);

arc(0, 0, 300, 300, 0, PI+QUARTER_PI,OPEN);

モードをCHORD（弦）にします。開始点と終了点が繋がり、境界線が描かれます。

※一部掲載
//==================メイン====================
fill(#76A6D8);
arc(0, 0, 300, 300, 0, PI+QUARTER_PI,CHORD);

※一部掲載

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

fill(#76A6D8);

arc(0, 0, 300, 300, 0, PI+QUARTER_PI,CHORD);

モードをPIEにします。開始点と終了点は中心点と繋がり、境界線が描かれます。

※一部掲載
//==================メイン====================
fill(#76A6D8);
arc(0, 0, 300, 300, 0, PI+QUARTER_PI,PIE);

※一部掲載

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

fill(#76A6D8);

arc(0, 0, 300, 300, 0, PI+QUARTER_PI,PIE);

モードを指定しない場合は開始点と終了点は中心点と繋がり、境界線が描かれません。

※一部掲載
//==================メイン====================
fill(#76A6D8);
arc(0, 0, 300, 300, 0, PI+QUARTER_PI);

※一部掲載

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

fill(#76A6D8);

arc(0, 0, 300, 300, 0, PI+QUARTER_PI);

verrex()で円を描く

CIRCLE-0104　vertex()は頂点と頂点を結ぶものですが、円の方程式を使い細かく結ぶことで円に近くなります。作例では多角形の数を100としています。

//===========================================
// vertexによる擬似円
//===========================================
// CreationDate: 2025年2月6日 木曜日13:15:15
//=================【環境設定】================
size(400, 400); //負画面サイズ
translate(200, 200); //原点を移動
scale(1, -1); // Y軸を上下反転（上をマイナスに）
//background(255); //背景を白
//=================【初期設定】================
stroke(0); //線色
int r=180; //　円の半径
int pnum =100; // 多角形の角数
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);//シェイプを終了
save("vertex-en.png");

//===========================================

// vertexによる擬似円

//===========================================

// CreationDate: 2025年2月6日木曜日13:15:15

//=================【環境設定】================

size(400, 400); //負画面サイズ

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

scale(1, -1); // Y軸を上下反転（上をマイナスに）

//background(255); //背景を白

//=================【初期設定】================

stroke(0); //線色

int r=180; //　円の半径

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

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);//シェイプを終了

save("vertex-en.png");

CIRCLE-0105　最後にpoint()で円を描いてみましょう。線幅で円の大きさを設定します。

//===========================================
// point()で円を描く
//===========================================
// CreationDate:　2025年2月9日 日曜日16:24:17
//=================【環境設定】================
size(400, 400); //画面サイズ
// 直交座標を描く
stroke(128);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
translate(200, 200); //原点を移動
//=================【初期設定】================
strokeWeight(300); //線幅
stroke(175,145,115); //線色
//==================メイン====================
point(0,0);