getImageData
움직임이 불꽃이 되는 거울
해결하는 문제
카메라 앞의 움직임에 반응하는 화면을 만들고 싶지만 AI 모델은 무겁고 느리다.
AI 모델 없이 직전 화면과 픽셀을 비교해, 움직인 자리에서만 불꽃이 피어오르게 합니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것카메라 영상
브라우저가 하는 일직전 프레임과 픽셀 밝기 차이 비교
나오는 것움직인 위치에 파티클 생성, 움직임 양 수치
쓰는 브라우저 기술
getUserMediaCanvas getImageDataWeb Audio
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 분석 해상도: 작을수록 빠름 (예: 160×120)
- 차이 기준값: 클수록 큰 움직임만 감지
- 파티클 개수 상한
자주 막히는 곳
- 조명이 깜박이면 움직임으로 오인한다
- 분석 해상도를 크게 잡으면 휴대폰에서 끊긴다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 움직임이 있을 때만 사진을 AI에 보내 상황 설명 받기 (비용 절약형 CCTV)
- 체육 수업 활동량 측정
웹 서비스
- 인터랙티브 미디어아트 전시
- 사람이 다가오면 켜지는 디지털 사이니지
피지컬 AI
- 움직임 감지 시 ESP32 부저·조명 작동
- 반려동물 움직임 기록 장치
넓히는 방법
- 움직임이 기준을 넘으면 사진 자동 저장
- 화면을 구역으로 나눠 허공 버튼으로 쓰기
- 배경을 기억해 두고 사람 실루엣만 따내기
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
카메라 직전 프레임과 픽셀을 비교해서, 움직인 곳에서만 불꽃 파티클이 피어오르는 거울 웹페이지를 AI 모델 없이 HTML 하나로 만들어줘.
같은 분류의 능력
03 미디어 처리에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md