【빌어 먹을 앱】p5js제의 똥이 마우스 스토커 하는 크롬 확장 기능을 만들었습니다

이 기사는 빌어 먹을 앱 2 Advent Calendar 2019 - Qiita의 21 일째 기사입니다.

화려한 똥들💩💩💩이 마우스를 쫓아 오는 크롬 확장 기능을 만들었습니다. 브라우저를 클릭하면 똥이 늘어납니다.



하나의 똥 💩을 천천히 관찰하는 GIF


크롬 확장 프로그램으로 출시 중입니다 🎉
여기에서 꼭 DL 해보세요!
→ 똥 마우스 스토커 - Chrome 웹 스토어

소스는 여기에 있습니다.
→ gurutaka/extension_kuso_mouse_stalker

여기에서는, 똥 마우스 스토커의 특징과 기술적인 이야기를 소개해 갑니다.

똥 마우스 스토커의 특징

똥은 p5js로 만든 수제

똥의 끝이 절묘하게 좌우로 움직인다

전혀 도움이되지 않음

기술적인 이야기

크롬 확장 기능을 만드는 방법

과거에 초학자를 위해 Qiita에 정리했습니다! 크롬 확장 기능 개발에 관심이 있으신 분은 꼭 참고해 보세요.
→ Chrome 브라우저의 확장 기능을 만들어 보고 싶은 초보자용으로 개발 방법을 소개! 【샘플 있음】

또 Github에 간단한 샘플도 두고 있으므로, 이쪽도 시험해 주세요!
→ gurutaka/extensions_hundsOn

브라우저에서 똥이 움직이는 메커니즘

이쪽의 자료에 정리하고 있으므로, 신경이 쓰이는 분은 꼭 봐 주세요.

간략한 개요는 여기

• div 요소를 브라우저에 배치
• setup에서 화면 전체에 캔버스를 배치
• 그리고는 똥이 마우스를 쫓는 프로그램을 쓰면 OK!

똥 그리기

똥은 p5js(processing을 JavaScript에 이식한 라이브러리)로 썼습니다. 똥의 끝은 삼각 함수로 움직입니다.

똥의 물리 운동

똥이 마우스에 도달할 때까지의 움직임은 물리적 운동을 따릅니다.

조타력을 계산하여 마우스를 쫓아 버렸습니다.

아래 그림은 이미지도입니다!

그러나, 이대로의 실장이라면, 똥이 마우스 부근까지 전력으로 향해 오므로, 급 브레이크할 수 없고, 마우스 부근에서 멈추지 않습니다. 그래서, 어느 일정 범위내에 가까워지면, 브레이크를 걸도록 하고 있습니다.

마지막으로

이상입니다. 작년에 이어 올해도 전혀 도움이 되지 않는 빌어 먹을 어플이 생겨 만족합니다.

→ 가슴 함수 제너레이터를 만들어 보았다 【첫 릴리스】

내년에는 더 많은 빌어 먹을 앱을 만들 수 있도록 최선을 다할 것입니다.