색상(Hue) 추적
색깔 물건으로 허공에 그리기
해결하는 문제
특정 색 물건의 위치를 따라가고 싶지만 사물 인식 AI를 학습시키기는 부담스럽다.
화면에서 탭한 물건의 색을 기억하고 그 물건을 따라가며 허공에 빛나는 선을 그립니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것카메라 영상과 탭으로 고른 기준 색
브라우저가 하는 일픽셀을 색상·채도·밝기로 바꿔 기준 색과 비교하고 중심 좌표 계산
나오는 것물체를 따라 선 그리기, PNG 저장
쓰는 브라우저 기술
getUserMediaCanvas getImageDataCanvas toDataURL
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 색상 허용 범위 (기준 색에서 몇 도까지)
- 최소 픽셀 수: 작은 잡음 무시
- 선 굵기, 색, 번짐(shadowBlur)
자주 막히는 곳
- 흰색·검은색처럼 채도가 낮은 색은 추적이 불안정하다
- 배경에 같은 색이 있으면 중심점이 끌려간다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 허공에 그린 그림을 AI가 맞히는 게임
- 허공 글씨를 글자로 바꾸기
웹 서비스
- 교실 전자칠판 대용 허공 판서
- 화상 수업용 포인터
피지컬 AI
- 빨간 물체를 따라 고개를 돌리는 팬틸트 카메라
- 색깔 블록 분류 컨베이어
넓히는 방법
- 색 두 개로 펜과 지우개 나누기
- 빨간 공 위치로 게임 캐릭터 조종
- 형광 조끼 색으로 사람 위치 추적
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
카메라에서 내가 탭한 색의 물체를 추적해서, 그 물체를 따라 허공에 빛나는 선이 그려지는 웹페이지를 만들어줘. 그림은 PNG로 저장되게 해줘.
같은 분류의 능력
03 미디어 처리에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md