次はTikZ？いえ、その前にGeoGebraで正五角形、五芒星！（１）

GeoGebra日本語で正五角形、五芒星を描くには？

GeoGebraでも媒介変数を使って円を描くことができるのですが。。。


オプションで数式を「定義」または「コマンド」にすると


これでは正多角形は描けません！

しかし、GeoGebraにはメニューに多角形、正多角形というのがあります。
コマンドはGeoGebra日本語なら、多角形[ ]で英語ならPolygon[ ]です。

まず、正多角形で正五角形を作図し、多角形でA→C→E→B→D→Aと指定すると


ｵｵｰw(*ﾟoﾟ*)w

でもなあ。。。
ここは復習もかねて、コンパスと定規を使ったイメージで描こう！？

タグ ：

#GeoGebra

#正五角形

#星形

#作図法

gnuplotのSVG

前記事の出力形式gifをsvgに変えただけ。
下図はインラインSVGなのでアンドロイド携帯の標準ブラウザでは見れません(^_^;)

このSVGは残念ながらInkscapeではHTML5 Canvasには変更できません。

タグ ：

#gnuplot

#正五角形

#星形

#作図法

#SVG

flydrawのようにgnuplotで正五角形、五芒星！

いわにぃのブログ : flydrawで超超簡単に五芒星！

実はflydrawもgnuplotのように対話でできるのです。(*￣∇￣*)ｴﾍﾍ
逆にgnuplotも上の記事でやったようにコマンドファイルを作成して目的のファイルを出力することができます。
（gnuplot < コマンドファイル > 出力ファイル　あるいは　cat コマンドファイル | gnuplot > 出力ファイル）




コマンドファイル
＊＊＊＊＊
# 出力形式
set terminal gif linewidth 2 size 300,300
# 正方形
set size square
# 境界なし
set noborder
# 目盛りなし
set notic
# 凡例なし
set nokey
# 媒介変数表示
set parametric
# 複数表示
set multiplot
#
set xrange [-1:1]
set yrange [-1:1]
# 円
set trange [pi/2:pi/2+2*pi]
set samples 100
plot cos(t),sin(t) with lines lc rgb "black"
# 正五角形
set samples 6
plot cos(t),sin(t)
# 五芒星
set trange [pi/2:pi/2+2*pi*2]
plot cos(t),sin(t)

＊＊＊＊＊

タグ ：

#gnuplot

#正五角形

#星形

#作図法

#flydraw

gnuplotで正五角形、五芒星！

gnuplot / parametric:



正五角形の場合は set samples 6 とすればいいから、それと始点を(0,1)にするためtの範囲を[pi/2:pi/2+2*pi]にして



五芒星の場合はtの範囲を[pi/2:pi/2+2*pi*2] にして


ｵｵｰw(*ﾟoﾟ*)w

タグ ：

#gnuplot

#正五角形

#星形

#作図法

CaRMetalで超簡単に正五角形・五芒星を描く方法

function定義でParametric functionを指定し、関数をx(t)=cos(x), y(t)=sin(t)、定義域Min:0,Max:360、Step:72とすればよい。



向きを変えたいならMInとMaxの値を変更すればよい。
たとえば、Min:90,Max:450とすれば



五角形の頂点を結べば五芒星


大きさを変更

あっ、適当に点を打ったから微妙にズレている(^_^;)

タグ ：

#黄金比

#正五角形

#星形

#作図法

正五角形、星形（五芒星）の描き方

