[JS Canvas] 물리엔진 - 움직임

어제 Canvas 사용법을 배우다가 갑자기 물리엔진을 만들게 되었다. 단진자 물리엔진을 만들려고 했지만 물리2를 보면서 혼란이 와서 거기까지는 못했고 간단한 움직임 까지는 완성하였다.

 

먼저 main함수부터 살펴보자. display함수는 최적화 프레임(?)마다 render함수를 불러온다. 그리고 render함수는 원래있던 그림을 지우고 다시 그려주는 형식이다. Boxes라는 오브젝트를 담고있는 리스트에서 각각의 객체들에게 process로 움직임을 처리하고 그림을 그린다.

 

Boxes에 담았던 그 클래스, Ball이다. 참조할때는 질량, 위치, 반지름, 속도, 색깔로 이루어져있다. 그리고 process함수는 그리고, 벽에 닿았으면 튕기게하고, 속도에 따라 움직이게 하는 함수가 있다. 

 

사실 이게 전부다. 매우 간단하지만 

 

이 상수들로 재밌는 상황을 연출 할 수 있다.

GRAVTY_SACLE = 0, ELSTASTIC_SCALE = 0

GRAVTY_SACLE = 10, ELSTASTIC_SCALE = 0

GRAVTY_SACLE = 10, ELSTASTIC_SCALE = 0.1

간단한 엔진이 완성되었다!

 

전에 C#으로 몇백줄 되는 코드를 구현했다보니 좀 쉬운면이 있었다. 하지만 프론트엔드에서 JS는 잘못써도 알려주지 않아서 디버그하기 힘들었다. 하지만 그리 어려운 부분은 아니니 여러분도 시간이되면 만들어보시길..

 

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

GitHub - Function1790/Web_Movement_Simulator: with JS