質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

3175閲覧

算数(五角形の計算)について教えてください。

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/09/15 05:02

編集2015/09/15 05:50

初歩的な質問で大変恐縮ですが、五角形の計算式について教えてください。

cssのtransformで五角形を作ろうと考えております。

5つ面を作り、回転をかけて五角形にしようと考えております。

Javascriptでウインドウの高さを求め、その高さを1辺の長さにして五角形を作ろうと考えております。

1辺の長さはウインドウの高さにより、変動するので、A・B・C・Dのそれぞれの線の長さを計算式で求めたいです。

イメージ説明

添付した図にあるA・B・C・Dの長さを求めたいです。

それぞれどのような計算式になるのでしょうか?

Javascriptやcssの記述の仕方はわかりますので、計算式だけでも教えてください。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

円の中心をO、全体を座標平面とみなして横軸をx軸、縦軸をy軸と呼ぶことにします。
また、一辺の長さをSと置きます。

Oの周りを点線で5等分しているので、1区画は72度に分割されています。
線Aと中心Oが作る三角形の鋭角は1区画をy軸で半分にしたものなので、36度です。

点線と五角形の辺は直角に交わっており、y軸と点線と五角形の辺で直角三角形を作っています。
点線と五角形の1辺の半分で直角を作っており、点線の長さは以下の式で求められます。

点線の長さ = S ÷ 2 × tan(180 - 90 - 36)° = S ÷ 2 × tan54°

線AとOが作る三角形、線BとOが作る三角形も直角三角形になっており、今度の斜辺は点線です。
よって、それぞれの長さは以下の様に求められます。

Aの長さ = 点線の長さ × sin36° Bの長さ = 点線の長さ × cos36°

同様に、線C・線Dも中心Oとの間で直角三角形を作っており、斜辺が同じく点線です。
線Cと中心Oが作る三角形の鋭角はx軸とy軸が作る90度から1区画分(72度)を引いたものなので、18度だと判ります。

よって、長さはそれぞれ以下の式で求められます。

Cの長さ = 点線の長さ × sin18° Dの長さ = 点線の長さ × cos18°

後は、各sin、cos、tanの値を調べるか計算するかして、順に式に当てはめていけば長さが求められると思います。

投稿2015/09/15 06:05

編集2015/09/15 06:24
hy3

総合スコア594

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/09/15 06:21

おお!まだ計算できてませんが、長さを求められそうですね!! 今は試す時間がないので、後で計算します。 取り急ぎ、お礼申し上げます。
退会済みユーザー

退会済みユーザー

2015/09/15 08:41 編集

親切丁寧な回答のお陰で、計算して各線の長さを求めることができました。 sin、cos、tanに関しては、「高精度計算サイト(http://keisan.casio.jp/exec/system/1260261251)」で値を取得しました。 それぞれ下記のような計算式で求めることができました。 本当にありがとうございましたm(__)m 【点の長さ】 点線の長さ = S ÷ 2 × tan54° S / 2 * 1.3763819204712 【Aの長さ】 Aの長さ = 点線の長さ × sin36° S / 2 * 1.3763819204712 * 0.58778525229247 【Bの長さ】 Bの長さ = 点線の長さ × cos36° S / 2 * 1.3763819204712 * 0.80901699437495 【Cの長さ】 Cの長さ = 点線の長さ × sin18° S / 2 * 1.3763819204712 * 0.30901699437495 【Dの長さ】 Dの長さ = 点線の長さ × cos18° S / 2 * 1.3763819204712 * 0.95105651629515
hy3

2015/09/15 08:37

計算誤差が心配でしたが、上手く行った様で何よりです!
guest

0

単に正五角形を作りたいだけなら、五等分した三角形を回転複製したほうが簡単なように思います。
書き方ではなくて指定の辺の長さをただ知りたい場合ですが、あまり綺麗な数値にはならない気がします。
例えば各辺の長さをhとするとAの長さは
Aと五角形の辺との交点の角度が(2/10)piだから
A/(h/2)=cos((2/10)pi)
A = hcos((2/10)pi)/2 ≒ 0.405h
こんな感じになっちゃうんじゃないですかね?(あまり自信は無いですが)
ほかのも頑張れば式は導出できそうですが…一旦割愛。
数学パズル的に綺麗な値が出るものなんでしょうか?

投稿2015/09/15 06:30

hirohiro

総合スコア2068

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/09/15 08:36

回答ありがとうございます。 なるほど、五等分した三角形を回転するという方法もありますね。 今回は長方形を回転して五角形を作りたかったので、別の機会に試してみたいと思います。 皆様のお陰様で解決することできました。 ありがとうございました。
guest

0

5角形の一番上から反時計回りに0~4の番号を割り当て頂点を識別する。
原点を5角形の中心とし、Oと定義。
0-1の点をP1として1-2の点をP2とする。
P1は0-1の中点、P2は1-2の中点であることは明白。
よってP1は(B,A)、P2は(C,D)である。
たぶん合ってる。
中点を求めたいんだよね?もし他の点だったら内分の公式にでもあてはめて取得

投稿2015/09/15 05:27

編集2015/09/15 05:30
takiren

総合スコア63

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/09/15 05:48 編集

早速の回答ありがとうございます。 私の理解力不足で申し訳ございません。頂いた回答について理解するのに時間がかかっております。 また、私の質問の仕方に不備があれば申し訳ございません。 ABCDと色分けしたそれぞれの線の長さを求めたいと考えております。 例えば、1辺の長さが仮に10だとして、それぞれ色分けした長さを計算式で求めたいと考えております。
takiren

2015/09/15 07:20

ああ、すみません。回答の書き方が悪かったです。 座標が長さになるということを言いたかったのです。 ただ”hy3”さんの方法のほうがスマートですね
退会済みユーザー

退会済みユーザー

2015/09/15 08:36

皆様のお陰様で解決することできました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問