JS, 원을 따라가는 객체

Question

다른 객체를 중심으로 원을 그리려고합니다. 너무 열심히, 나는 계산했다. 그러나

var dx = this.x - this.parent.x, 
    dy = this.y - this.parent.y, 
    r = Math.atan2(dy, dx); 

this.x = Math.sin(r) * this.speed + this.x; 
this.y = (Math.cos(r) * this.speed * -1) + this.y; 

이 코드를 실행

, 그것은 나타납니다 ... 아마 잘못된 공식을 사용하고 있지만 내가 대신해야하는 하나 확실하지 않다 ... 원 나선형입니다 밝혀 일하다. 각 프레임은 객체가 부모 객체 주위를 원호로 움직입니다.

그러나 아크는 커지고 점점 커져 거리가 점점 커집니다.

나는 어떤 실수를하나요?

Answer 1

플로트 값에 무한 정밀도가 없으며 무한히 작은 각도 단계가 없습니다. 따라서이 반복 계산은 정확하지 않을 수 있습니다.

정확한 반복 솔루션이 없습니다. 초기 접근 방식으로 정밀도를 높이려고하면 여전히 발산됩니다.

이 솔루션은 원 쉽게입니다 angulum에서 완전히 각 단계를 계산하는 것입니다 :

// init part, set your own values 
var a = 0; // in radian 
var r = 100; // radius, in pixels for example 
var da = 1; // in radian. Compute this (once!) using r if you like to use an absolute speed and not a radial one 


// each modification 
a += da 
x = r*Math.sin(a); 
y = r*Math.cos(a); 

Answer 2

dystroy의 솔루션 @ 완전히 합법적이지만 있도록 반복적 인 접근을 제한하는 방법은 무엇입니까 그것은 통제 할 수없는 나선형이 아닙니다.

새 변수 R을 소개합니다.이 변수는 개체가 부모를 돌리는 고정 반경입니다.

//your original code 
var dx = this.x - this.parent.x, 
    dy = this.y - this.parent.y, 
    r = Math.atan2(dy, dx); 

//apply constraint: 
//calculate what dx and dy should be for the correct radius: 
dx = -R * Math.cos(r); 
dy = -R * Math.sin(r); 

//force this.x, this.y to match that radius. 
this.x = this.parent.x + dx; 
this.y = this.parent.y + dy; 

//the radius will still be off after your update, but 
//the amount by which it is off should remain bounded. 
this.x = Math.sin(r) * this.speed + this.x; 
this.y = (Math.cos(r) * this.speed * -1) + this.y; 

당신은 또한 위치를 업데이트 한 후 제약 조건을 적용 할 수 :

var hypot = function(x, y) { return Math.sqrt(x*x + y*y); }; 
//Run this code only once! 
var R = hypot(this.x - this.parent.x, this.y - this.parent.y); 

그런 다음 당신은 원의 반지름이 해결 된 제약 조건을 추가 할 수 있습니다.