제한 시간 안에 도마 위의 재료를 최대한 잘게 다지는 게임입니다. ThorVG WebCanvas로 만들었습니다.
플레이: https://ossca-thorvg.github.io/Hackathon-Cleave/
OSSCA 2026 ThorVG 챌린지스 해커톤(ThorThon) 출품작 · 조정민(YoungB0)
| 좌클릭 | 칼날에 걸린 조각을 자릅니다 |
| 좌클릭 드래그 | 흩어진 조각을 칼로 모읍니다 |
| 우클릭 (또는 스페이스) | 칼이 시계방향으로 돕니다 |
| 1 / 2 / 3 | 칼을 바꿉니다 |
칼이 길수록 한 번에 크게 자르고, 칼이 여러 개면 한 번에 여러 줄을 자릅니다.
조각은 미리 만들어둔 스프라이트가 아니라 매번 새로 계산됩니다.
칼날이 지나간 직선을 기준으로 반평면 클리핑(Sutherland–Hodgman)을 두 번 적용해서 폴리곤을 둘로 나눕니다. 볼록 도형을 직선으로 자르면 두 조각도 반드시 볼록이므로, 몇 번을 재귀적으로 잘라도 전제가 깨지지 않습니다.
1. 꼭짓점이 직선의 어느 쪽에 있는지 판정 (외적 부호)
2. 남길 쪽 꼭짓점만 수집
3. 부호가 바뀌는 변에서 교차점을 보간해 삽입
4. 반대 부호로 한 번 더 → 나머지 조각
그래서 같은 모양의 조각이 하나도 없습니다.
칼날이 조각을 가로지르는 폭의 66% 이상을 덮어야 잘립니다. 조각이 작아질수록 그 폭도 짧아지므로, 다질수록 어려워지는 곡선이 자동으로 만들어집니다.
ThorVG는 씬 그래프를 유지합니다. 한 번 올린 도형은 계속 씬에 남아 있어서 매 프레임 다시 발행할 필요가 없습니다.
Cleave는 이 구조를 그대로 씁니다.
조각이 잘릴 때 → 새 Shape 두 개를 씬에 추가
조각이 미끄러지는 중 → translate()만 갱신
조각이 멈춘 뒤 → 아무것도 하지 않음
폴리곤 좌표는 로컬로 고정하고 이동은 오프셋으로만 표현합니다. 화면은
translate()가 처리하고, 절단 판정은 좌표에 오프셋을 더해 계산합니다.
즉시 모드 API였다면 정지한 수백 조각도 매 프레임 경로를 다시 그리고 다시 채워야 합니다. 개발 도중 실제로 그 방식으로 만들었다가 조각이 수백 개를 넘어가면서 프레임이 무너졌고, 위 구조로 바꾼 뒤 해결됐습니다.
canvas.remove()는 없습니다. 개별 도형을 씬에서 빼는 대신opacity(0)로 처리했습니다- 네이티브의
strokeFill+strokeWidth가 웹에서는stroke({ width, color })하나로 합쳐져 있습니다 - 잘리지 않는 것(도마, 배경, HUD)은 ThorVG에 넣지 않고 HTML/CSS로 처리했습니다
npm install
npm run devmain 브랜치에 푸시하면 GitHub Actions가 빌드해서 Pages로 배포합니다.
- @thorvg/webcanvas v1.1.0 (WebGL 백엔드)
- TypeScript + Vite
- 배경 및 도마 이미지는 AI로 생성했습니다
MIT