웹에서 이동하는 pitgora 스위치 바람의 장난감

NHK의 프로그램전원 스위치에서 방송되는 인기 코너는 통칭'피타고라'라고 한다.
저는 사회인이 되어서도 사는DVD 슈퍼팬입니다.
언젠가 혼자 해보고 싶다고 생각했지만 지금까지 해본 적이 없다.
이런 상황에서 올해 선배님이 저를 advent 달력에 초대하셨어요.
나는 이 기회를 틈타 그다지 좋지 않은 pitgora 프로그램을 만들어 보고 싶다.

피타고라 프로그램

원래 피타고라란게 바로...라는 정의가 어렵기 때문에 이번 목적은'그런 것'을 만드는 것이다.
일반적인'피타고라'는 물리 세계에서 실행되는데 지금부터 제작되는'피타고라 프로그램'은
숫자만 있는 다양한 표현을 사용할 수 있다.
예컨대

좌표를 지정하고 대상을 이동하며 물리 규칙을 고려하지 않음

사용자 상호 작용 가능

수정 대상

잠깐만요.
이번에는'숫자만이 표현할 수 있다'는 걸 깨달았어요.
우리는 아주 작은 절차를 실시할 것이다.

사용할 라이브러리

피골라처럼 말하자면 물리법칙은 없어서는 안 되기 때문에 물리 연산의 라이브러리를 사용한다.
구글 선생님께'2D 물리 연산 자바스크립트'를 물었을 때 다양한 종류가 인기를 끌었다
이번에는 이전에 조금 경험이 있는 매터다.js를 사용하기로 결정했습니다.
【Matter.js】 http://brm.io/matter-js/

만들다

여기서부터는 종점을 정하지 않고 마음대로 실시한다.

준비

Matter.js의wiki를 참고하여 canvas에서 물리 연산을 준비합니다.
참고로 위에서 언급한 샘플은 이것입니다.

1. 중력에 따라 대상을 떨어뜨린다

그럼, 우선 움직일 것부터 결정하자.
Matter.js의 프레젠테이션 페이지 다양한 동작도 있어요.
이번에 우리는 위의 견본을 보고 반짝이는'회사 명칭 순서대로 배열된 네모난 테두리'를 만들자.
나는 네가 무슨 말을 하는지 전혀 모르겠다. 즉, 이렇다.
https://codepen.io/masaoblue/pen/maPoqY

커서를 canvas 위에 놓으면 쌓인 나무가 떨어지기 시작하고 최종적으로 회사 이름에 따라 배열된다.
※ Windows 10 & 크롬에 대해서만 동작 확인을 완료했습니다.
mass로 대상의 품질을 지정함으로써restitution에서 배척 계수를 지정하는 동시에 대상의 초기 설정과 각도를 미세하게 조정하여 비교적 높은 확률로 배열 순서를 제어할 수 있다.

2. 충돌 이벤트 탐지

둥근 대상이 보이면 어떻게든 언덕을 굴러가고 싶어 설치했다.
https://codepen.io/masaoblue/pen/bOpXbB
(위와 마찬가지로 커서를 놓고 시작)
하지만 직감만으로 비탈길을 적절히 배치해 틈이 좁아 공이 중간에 멈췄다.

그럼 내리막길 위치를 조정해보자... 한순간에 생각했어, 이번에 얻기 힘든 디지털 공간.
어차피 현실에서는 할 수 없는 동작이 재밌을 텐데.
따라서'비탈길 이동'이 아니라'충돌이 감지되면 공의 크기가 줄어든다'는 것이다.
디지털적인 방법으로 해결했다.
https://codepen.io/masaoblue/pen/LMZEjw

(축소하면 해결!)
이렇게 하면 안전하게 맨 아래에 도착한다.
※ 겸사겸사 바디에 대해 이야기하자.scale 방법으로 circle 대상을 축소하면 계산 정밀도가 떨어지고 동작이 이상해집니다.
　 https://github.com/liabru/matter-js/issues/326
이걸 알아차리는데 한 시간이 걸렸는데..

3. 상대에게 감정 표현을 덧붙인다

그렇다면 이곳에 와서'옥'이라고 쓰인 대상에게 기묘한 애틋한 마음이 솟아올랐다.
(이후에 소옥이라고 부른다.)
디버깅을 위해 여러 번 가동하는 과정에서
아마 소옥이 벽에 부딪혔을 때 어떻게 해야 좋을지 고민했을 거예요.
이런 망상은 팽창하기 시작했다.
그렇다면 어떤 동작을 추가해 감정을 표현할 필요가 있다.
그럼 실제로 해보세요.
우선 만화에서 흔히 볼 수 있는 놀랄 때의 표현(Σ따위
캔버스에서 quadraticCurveTo 방법을 사용하면 2차 베젤 곡선이 늘어나므로 이것을 사용하세요.