円から描き始める方法とと正方形（三角形）から描き始める方法があります。
プログラミングしやすいのは円上の一点をA、それを円の中心の周りに７２°回転した点をB、２×７２°回転した点をC、３×７２°回転した点をD、４×７２°回転した点をEとして、ABCDEAの順に線を引いたものが正五角形で、ACEBDAの順に線を引けば星形（五芒星）になる。
HTML5 Canvasで正五角形、星形（３）flydrawの書き方に合わせる
ありゃ？テキストの位置指定。。。(^^ゞ

他の方法は例えば
正五角形の書き方:
の図をプログラム化すればいいんだが。。。
これがなかなか面倒である。
HTML5 Canvasの場合、円は中心の座標と半径を指定して描きます。

描き方１の場合
円１をとりあえず、原点中心・半径１の円とすると
円の中心を通る直線（線分）の端点の座標は\( (-1,0),(0,1) \)

円２は\( \displaystyle \text{中心} (-\frac{1}{2},0) \text{、半径} \frac{1}{2} \)、円３は\( \displaystyle \text{中心} ( \frac{1}{2},0) \text{、半径} \frac{1}{2} \)

円４の中心は\( (0,1) \)（y軸の向きが下向きだから）
半径は円３と円４の中心間の距離から円３の半径を引けばいいから\(\displaystyle \frac{-1+\sqrt{5}}{2} \)

そして、円４と円１の交点の座標とその交点間の距離を求めます。
面倒ですね。。。

数学が苦手な人はお手上げ状態になるかな？
まだ、３点の座標も求めなきゃだめだし、１単位のピクセル数も考慮し、あと平行移動しないと表示されないからなあ。。。苦手でなくても閉口してしまう。(；´Д｀)

そこで、ツールを使います。私の場合はOSがUbuntu11.10なので、「CaRMetal」と「InkscapeのInk2canvas」です。
他に使えるのがあるかも知れませんが今はこれを使います。

CaRMetalでSVG出力して、Inkscapeでhtml保存。

タグ ：

#黄金比

#正五角形

#星形

#作図法

半径1の円に内接する正五角形の一辺の長さをφで表せ。

ここでφ = \(\displaystyle \frac{1+\sqrt{5}}{2} \) （黄金比）とする。

正五角形の一辺に対する中心角は７２°
よって、余弦定理より
\[\text{(正五角形の一辺)}^2=1+1-2\cos 72^\circ = 1+(1-\phi ^{-1})=1+(\phi ^{-1})^2\]

これを利用した作図法が
五角形 - Wikipedia:

ここに描かれている円の半径を１とする。OA=1=OD

（２）の図より
OC=AC=\(\displaystyle \frac{1}{2}\),CD=CE=\(\displaystyle \frac{\sqrt{5}}{2}\)
AE=AC+CE=\(\displaystyle \frac{1+\sqrt{5}}{2}\)=\(\phi\)
OE=AE-AO=\(\phi - 1\)=\(\phi ^ {-1}\)=\(\displaystyle \frac{-1+\sqrt{5}}{2}\)

（３）の図より
正五角形の一辺=DF=DE=\(\sqrt{\text{OD}^2+\text{OE}^2}\)=\(\sqrt{1+(\phi ^{-1})^2}\)

参考
黄金比 - Wikipedia:

タグ ：

#黄金比

#正五角形

#星形

#作図法

「『コンパスと定規』を使って正五角形を描く」をイメージできるソフトは？

Canvasで正五角形、星形（３）flydrawの書き方に合わせる:
このときは、計算で頂点の座標を求めて、その点を結ぶことで正五角形・星形を描いたんですが。。。

こうではなく、たとえば\(\sqrt{5}\)を辺が２と１の直角三角形の斜辺になっていることがわかるような図になっている正五角形。。。

タグ ：

#正五角形

#星形

#コンパスと定規

Canvasで正五角形、星形（３）flydrawの書き方に合わせる

いわにぃのブログ : flydraw：正五角形、星形の描き方（２）もっと簡単に？

フォントの種類が違うみたいだが。。。
これでいいか(*￣∇￣*)ｴﾍﾍ
＊＊＊＊スクリプトの部分
<script>
<!--
  var canvas = document.getElementById('id11090703');
  var ctx = canvas.getContext('2d');
// ここに描画コマンドを入れる
r=100;
x0=200;
y0=200;
a=(72/360)*2*Math.PI;
t1=(-90/360)*2*Math.PI;
t2=-1*a+t1;
t3=-2*a+t1;
t4=-3*a+t1;
t5=-4*a+t1;
x1=r*Math.cos(t1)+x0;
y1=r*Math.sin(t1)+y0;
x2=r*Math.cos(t2)+x0;
y2=r*Math.sin(t2)+y0;
x3=r*Math.cos(t3)+x0;
y3=r*Math.sin(t3)+y0;
x4=r*Math.cos(t4)+x0;
y4=r*Math.sin(t4)+y0;
x5=r*Math.cos(t5)+x0;
y5=r*Math.sin(t5)+y0;

ctx.font = "14px 'Times New Roman'";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("A",x1,y1-15);
ctx.fillText("B",x2-10,y2-5);
ctx.fillText("C",x3-5,y3);
ctx.fillText("D",x4,y4);
ctx.fillText("E",x5+5,y5-5);

  ctx.beginPath();
// 正五角形
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineTo(x3, y3);
  ctx.lineTo(x4, y4);
  ctx.lineTo(x5, y5);
  ctx.lineTo(x1, y1);
// 星形
  ctx.moveTo(x1, y1);
  ctx.lineTo(x3, y3);
  ctx.lineTo(x5, y5);
  ctx.lineTo(x2, y2);
  ctx.lineTo(x4, y4);
  ctx.lineTo(x1, y1);
  ctx.stroke();
// ここまで

// -->
</script>
＊＊＊＊

タグ ：

#Cabvas

#正五角形

#星形

#flydraw

Canvasで正五角形、星形（１）

いわにぃのブログ : flydraw：正五角形、星形の描き方（２）もっと簡単に？

Canvasの使い方 - Canvas - HTML5.JP:

\[
\cos \frac{ \pi}{5} = \sin \frac{3 \pi}{10} = \frac{1+\sqrt{5}}{4}
\]
\[
\sin \frac{ \pi}{5} = \cos \frac{3 \pi}{10} = \frac{\sqrt{10-2 \sqrt{5}}}{4}
\]
\[
\cos \frac{2 \pi}{5} = \sin \frac{\pi}{10} = \frac{-1+\sqrt{5}}{4}
\]
\[
\sin \frac{2 \pi}{5} = \cos \frac{\pi}{10} = \frac{\sqrt{10+2 \sqrt{5}}}{4}
\]

＊＊＊＊スクリプト部分
<script>
<!--
  var canvas = document.getElementById('id11090701');
  var ctx = canvas.getContext('2d');
// ここに描画コマンドを入れる
  ctx.beginPath();
// 正五角形
x0=200;
y0=100;
  ctx.moveTo(x0, y0);
x1=200-100*(Math.sqrt(10+2*Math.sqrt(5))/4);
y1=200-100*((-1+Math.sqrt(5))/4);
  ctx.lineTo(x1, y1);
x2=200-100*(Math.sqrt(10-2*Math.sqrt(5))/4);
y2=200+100*((1+Math.sqrt(5))/4);
  ctx.lineTo(x2, y2);
x3=200+100*(Math.sqrt(10-2*Math.sqrt(5))/4);
y3=200+100*((1+Math.sqrt(5))/4);
  ctx.lineTo(x3, y3);
x4=200+100*(Math.sqrt(10+2*Math.sqrt(5))/4);
y4=200-100*((-1+Math.sqrt(5))/4);
  ctx.lineTo(x4, y4);
  ctx.lineTo(x0, y0);
// 星形
//  ctx.moveTo(x0, y0);
  ctx.lineTo(x2, y2);
  ctx.lineTo(x4, y4);
  ctx.lineTo(x1, y1);
  ctx.lineTo(x3, y3);
  ctx.lineTo(x0, y0);
  ctx.stroke();
// ここまで

// -->
</script>

＊＊＊＊

タグ ：

#Cabvas

#正五角形

#星形