| 번호 | 구분 | 이름 | 학과 | 학년 | 휴대폰 | 담당업무 |
|---|---|---|---|---|---|---|
| 1 | 팀장 | 최연우 | 컴퓨터공학과 | 2 | 010-2224-9395 | 발표, 코드 작성 |
| 2 | 팀원 | 서정목 | 컴퓨터공학과 | 2 | 010-9005-6102 | 발표자료 제작, 코드 작성 |
| 3 | 팀원 | 조송하 | 무역학과 | 3 | 010-3808-8152 | 보고서 작성, 코드 작성 |
| 4 | 팀원 | 허영준 | 컴퓨터공학과 | 2 | 010-2748-9005 | 발표자료 제작, 코드 작성 |
스네이크 게임은 비디오 게임의 한 장르로, 벽과 같은 장애물을 피해 먹이를 먹도록 조종하는 뱀을 키우는 게임이다. 본 과제에서는 p5.js 기반으로 작성된 스네이크 게임에 머신러닝 라이브러리인 ml5.js를 적용하여 손동작을 통해 뱀을 조작할 수 있도록 하였다. ml5.js란 2018년 7월 뉴욕 대학교에서 TensorFlow.js 기반으로 구축한 머신러닝 알고리즘 라이브러리로, 웹에서 사용 가능한 오픈 소스 고급 라이브러리이기 때문에 초보자들도 쉽게 이용이 가능하다는 장점이 있다.
-
2022년도 1학기 컴퓨터그래픽스 수업에서 배운 내용은 다음과 같다:
- Processing
- p5.js
- OpenGL
- ml5.js
- 기존 Snake 게임은 뱀이 음식을 먹을 때마다 뱀의 길이가 길어지고, 뱀이 벽이나 자신의 몸에 부딪치면 game over 되는 방식이다. ml5_code.js를 통한 시험 과정에서 뱀이 3칸 이상일 때, 바로 반대 방향으로 방향을 틀면 죽는 현상을 발견하였다. 머신러닝을 통한 동작 인식과 그에 의한 조작은 키보드를 이용할 때보다 덜 정확하므로, 게임 진행에 융통성이 필요하다. 따라서, 스스로의 몸에 닿으면 죽는 판정을 삭제하였다.
- 손가락의 각 마디와 손목 부위가 21개의 포인트로 감지되며, 손동작에 따라 포인트의 위치가 변경된다.
- 손 모양을 인지하여 상하좌우로 방향이 구분하고 해당하는 방향으로 뱀의 이동방향이 결정된다.
- 최종적으로, 키보드로 방향 키를 누르지 않고, 손 모양을 바꿔가면서 즐겁게 스네이크 게임을 플레이할 수 있도록 한다.
| 정성적 평가 | ||||||
|---|---|---|---|---|---|---|
| 번호 | 평가 기준 | 평가 척도 | ||||
| 매우 그렇다 | 그렇다 | 보통이다 | 그렇지 않다 | 전혀 그렇지 않다 | ||
| 1 | 과제 내용이 Graphics와 관련이 있는가? | 5 | 4 | 3 | 2 | 1 |
| 2 | 손 모양을 정확하게 인식하는가? | 5 | 4 | 3 | 2 | 1 |
| 3 | 뱀을 자신이 원하는 방향으로 움직일 수 있는가? | 5 | 4 | 3 | 2 | 1 |
-
ml5.js 머신러닝 라이브러리에서 활용할 모델을 선택한다. ml5js.org 홈페이지의 Reference 페이지와 Prof. Daniel Shiffman의 유튜브 채널 Coding Train을 참고하여 주제와 관련된 모델들의 기능을 익힌 후, 비교·대조를 통해 KNNClassifier와 Handpose 중 후자를 선택하였다. KNNClassifier(K-Nearest Neighbors Classifier)는 신체 전체의 포즈를 파악하는 모델로, 초기 팔부터 손까지에 해당하는 부위를 움직여 조종하는 기능을 구상할 때 고려하였으나, 보다 높은 정확도와 편의성을 위해 손 동작만 인식하는 Handpose로 대체하였다.
선택한 모델을 적용하여 손 모양을 학습시킨 후, 학습 파일을 게임 내부에서 load하여 손 동작 인식 기능을 추가한다. 학습 파일의 확장자는 .json으로, 과도하지도 부족하지도 않은 적정한 학습에 의해 생성되어야 한다.
| 이동 방향 | 손의 방향 | |
|---|---|---|
| 플레이어 시점 | 카메라 시점 (웹캠 촬영 사진 첨부) |
|
| 상 | 위 | 손바닥이 보이는 상태로 손가락 끝이 위를 향한다. |
| 하 | 아래 | 손등이 보이는 상태로 손가락 끝이 아래를 향한다. |
| 좌 | 좌측 | 손등이 보이는 상태로 손가락 끝이 오른쪽을 향한다. |
| 우 | 우측 | 손바닥이 보이는 상태로 손가락 끝이 왼쪽을 향한다. |
상 |
||
|
좌 |
우 |
|
하 |
||
| 번호 | 내용 | 추진일정 | 비고 |
|---|---|---|---|
| 1 | 기획 | 2022.05.16. - 2022.05.19. | 계획서 작성 |
| 2 | 1차 구현 | 2022.05.19. - 2022.05.22. | 손모양 인식 기능 추가 |
| 3 | 2차 구현 | 2022.05.23. | Snake 디자인 수정 |
| 4 | 발표자료 제작 | 2022.05.24. - 2022.05.30. | ppt, 리플릿, 동영상 제작 |
[1] ml5js·Friendly Machine Learning For The Web. https://ml5js.org/ (accessed May 17, 2022)
[2] KiWoon. "11.7 Finding points on each part of a hand: Handpose." p5 JavaScript and ml5 Machine Learning Library - WikiDocs. (2020). Accessed: May 17, 2022. [Online]. Available: https://wikidocs.net/103185
[3] J. Jo, "The Frontline of The Dementia Patient Care Center. Increase in The Use of Games for Dementia Prevention." DementiaNews. https://www.dementianews.co.kr/news/articleView.html?idxno=3863 (accessed May 17, 2022)
[4] "Snake (video game genre)." Wikipedia. https://en.wikipedia.org/wiki/Snake_(video_game_genre) (accessed May 17, 2022)
[5] A. Lamba, "Introduction to ML⁵.js - A Beginner’s Friendly Machine Learning for the Web." Towards Data Science - Medium. https://towardsdatascience.com/introduction-to-ml5-js-3fe51d6a4661 (accessed May 17, 2022)
[6] The Coding Train. https://thecodingtrain.com/ (accessed May 17, 2022)