Spine

[Spine, js] Math.atan ํ™œ์šฉ

Rainbow๐ŸŒˆCoder 2022. 11. 21. 15:52
728x90

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan

 

https://www.cuemath.com/trigonometry/arctan/

 

์‚ผ๊ฐ๋ฒ•์—์„œ arctan ์€ ์—ญ ํƒ„์  ํŠธ ํ•จ์ˆ˜๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์—ญ์‚ผ๊ฐ ํ•จ์ˆ˜๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ์ ‘๋‘์‚ฌ - arc๋ฅผ ๋™๋ฐ˜ํ•ฉ๋‹ˆ๋‹ค. ์ˆ˜ํ•™์ ์œผ๋กœ ์šฐ๋ฆฌ๋Š” arctan ๋˜๋Š” ์—ญํƒ„์  ํŠธ ํ•จ์ˆ˜๋ฅผ tan -1 x ๋˜๋Š” arctan(x)๋กœ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. 

 

 

์•„ํฌํƒ„ ๊ณต์‹

 

์œ„์—์„œ ๋…ผ์˜ํ•œ ๋ฐ”์™€ ๊ฐ™์ด arctan์˜ ๊ธฐ๋ณธ ๊ณต์‹์€ arctan(์ˆ˜์ง/๋ฐ‘๋ฉด) = θ๋กœ ์ฃผ์–ด์ง€๋ฉฐ, ์—ฌ๊ธฐ์„œ θ๋Š” ๋น—๋ณ€๊ณผ ์ง๊ฐ ์‚ผ๊ฐํ˜•์˜ ๋ฐ‘๋ฉด ์‚ฌ์ด์˜ ๊ฐ๋„์ž…๋‹ˆ๋‹ค. ๊ฐ๋„ θ์˜ ๊ฐ’์„ ๊ฐ๋„ ๋˜๋Š” ๋ผ๋””์•ˆ์œผ๋กœ ์ฐพ๊ธฐ ์œ„ํ•ด arctan์— ๋Œ€ํ•ด ์ด ๊ณต์‹์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ณต์‹์„ θ = tan -1 [Perpendicular / Base] ๋กœ ์“ธ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค .

 

 

 

 

 

const pos = this.startBtn.getGlobalPosition(); //{x: 535, y: 565}
const endPoint = this.goldUI.GlobalPosition(); //{x: 99, y: 174}
this.spine.x = pos.x;
this.spine.y = pos.y;
const rad = Math.atan((endPoint.x - pos.x) / (endPoint.y - pos.y));
this.spine.rotation = -rad;

 

728x90