楕円や半円
楕円や半円を描いてみましょう。
こちらも、要領がわかればとても簡単です。
楕円を描く
楕円を描く命令は以下のとおりです。
ellipse(x座標, y座標, 横幅, 高さ);
円を描く命令と殆ど同じです。楕円なだけに、"横幅"と、"高さ"を指定する事ができます。
// 省略
function draw() {
background(33);// グレーで塗りつぶします
ellipse(300, 300, 200, 100);// 楕円を描きます
}
楕円は簡単ですね!!
半円を描く
半円は少し難しくなります。
楕円の命令に似ていますが、更に2つ、"開始角度"と"終了角度"が必要になります。
こちらの開始角度、終了角度は、弧度法(ラジアン)を使います。(0 ~ 3.14とかいうアレですw)
arc(x座標, y座標, 横幅, 高さ, 開始角度, 終了角度);
弧度法(ラジアン)のままだと、ちょっと理解しづらいですよね。
度数法(デグリー)に変更しておくと扱いやすくなります。
"setup関数"の中で、下記のコードを実行しておきましょう。
angleMode(DEGREE);// 度数法に変更する
こうする事で、角度の概念が"0度 ~ 360度"の様に親しみやすいルールに変更されます。
実際に使ってみましょう。
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
angleMode(DEGREES);// 度数法に変更する
}
function draw() {
background(33);// グレーで塗りつぶします
noFill();// 塗りを透明
stroke(255);// 線の色
strokeWeight(5);// 線の太さ
arc(500, 200, 200, 200, 0, 180);// 0度から180度の半円
}
下方向に半円を描く事ができました。
開始角度と終了角度を変更してみて、色々試してみましょう。
