processingで絵を描いてくると必ずと言っていいほど三角関数は出てきます。
僕は数学をまともに勉強してこなかったので、三角関数はprocessingで絵を描くときにぶつかる最初の壁でした。
今回は三角関数で円を描く方法を書いていきます。
■ellipse関数
processingで絵を描き始めたときはellipse関数を使って円を書いていました。
ellipse関数は以下の四つのパラメータを関数に指定すると、円を描いてくれる便利な関数です。
パラメータ
x : 円の中心x座標
y : 円の中心y座標
w: 円の横幅(直径)
h: 円の縦幅(直径)
ellipse(float x, float y, float w, float h);
以下はellipse関数を使用したソースコードです
void setup() {
size(500, 500);
background(255);
pixelDensity(displayDensity());
noFill();
stroke(0);
strokeWeight(2);
ellipse(width/2, height/2, 200, 200);
}
でもより複雑な絵を描いていこうとすると、ellipse関数だけでは難しいと思いますす。円の書き方を考えるとイメージしやすいと思います！
■円の考え方
皆さんは紙に円を描く時、どのように描きますか？
おそらく、線で円を描くと思います。これは線 で円を描く方法です。
次は点で円を描く方法です。
三角関数で円を描くのはこの点で描く方のイメージです！
でも厳密にはellipse関数も内部的に三角関数を使って円を描画していると思います。
プログラミングにおける関数のメリットとデメリットがここで明らかになっていますよね。
なんでも便利なものを使うと、物事の本質が見えなくなってしまう気がしました笑
■三角関数で円を描く
processingにおいて三角関数で円を描くときは「単位円」をイメージします。
単位円とは半径が1の円です。ちなみにθ（シータ）は角度が入ります。
なぜ単位円をイメージするかと言うと、半径が1なので円を大きくしたい時に
値を掛け合わせればどれだけでも拡張できるからです！！
例えば、半径50の円を作りたい時は50を掛け合わせる。
下記の点Pを連続して打っていくと、点で円を描くことができます。
円を描くときは、連続する点Pのx,y座標が分からないといけません。
それではx,y座標の求め方を説明します。
x,y座標を求めるときは三角関数のsin,cosを使用します。
直角三角形において、下記のような定理が成り立ちます。
単位円で考えてみると、cは円の半径に対応するのでOPとなりc=1になりますね。
残ったのがbとcですが、bは単位円のPQ、a単位円のOQになりますね。
上記のことから、次のことがわかります。
x座標はcosθ、y座標はsinθで求めることができる。
なぜかと言うと、単位円で下記の公式を使うと分かります。
cosθ= OQ/OP
= OQ/1
= OQ
sinθ = PQ/OP
= PQ/1
= PQ
上記の式を計算すると、cosθ = x座標、sinθ = y座標ということがわかります。
単位円の点Pのx,y座標の求め方を理解したら、processingのsin関数とcos関数を使って
x,y座標を求めていきましょう。
以下のsin関数とcos関数は、単位円におけるsinθ,cosθの値を返します。
パラメータ
i:角度の値 ※ここでは角度は度数法ではなく弧度法を使用します。
sin(i);
cos(i);sin関数とcos関数の戻り値をpoint関数の引数として2πラジアン分プロットすれば
点で円を描けます。
以下のソースコードが500×500pxのスケッチの中心座標に半径200pxの円を点で描画した
ものになります。
size(500,500);
background(255);
pixelDensity(displayDensity());
for(int i = 0;i<360;i++){
//cos関数
float cosx = width/2+200*cos(radians(i));
//sin関数
float siny = height/2+200*sin(radians(i));
stroke(0);
strokeWeight(2);
point(cosx,siny);
}
先ほどのソースコードのpoint関数の部分を下記に変更してみてください。
1行変更するだけでも印象がとても変わります！
line(cosx, siny, width/2, height/2);
以上が三角関数で円を描く方法です。
processingの作品制作で三角関数を使いたい方の助けになれば嬉しいです。
最後までブログを読んでいただき、ありがとうございました。
Comments