[JS Canvas] 두 벡터의 합성

물리2 책을 보다가 벡터의 합성를 보고 바로 만들어 버렸다!

 

원점으로 부터 두 벡터 A(x₁, y₁) B(x₂, y₂)가 있으면 두 벡터의 덧셈은 (x₁ + x₂, y₁ + y₂) 이 된다. 그래서 두 벡터와 합을 표기할 벡터만 만들어주면  끝난다.

 

벡터는 Vector라고 짓기에 좀 그래서 Newron이라고 이름을 붙여주었다. draw는 벡터를 그려주는 거고, setPos는 벡터의 좌표 설정, isWithinRange는 마우스를 클릭했을때 해당 벡터를 선택한 여부를 리턴한다.

 

가장 밑줄을 보면 이벤트 함수들이 있다. 요놈들은 벡터를 움직일 때 필요한 이벤트들이다.

 

canvas.addEventListener("mousemove", (event) => {
    const evtPos = [event.offsetX, event.offsetY]
    if (selected_index !== null) {
        RenderList[selected_index].setPos(evtPos[0], evtPos[1])
        SumNewron.setPos(-START_POS[0] + RenderList[0].x + RenderList[1].x,
            -START_POS[0] + RenderList[0].y + RenderList[1].y)
        render()
    }
})

여기에 벡터의 합성이 있는데 SumNewron이 합성된 벡터를 표시할 객체이다. setPos가 이제 벡터를 합성해 주는 것이다.

-START_POS[0] + RenderList[0].x + RenderList[1].x

요놈을 한국어로 바꿔주면 "- 원점의 x + 첫번째 벡터의 x + 두번째 벡터의 x" 와 같다. 여기서 원점을 빼준 이유는 벡터의 시작점이 바뀌었을 때 저게 없다면 원점을 (0, 0)으로 취급되기 때문에 다음과 같은 버그가 발생된다.

 

이렇게 된다면 우리가 원하는건

 

이것이지만, 실제로는 

 

이렇게 합성된다. 그래서 빼준것이다.

 

완성!

 

사실 마우스로 움직이게 하는건 처음이지만 잘 작동해서 신기했다. 만들기도 쉬워서 나중에 다른 물리엔진에서도 쓸 것이다.

 

소스코드 : https://github.com/Function1790/Sum_Two_Vector

GitHub - Function1790/Sum_Two_Vector: With JavaScript Canvas