2016-09-23 3 views
3

저는 하나의 원이 있습니다. 하나의 원은 루프에서 반지름을 조작하여 커지거나 작아집니다. 성장하고 축소하는 동안 그 원에 점을 그립니다. 같은 루프 내에서 다음 점에 대한 각도를 높이십시오.끝 회전 원을 계산하십시오.

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; 

이 그려 할 꽃/패턴의 어떤 종류를 생산하고 있습니다. 알 수없는 회전이 발생한 후 그리기 선이 시작된 지점에 연결되어 경로가 완전히 닫힙니다.

이제 선이 시작되기 전에 얼마나 많은 회전이 발생해야하는지 알고 싶습니다.

동작하는 예제

는 여기에서 찾을 수 있습니다 : 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 

속도 값이 정수인 경우 제

의해 제 방정식들은 합리적인 경우, 정수 비율을 얻기 위해 곱해 최소 유효 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

관련 문제