2016-09-23 11 views
3

ループ内の半径を操作することによって、拡大縮小する円が1つあります。 成長して縮小している間に、私はその円の上に点を描きます。同じループ内で次のポイントの角度を上げます。終了回転円を計算する

let radius = 0; 
let circleAngle = 0; 
let radiusAngle = 0; 

let speed = 0.02; 
let radiusSpeed = 4; 
let circleSpeed = 2; 

、ループ内:

radius = Math.cos(radiusAngle) * 100; 

// creating new point for line 
let pointOnCircle = { 
    x: midX + Math.cos(circleAngle) * radius, 
    y: midY + Math.sin(circleAngle) * radius 
}; 

circleAngle += speed * circleSpeed; 
radiusAngle += speed * radiusSpeed; 

これが描画される花/パターンのいくつかの種類を生成

セットアップは、このようなものです。 未知の回転の後、描画線は、開始点からの点に接続し、パスを完全に閉じます。

ラインが戻って、それが始めてのである前に、今私は、occure必要がありますどのように多くの回転知っていただきたいと思います。

作業の例では、ここで見つけることができます: http://codepen.io/anon/pen/RGKOjP

コンソールは、円とラインの両方の現在の回転を記録します。

+0

本当にクールなものを得ることができます/ anon/pen/pEZzVB)を設定するだけです。トリゴが必要です。この回答にはプロ – Viney

+0

ありがとう@Novice。私は最後を知りたいので、パスを閉じる/アニメーションを止めて塗りつぶすなどの作業をすることができます。 – Pimmol

答えて

1

半径とポイントの両方が開始点に戻ると、フルサイクルが終了します。従って

speed * circleSpeed * K = 360 * N 
speed * radiusSpeed * K = 360 * M 

ここで、Kは未知数であり、NとMは整数である。

デバイド

circleSpeed/radiusSpeed = N/M 

速度値が整数である場合、2番目の

による最初の式は、それが合理的であれば、整数の割合を得るためにそれらを掛け、最小限の有効NとMの値を取得するために、LCMによってそれらを分けます。

あなたの例最低限の整数の場合

N = 1、M = 2、私たちは、私は [この](http://codepen.ioのような素晴らしいデザインのすべての種類を取得

K = 360 * 1/(0.02 * 2) = 9000 loop turns 
+0

ありがとう@Mbo、でも私は理解できません。 N = 1とM = 2のターンを記録すると、 'radiusAngle'の合計終了回転は360度(1回転)です。 'circleAngle'では720度(2ターン)です。それはどのように9000に変換されますか? – Pimmol

+0

9000ループ、9000ポイント – MBo

関連する問題