# 손전등 찾아 패턴 입히기

3회차(9월 5일, 이정섭 강사)에 한 실습을 집에서 다시 하는 순서입니다. 수업에서는 예제를 고쳐 가며 한 번에 갔는데, 여기서는 단계마다 파일을 하나씩 두었습니다. 1단계부터 차례로 열면 어디서 무엇이 새로 생기는지 보입니다.

준비물은 손전등입니다. 휴대폰 손전등이면 됩니다.

## 먼저 확인할 것

- Processing 4 와 라이브러리 설치는 [Processing 설치](https://opencircuit.club/wiki/tools/processing)에 있습니다. 네 개 중 여기서는 **Video** 와 **BlobDetection** 을 씁니다.
- 라이브러리를 방금 설치했다면 Processing 을 껐다가 다시 켭니다. 열어 둔 채로 설치하면 인식하지 못합니다.
- macOS 는 처음 실행할 때 카메라를 써도 되는지 묻습니다. 허용을 누르세요.

## 파일 받기

한 단계에 파일 하나입니다.

- [1단계 · 웹캠 열기](/downloads/processing/Step1Webcam.pde)
- [2단계 · 밝은 곳에 테두리](/downloads/processing/Step2Blobs.pde)
- [3단계 · 손전등만 남기기](/downloads/processing/Step3Threshold.pde)
- [4단계 · 잡힌 자리에 패턴](/downloads/processing/Step4Pattern.pde)
- [5단계 · 내 마음대로](/downloads/processing/Step5MakeItYours.pde)

받은 파일을 더블클릭하면 Processing 이 「같은 이름의 폴더로 옮길까요」 하고 묻습니다. 예를 누르면 알아서 정리합니다.

저장소에서 통째로 가져가도 됩니다. [tools/processing](https://github.com/joonhyungbae/opencircuit/tree/main/tools/processing) 에 같은 파일과 설명이 있습니다. 저장소를 포크해 두셨다면 GitHub 에서 **Sync fork** 를 눌러야 새 폴더가 보입니다.

## 1단계 · 웹캠 열기

`Step1Webcam` 을 열고 ▶ 를 누르면 창에 내 얼굴이 나옵니다. 실습의 첫 칸이 이것이었습니다.

카메라가 안 열리면 아래 검은 칸(콘솔)을 보세요. 쓸 수 있는 카메라가 번호와 이름으로 찍힙니다. 노트북 내장 말고 다른 카메라를 쓰려면 `setup()` 의 주석대로 이름을 넣으면 됩니다.

## 2단계 · 밝은 곳에 테두리

`Step2Blobs` 는 화면에서 밝은 덩어리를 찾아 초록 테두리를 그립니다. 수업에서 BlobDetection 예제를 열었을 때 나온 그 화면입니다.

카메라 그림을 160x120 으로 줄여서 찾습니다. 640x480 을 그대로 뒤지면 느려지기 때문입니다. 줄인 크기는 코드 위쪽의 `BLOB_W`, `BLOB_H` 입니다.

지금은 얼굴도 창문도 같이 잡힙니다. 다음 단계에서 손전등만 남깁니다.

## 3단계 · 문턱값을 올려 손전등만

문턱값은 「이보다 밝은 것만 본다」는 기준입니다. 코드에서는 `threshold` 이고, 실행 중에 <kbd>위</kbd> <kbd>아래</kbd> 화살표로 0.02 씩 바뀝니다.

손전등을 켜고 화살표를 올리면서 다른 것이 하나씩 사라지는 것을 보세요. 손전등만 남는 값은 방 밝기마다 다릅니다. 그래서 코드에 숫자를 고정해 두지 않고 키로 찾게 했습니다.

<kbd>B</kbd> 를 누르면 오른쪽 위에 작은 흑백 그림이 뜹니다. 찾는 쪽이 실제로 보고 있는 그림이라, 문턱값을 올릴 때 무엇이 지워지는지 여기서 보입니다. 자잘한 얼룩이 계속 잡히면 <kbd>[</kbd> <kbd>]</kbd> 로 최소 크기를 올립니다.

> [!NOTE]
> 잡힌 자리의 좌표는 블롭의 `b.x` 와 `b.y` 입니다. 0에서 1 사이의 값으로 오기 때문에 화면 크기를 곱해서 씁니다. 3단계는 그 좌표를 화면에 그대로 찍어 줍니다.

## 4단계 · 잡힌 자리에 패턴

`Step4Pattern` 은 잡힌 것 중 가장 큰 하나를 골라 그 자리에 동심원과 선을 그립니다. 손전등을 움직이면 패턴이 따라옵니다.

그리는 코드는 `drawPattern()` 안에 모여 있습니다. **패턴을 바꾸려면 이 함수 안만 고치면 됩니다.** 나머지는 건드리지 않아도 됩니다.

<kbd>C</kbd> 로 지나간 자리를 지우고, <kbd>V</kbd> 로 카메라 화면을 끄면 그린 것만 남습니다. 지나간 자리가 천천히 지워지는 속도는 `trail.fill(0, 18)` 의 숫자입니다. 0 으로 두면 계속 쌓입니다.

## 5단계 · 내 마음대로

찾는 대상을 <kbd>1</kbd> 밝은 것, <kbd>2</kbd> 어두운 것, <kbd>3</kbd> 고른 색으로 바꿉니다. 3번에서는 화면을 마우스로 누르면 그 자리의 색을 목표로 삼고, <kbd>+</kbd> <kbd>-</kbd> 로 얼마나 너그럽게 볼지 정합니다.

패턴은 <kbd>P</kbd> 로 셋을 돌아가며 봅니다. 찾는 쪽을 고치는 자리는 `prepareSmall()`, 그리는 쪽을 고치는 자리는 `drawPattern()` 입니다. 둘은 서로 모릅니다. 그래서 한쪽만 바꿔도 나머지는 그대로 돕니다.

## 움직임까지 가면

- [OpenCVCamDemo](/downloads/processing/OpenCVCamDemo.pde) 숫자키 1에서 8로 흑백, 윤곽선, 이진화, 외곽선, 얼굴, Optical Flow, 배경 차분을 바꿔 가며 봅니다. 이름만 지나간 것들이 무엇인지 눈으로 볼 수 있습니다. OpenCV for Processing 라이브러리가 필요합니다.
- [OpticalFlow](/downloads/processing/OpticalFlow.pde) 수업에서 개념으로 들은 것입니다. 화면의 어느 자리가 어느 쪽으로 얼마나 움직였는지 벡터와 색으로 보여 줍니다.

## 안 될 때

- **`The package "blobDetection" does not exist`** → 라이브러리가 아직 없습니다. Manage Libraries 에서 **BlobDetection** 을 설치하고 Processing 을 껐다가 다시 켭니다.
- **「카메라 프레임 대기 중」에서 멈춘다** → 다른 앱이 카메라를 쓰고 있는지 봅니다. 화상회의 창이 열려 있으면 카메라를 놓아주지 않습니다.
- **아무것도 안 잡힌다** → 문턱값이 너무 높습니다. 아래 화살표로 내리면서 보세요. 반대로 방이 밝아 벽까지 잡히면 올립니다.
- **그 밖의 빨간 글자** → 콘솔의 메시지를 그대로 복사해 Cursor 에 붙여 넣고 무엇을 고치면 되는지 물어보세요. 화면 사진 한 장과 무엇을 하다가 그렇게 됐는지 한 줄이면 카톡으로 물어보셔도 됩니다.

## 어디서 왔나

실습은 3회차 이정섭 강사의 수업입니다. 여기 있는 단계별 스케치는 그 순서를 따라 운영자가 다시 쓴 것이고, 강사님이 쓰신 파일이 아닙니다.

밝은 덩어리를 찾는 일은 BlobDetection 라이브러리(Julien 'v3ga' Gachadoat)가 합니다. OpenCVCamDemo 와 OpticalFlow 는 OpenCV for Processing(Greg Borenstein, Florian Bruggisser)을 씁니다.