【プログラミング】Processing#5 -図形描画編Part4-

どうもこんにちは、Tearlです。

今回も、図形の描画について書いていこうと思います。

今回は、
・円弧
・角度指定(PIなど)
・角度指定(ラジアン)
についてとなります。

前回のお話

前回は、三角形と円のお話をさせていただきました。
ざっくりとまとめると、

三角形
triangle(x1, y1, x2, y2, x3, y3); で描画できる
各頂点を指定することで描画できる

円
ellipse(x, y, x_size, y_size); で描画できる
描画したい中心点と縦横の直径を指定することで描画できる

となります。

それでは今回の内容に移っていきます。

円弧

まずは、半円だけの描画についてです。

円弧の描画
arc(x, y, x_size, y_size, start, end);

x = (円弧の中心の)横座標の位置
y = (円弧の中心の)縦座標の位置
x_size = (横の最大)直径
y_size = (縦の最大)直径
start = 円弧の描画を始める角度
end = 円弧の描画を終わる角度
円弧を描画するコードです。arc(アーク)と言います。
arcを日本語訳すると、「円弧」となりますので色々な完全な円じゃないものなどが描画できます。
では、座標 = (200,100)の位置に、x_size = 100,y_size = 100 で、start角度 = 0,end角度 = 半分の半円を描画するコードを下に書きます。

size(400, 200);
arc(200, 100, 100, 100, 0, PI);
/*
arc(x, y, x_size, y_size, start, end);
x      = (円弧の中心の)横座標の位置
y      = (円弧の中心の)縦座標の位置
x_size = (横の最大)直径
y_size = (縦の最大)直径
start  = 円弧の描画を始める角度
end    = 円弧の描画を終わる角度
円弧を描画するコードです。
*/

再生すると、

こんな感じの半円ができます。

さて、ここで謎のPIが出てきました。また、円弧の中にはきっちりした半円・1/4・3/4など以外もありますね。

ということで、角度の指定方法についてまとめていこうと思います。
sinやcosも存在するし指定できなくはないですが、こちらは計算の方で扱おうと思います。

角度指定(PIなど)

まず、PIなどについて解説していきます。
こちらはProcessingがよく使うであろう角度に名前をつけてくれたものだと考えて良いと思います。
まずは、下の図を見てください。

こんな感じです。数学などでは0から上を通って180、360と来ますが、Processingは0から下を通ってのようです。間違いそうですよね...気をつけないといけません...
解説をいたしますと、

HALF_PI = 1/4(90度)
PI = 1/2(180度)
TWO_PI = 360度
そして、
QUARTER_PI = 1/8(45度)
があります。
startからendまで決まった角度であれば表せるということですね。便利
なのでいろんな円弧を描画したコードと再生した図を記しておきます。(解説は特にいたしません)

size(1000, 200);
//下からの円
arc(50, 100, 50, 50, 0, QUARTER_PI);
arc(125, 100, 50, 50, 0, HALF_PI);
arc(200, 100, 50, 50, 0, PI);
arc(275, 100, 50, 50, 0, PI + HALF_PI);
arc(350, 100, 50, 50, 0, TWO_PI);
//上から
arc(425, 100, 50, 50, HALF_PI, TWO_PI);
arc(500, 100, 50, 50, PI, TWO_PI);
arc(575, 100, 50, 50, PI + HALF_PI, TWO_PI);
arc(650, 100, 50, 50, PI + HALF_PI + QUARTER_PI, TWO_PI);
/*
QUARTER_PI = 45度 (1/8)
HALF_PI    = 90度 (1/4)
PI         = 180度(1/2)
TWO_PI     = 360度
*/

再生すると、

こんな感じでいっぱい円弧ができます。

角度指定(ラジアン)

続いて、ラジアンでの指定方法です。
radians(ラジアン)は度を数値にしたものになります。数学で出てくる(rad)弧度法がこれですね。
では、ラジアンでの指定方法について書いていきます。

ラジアンの指定
radians(n)

n = 指定したい度数
早速指定して円弧を書いていきます。こちらもいろんな円弧を描画したコードと再生した図を記しておきます。(こちらも解説は特にいたしません)

size(1000, 200);
//下からの円
arc(50, 100, 50, 50, radians(0), radians(45));
arc(125, 100, 50, 50, radians(0), radians(90));
arc(200, 100, 50, 50, radians(0), radians(180));
arc(275, 100, 50, 50, radians(0), radians(270));
arc(350, 100, 50, 50, radians(0), radians(360));
//上から
arc(425, 100, 50, 50, radians(90), radians(360));
arc(500, 100, 50, 50, radians(180), radians(360));
arc(575, 100, 50, 50, radians(270), radians(360));
arc(650, 100, 50, 50, radians(315), radians(360));
/*
radians(n)
n = 指定したい度数
*/

再生すると、

PIなどと同じように表示できました。

ちなみに、おまけとして書きますと、
radians(弧度法) → degrees(度)がこのradiansになりますが逆の、
degrees → radiansも行うことができ、こちらは、

degrees(n)

n = 数値やPIなど
となります。こちらでも、角度のstartとendを指定できますので試すのも良いと思われます。

以上でProcessing -図形描画編Part4- は終了いたします。
次回は'線の角の形や太さ'についてを書けたらと思います。

最後まで、ご覧いただきありがとうございました。