複数の長方形を円状に並べる方法を探しています。
今、簡単なWebアプリケーションを製作しようと考えているのですが、GUIパーツの配置を決める段階で行き詰ってしまいました。添付画像のように、600x600サイズの画面内に150x50の長方形をいくつか並べることを考えています。この例では具体的に8個配置していますが、状況に応じて1～8個程度の間で変化が発生します。長方形の配置はJavaScriptで計算し、CSSでしていして調整する段取りです。
最初は長方形の重心を円弧を等分したところに配置しようと考えていたのですが、この8個の例では上下端で隣合う長方形同士の間がひどく狭く見えました。それ以外にも色んなポジションで試してみましたが、単純計算で決められるようなポジションでいまいちしっくりきません。
人間の視覚で最も円に近いと感じられる配置で、かつその位置を機械計算で算出できるという手法がないものでしょうか。
No.1
2
2
「円に近いと感じられる」かどうかは、
どちらかというと感覚の問題のようにも思いますので
ご質問に対してズバリの答えというのはムズカシイような気がします。が、
現在、もし正円の円弧上（正多角形の頂点）に対して配置するという事を
されているのであれば、その円を楕円にしてみる事を試されてはいかがでしょうか。
個人的な意見ですが、例のような横長の長方形を配置した場合
どうしても横に間延びして見えてしまうので
若干縦長の楕円上に配置すると、それが抑制されるような気がします。
楕円の円弧上の座標は三角関数で算出できますので
「機械計算で算出できる」という前提とも合うと思います。
プログラムで実装されるのであれば、長軸短軸の差をどの程度するかを
パラメータ化して、適度な表示状態になるよう値を変更してみて
試されても良いのでは。
また別の方法として、ご質問では長方形を「1～8個程度配置する」と書かれていますが
この前提をあえてやぶり6個としても良いのであれば、
正六角形の頂点に配置すると個人的に「安定している」「正確である」ように感じますので
デザイン上で良く使ったりもします。
これは自然界がハニカム構造を形作るように、
人間も六角形に対して安定しているような感覚を受けるからだと聞いた事もあります。
真偽の程は定かでは無いですが…
単純に3の倍数個の場合、内2つが縦横どちらかに並ぶからのような気もしますしｗ
No.1
22
ここでベストアンサー
「円に近いと感じられる」かどうかは、
どちらかというと感覚の問題のようにも思いますので
ご質問に対してズバリの答えというのはムズカシイような気がします。が、
現在、もし正円の円弧上（正多角形の頂点）に対して配置するという事を
されているのであれば、その円を楕円にしてみる事を試されてはいかがでしょうか。
個人的な意見ですが、例のような横長の長方形を配置した場合
どうしても横に間延びして見えてしまうので
若干縦長の楕円上に配置すると、それが抑制されるような気がします。
楕円の円弧上の座標は三角関数で算出できますので
「機械計算で算出できる」という前提とも合うと思います。
プログラムで実装されるのであれば、長軸短軸の差をどの程度するかを
パラメータ化して、適度な表示状態になるよう値を変更してみて
試されても良いのでは。
また別の方法として、ご質問では長方形を「1～8個程度配置する」と書かれていますが
この前提をあえてやぶり6個としても良いのであれば、
正六角形の頂点に配置すると個人的に「安定している」「正確である」ように感じますので
デザイン上で良く使ったりもします。
これは自然界がハニカム構造を形作るように、
人間も六角形に対して安定しているような感覚を受けるからだと聞いた事もあります。
真偽の程は定かでは無いですが…
単純に3の倍数個の場合、内2つが縦横どちらかに並ぶからのような気もしますしｗ
何か定石のような手法があれば、と思っての質問でしたが、確立されたやり方は存在しないよう・・・ですかね。
itaさんは質問で挙げた具体ケースに対する解を提示してくださったのですが、質問は手法を求める意図で出したものだったので、代替手法を提示してくださった78さんの方をベストとさせていただきます。
No.2
20448
上下端から若干離れるようにしてみました。
ｒｘ、ｒｙ、0.2などを微調整してみてください
1
0
n=個数;
rx=250;
ry=250;
for(i=0;i<n;i++)
{
double th=3.14159*(i*2.0/n+0.5);
th -= 0.2*sin(th*2);
double x=300+rx*cos(th);//重心ｘ
double y=300+ry*sin(th);//重心ｙ
}
何か定石のような手法があれば、と思っての質問でしたが、確立されたやり方は存在しないよう・・・ですかね。
2012/02/15 16:00:00itaさんは質問で挙げた具体ケースに対する解を提示してくださったのですが、質問は手法を求める意図で出したものだったので、代替手法を提示してくださった78さんの方をベストとさせていただきます。