脳卒中左片麻痺になりました

twitter http://twitter.com/#!/ti5942

タグ: 黄金比

いわにぃのブログ : CaRMetalで超簡単に正五角形・五芒星を描く方法

まずは、上の点を動かしてみるとなんとその点はLine上しか動かない!(つд⊂)ゴシゴシ
screenshot1screenshot2

なるほど、こんな仕組か。。。
実は、点の位置がズレてたのはただ単に正五角形が小さくて頂点に重ねたつもりがうまくいかなかったと思っていたからだ。(^_^;)

これは、ラクだなと思いながら、ズレを解消していったのだが。。。ひとつの頂点だけが運悪くLine上に乗ってなかった。
screenshot1
この点をLine上の点に変更する方法がわからなかったので、打ち直し。
screenshot1

今度は運まかせで打つわけにはいけない!どうすればいいのだろう?
「Intersection」かな?と思い、試してみたがダメだった。。。頂点(2つの線分の共通端点)は交点にはならないみたいだ。
点を打つのは左クリックなのだが、左ボタンを押しながらどうしようか悩んでしまった。
どうしようかと左ボタンを押しながら、マウスカーソル動かしてみると、なんとオオーw(*゚o゚*)w
カーソルがLine上に乗ったときLineの色が変わり、点のマークが出るではないか!

ということで、うまくいきました!ヾ(=^▽^=)ノ
screenshot1

v( ̄∇ ̄)v

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

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

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

大きさを変更
screenshot1


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


正五角形の書き方:

screenshot1

注意1.Ink2canvasのsvg.pyの388行目text = self.text_helper(tspan).strip()に修正しています。
注意2.CaRMetalのSVG出力でtext部が2重に出力されてます(たぶんバグ)

screenshot1

文字を描画させるには多少手を加えないといけません!
tspanにしないと文字を描画しないので以下のようにSVGのソースを変更します。
2重でも問題ないのですが、ついでだからこれも修正。
screenshot1screenshot1



コメントが入っているとHTML5形式での保存は失敗します(`□´)コラッ!
screenshot1screenshot2



これでOK!オオーw(*゚o゚*)w
【インラインSVG】


OAMNBECD

【HTML5 Canvas】



正五角形の書き方:

screenshot1screenshot2

【インラインSVG】

【HTML5 Canvas】


正五角形の書き方:
screenshot1screenshot1

【インラインSVG】アンドロイド携帯ではFirefoxのみ対応


【HTML5 Canvas】


円から描き始める方法とと正方形(三角形)から描き始める方法があります。
プログラミングしやすいのは円上の一点を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保存。


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

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

これを利用した作図法が
五角形 - Wikipedia:
screenshot1
ここに描かれている円の半径を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:



この問題なら答えはひとつだな。
もちろん、線分を横に引くなら左側が長くても右側が長くてもどちらも正解!

前記事の問題ならどうだろう?

いや答えはひとつなんだが、点Aを端にもつ線分が長い場合と短い場合の2通りを示さないと×になるのではないか?
いやいや、やっぱり点Aがあるほうを長くしなきゃダメだな。
まあ、線分ABはどこを向いててもいいと思うけど。



黄金比 - Wikipedia:
screenshot1

矛盾しているところ
*****
黄金比(おうごんひ、英語: golden ratio)は、
線分を a, b の長さで 2 つに分割するときに、a : b = b : (a + b) が成り立つように分割したときの比 a : b のことであり、最も美しい比とされる。
*****
*****
黄金比は中末比(ちゅうまつひ)や外中比(がいちゅうひ)とも呼ばれる。a : b = b : (a + b) が成り立つとき、a末項(まっこう)、b中項(ちゅうこう)という。
*****

このページのトップヘ