タグ: 星形
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)
*****
実は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で正五角形、五芒星!
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
正五角形の場合は set samples 6 とすればいいから、それと始点を(0,1)にするためtの範囲を[pi/2:pi/2+2*pi]にして
五芒星の場合はtの範囲を[pi/2:pi/2+2*pi*2] にして
オオーw(*゚o゚*)w
CaRMetalで超簡単に正五角形・五芒星を描く方法
正五角形、星形(五芒星)の描き方
円から描き始める方法とと正方形(三角形)から描き始める方法があります。
プログラミングしやすいのは円上の一点をA、それを円の中心の周りに72°回転した点をB、2×72°回転した点をC、3×72°回転した点をD、4×72°回転した点をEとして、ABCDEAの順に線を引いたものが正五角形で、ACEBDAの順に線を引けば星形(五芒星)になる。
HTML5 Canvasで正五角形、星形(3)flydrawの書き方に合わせる
ありゃ?テキストの位置指定。。。(^^ゞ
他の方法は例えば
正五角形の書き方:
の図をプログラム化すればいいんだが。。。
これがなかなか面倒である。
HTML5 Canvasの場合、円は中心の座標と半径を指定して描きます。
描き方1の場合
円1をとりあえず、原点中心・半径1の円とすると
円の中心を通る直線(線分)の端点の座標は\( (-1,0),(0,1) \)
円2は\( \displaystyle \text{中心} (-\frac{1}{2},0) \text{、半径} \frac{1}{2} \)、円3は\( \displaystyle \text{中心} ( \frac{1}{2},0) \text{、半径} \frac{1}{2} \)
円4の中心は\( (0,1) \)(y軸の向きが下向きだから)
半径は円3と円4の中心間の距離から円3の半径を引けばいいから\(\displaystyle \frac{-1+\sqrt{5}}{2} \)
そして、円4と円1の交点の座標とその交点間の距離を求めます。
面倒ですね。。。
数学が苦手な人はお手上げ状態になるかな?
まだ、3点の座標も求めなきゃだめだし、1単位のピクセル数も考慮し、あと平行移動しないと表示されないからなあ。。。苦手でなくても閉口してしまう。(;´Д`)
そこで、ツールを使います。私の場合はOSがUbuntu11.10なので、「CaRMetal」と「InkscapeのInk2canvas」です。
他に使えるのがあるかも知れませんが今はこれを使います。
CaRMetalでSVG出力して、Inkscapeでhtml保存。
プログラミングしやすいのは円上の一点をA、それを円の中心の周りに72°回転した点をB、2×72°回転した点をC、3×72°回転した点をD、4×72°回転した点をEとして、ABCDEAの順に線を引いたものが正五角形で、ACEBDAの順に線を引けば星形(五芒星)になる。
HTML5 Canvasで正五角形、星形(3)flydrawの書き方に合わせる
ありゃ?テキストの位置指定。。。(^^ゞ
他の方法は例えば
正五角形の書き方:
の図をプログラム化すればいいんだが。。。
これがなかなか面倒である。
HTML5 Canvasの場合、円は中心の座標と半径を指定して描きます。
描き方1の場合
円1をとりあえず、原点中心・半径1の円とすると
円の中心を通る直線(線分)の端点の座標は\( (-1,0),(0,1) \)
円2は\( \displaystyle \text{中心} (-\frac{1}{2},0) \text{、半径} \frac{1}{2} \)、円3は\( \displaystyle \text{中心} ( \frac{1}{2},0) \text{、半径} \frac{1}{2} \)
円4の中心は\( (0,1) \)(y軸の向きが下向きだから)
半径は円3と円4の中心間の距離から円3の半径を引けばいいから\(\displaystyle \frac{-1+\sqrt{5}}{2} \)
そして、円4と円1の交点の座標とその交点間の距離を求めます。
面倒ですね。。。
数学が苦手な人はお手上げ状態になるかな?
まだ、3点の座標も求めなきゃだめだし、1単位のピクセル数も考慮し、あと平行移動しないと表示されないからなあ。。。苦手でなくても閉口してしまう。(;´Д`)
そこで、ツールを使います。私の場合はOSがUbuntu11.10なので、「CaRMetal」と「InkscapeのInk2canvas」です。
他に使えるのがあるかも知れませんが今はこれを使います。
CaRMetalでSVG出力して、Inkscapeでhtml保存。
半径1の円に内接する正五角形の一辺の長さをφで表せ。
ここでφ = \(\displaystyle \frac{1+\sqrt{5}}{2} \) (黄金比)とする。
正五角形の一辺に対する中心角は72°
よって、余弦定理より
\[\text{(正五角形の一辺)}^2=1+1-2\cos 72^\circ = 1+(1-\phi ^{-1})=1+(\phi ^{-1})^2\]
これを利用した作図法が
五角形 - Wikipedia:
ここに描かれている円の半径を1とする。OA=1=OD
(2)の図より
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}\)
(3)の図より
正五角形の一辺=DF=DE=\(\sqrt{\text{OD}^2+\text{OE}^2}\)=\(\sqrt{1+(\phi ^{-1})^2}\)
参考
黄金比 - Wikipedia:
正五角形の一辺に対する中心角は72°
よって、余弦定理より
\[\text{(正五角形の一辺)}^2=1+1-2\cos 72^\circ = 1+(1-\phi ^{-1})=1+(\phi ^{-1})^2\]
これを利用した作図法が
五角形 - Wikipedia:
ここに描かれている円の半径を1とする。OA=1=OD
(2)の図より
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}\)
(3)の図より
正五角形の一辺=DF=DE=\(\sqrt{\text{OD}^2+\text{OE}^2}\)=\(\sqrt{1+(\phi ^{-1})^2}\)
参考
黄金比 - Wikipedia:
「『コンパスと定規』を使って正五角形を描く」をイメージできるソフトは?
Canvasで正五角形、星形(3)flydrawの書き方に合わせる:
このときは、計算で頂点の座標を求めて、その点を結ぶことで正五角形・星形を描いたんですが。。。
こうではなく、たとえば\(\sqrt{5}\)を辺が2と1の直角三角形の斜辺になっていることがわかるような図になっている正五角形。。。
このときは、計算で頂点の座標を求めて、その点を結ぶことで正五角形・星形を描いたんですが。。。
こうではなく、たとえば\(\sqrt{5}\)を辺が2と1の直角三角形の斜辺になっていることがわかるような図になっている正五角形。。。
Canvasで正五角形、星形(3)flydrawの書き方に合わせる
いわにぃのブログ : flydraw:正五角形、星形の描き方(2)もっと簡単に?
フォントの種類が違うみたいだが。。。
これでいいか(* ̄∇ ̄*)エヘヘ
****スクリプトの部分
<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>
****
フォントの種類が違うみたいだが。。。
これでいいか(* ̄∇ ̄*)エヘヘ
****スクリプトの部分
<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>
****
Canvasで正五角形、星形(1)
いわにぃのブログ : flydraw:正五角形、星形の描き方(2)もっと簡単に?
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>
****
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>
****