250x250
Rainbow๐ŸŒˆCoder
My dev Note๐Ÿ“’
Rainbow๐ŸŒˆCoder
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (411)
    • ๊ณต์ง€์‚ฌํ•ญ (0)
    • Debugger (10)
      • Visual Studio Debugger (1)
      • Chrome DevTools (3)
      • Visual Studio Code Debugger (4)
      • eclipse (1)
      • intelliJ (1)
    • OOP (2)
      • OOP (2)
    • TypeScript (54)
      • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ TypeScript (54)
    • Javascript (87)
      • Javascript (45)
      • Node.js (19)
      • React (5)
      • FE ๊ฐœ๋ฐœํ™˜๊ฒฝ์„ค์ • (3)
      • React์™€ Node ๊ฐ™์ด ๋•Œ๋ ค์žก๊ธฐ (6)
      • next.js (2)
      • pixi.js (7)
    • ๋งˆํฌ์—… (23)
      • Html & Css (23)
    • C# (80)
      • C# (12)
      • ์ด๊ฒƒ์ด C#์ด๋‹ค (68)
    • C++ (30)
      • c++ (27)
      • win api (3)
    • Unity (18)
      • Unity(๊ธฐ์ดˆ) (8)
      • Unity(C#์ค‘๊ธ‰) (5)
      • ์œ ๋‹ˆํ‹ฐ ํฌํ†ค(๋„คํŠธ์›Œํฌ) (4)
      • unity c# MyCode (1)
    • Java & Spring (29)
      • Java (11)
      • ์Šคํ”„๋ง (8)
      • Java Algorithm (9)
      • Javs Data Structures (1)
    • ์ž๋ฃŒ๊ตฌ์กฐ์™€ ์•Œ๊ณ ๋ฆฌ์ฆ˜ (15)
      • ์ž๋ฃŒ๊ตฌ์กฐ (5)
      • ์•Œ๊ณ ๋ฆฌ์ฆ˜ (10)
    • ํ˜•์ƒ๊ด€๋ฆฌ (15)
      • Git (11)
      • ์†Œ์ŠคํŠธ๋ฆฌ (3)
    • ๊ทธ๋ž˜ํ”ฝ์Šค (7)
      • WebGl (7)
    • AWS (3)
      • aws (3)
    • ๋ฆฌ๋ˆ…์Šค (5)
      • ๋ฆฌ๋ˆ…์Šค (5)
    • ์ฑ… ๋ฆฌ๋ทฐ (13)
      • ํด๋ฆฐ์ฝ”๋“œ(์ฑ…๋ฆฌ๋ทฐ) (3)
      • ์œ ์ง€๋ณด์ˆ˜๊ฐ€๋Šฅํ•œ์ฝ”๋”ฉ์˜๊ธฐ์ˆ C#ํŽธ(์ฑ…๋ฆฌ๋ทฐ) (1)
      • ๋ฆฌํŒฉํ† ๋ง(์ž๋ฐ”์Šคํฌ๋ฆฝํŠธํŒ) (9)
    • Server (2)
      • ๊ฒŒ์ž„ ์„œ๋ฒ„(๋„คํŠธ์›Œํฌ, ๋ฉ€ํ‹ฐ์“ฐ๋ ˆ๋“œ,OS) (2)
    • ์„ค๊ณ„, ์•„ํ‚คํ…์ณ (4)
    • ํŒŒ์ด์ฌ (5)
    • ๋””์ž์ธํŒจํ„ด (2)
    • mocha (2)
    • Jest (1)
    • Spine (1)
    • ์ธ๊ณต์ง€๋Šฅ (1)
      • ํ˜ผ์ž๊ณต๋ถ€ํ•˜๋Š”๋จธ์‹ ๋Ÿฌ๋‹+๋”ฅ๋Ÿฌ๋‹ (1)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ใ…ฃใ„ท
  • ์œ„์ž„
  • MySQL
  • ์ปดํฌ์ง€์…˜

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

hELLO ยท Designed By ์ •์ƒ์šฐ.
Rainbow๐ŸŒˆCoder

My dev Note๐Ÿ“’

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

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

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
    Rainbow๐ŸŒˆCoder
    Rainbow๐ŸŒˆCoder
    ๋ชฐ๋ผ๋„ ๊ฒฐ๊ตญ์€ ์•„๋Š” ๊ฐœ๋ฐœ์ž, ๊ทธ๋Ÿฐ ์‚ฌ๋žŒ์ด ๋˜๊ธฐ ์œ„ํ•œ ๋งค์ผ์˜ ํ•œ๊ฑธ์Œ

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”