소리꽃 KeyBloom 1
소리꽃 KeyBloom
바로가기 ↗
소리꽃 KeyBloom
YouTube에서 보기 ↗
이 글은 소리꽃 KeyBloom 시리즈의 7번째 기록입니다. (총 21개)
오늘 한 일
- 소리꽃 KeyBloom MVP 제작
- 환경 셋업 — Vite + TypeScript + Canvas 2D, 설계 원칙(건반 로직/렌더 분리, 상대좌표, 파티클 로직/모양 분리)을 폴더 경계로 반영
- MIDI 파싱(@tonejs/midi) + 여러 트랙 병합/선택 UI
- 88건반 렌더 + 재생 타이밍에 눌림 동기화, 좌표는 화면 비례(fraction)로 두고 픽셀 변환은 렌더 단계에서만
- 파티클 모션을 데이터 주도로 — 모션마다 물리값(속도·중력·감쇠·좌우 흔들림·수명)으로 환원하고 update는 하나의 제네릭 물리로 통일. 피어오름·방사형 개화·상승 후 흐트러짐·나선형(토네이도)·분수 추가
- 불꽃(폭죽)은 2단계 — 노트당 포탄이 솟았다가 정점에서 터져 방사형 불똥을 뿌리고 낙하
- 색 = velocity 편향 랜덤 lerp(세게 칠수록 max 색 쪽), 모양 다중 선택(랜덤), 광택(스페큘러 하이라이트 + 광택 높으면 가산 글로우)
- 오디오 — 사용자 오디오 파일 있으면 시작점 맞춰 싱크 재생, 없으면 오실레이터 합성음
- 대량 파티클 렌더 최적화 — 파티클마다 fillText 대신 미리 색 틴트한 스프라이트를 drawImage
- 영상 저장 — canvas.captureStream + MediaRecorder로 WebM 추출, 해상도(720/1080/2160)·배경(블랙/투명)·오디오 옵션
막힌 부분
- 개수를 최대로 올리면 밀집 구간에서 버벅였다 — 원인은 파티클마다
ctx.font재설정 +fillText(글리프 렌더)가 비쌌던 것. 모양·색을 미리 스프라이트로 구워drawImage로 찍는 방식으로 바꿔 크게 개선(미세한 버벅임은 남아 다음 과제로) - 나선형이 처음엔 회전이 너무 빨랐다 — 흔들림 주파수를 낮추되, 회전만 줄이면 위로 가는 양도 줄어 보여 상승 속도는 따로 올려 분리
- 선명도 슬라이더가 방향이 반대로 되어 있었다 —
jitter = 1 - 선명도로 짰다가, 실제 체감과 맞게jitter = 선명도로 뒤집음
다음에 할 일
- 성능 최적화 — 밀집 구간 버벅임. 파티클 update/렌더 병목 프로파일링, note-on·눌림 계산을 O(N)/frame에서 정렬 노트 커서로 줄이기 등
- 큐(Cue) 기능 — 타임라인 특정 지점부터 색·모양 등 파라미터를 다르게 적용하는 구간별 오버라이드
- Cloudflare Pages 배포
Series: 소리꽃 KeyBloom
1
｜
소리꽃 KeyBloom
2
｜
Rescene(리센느) ― Pretty Girl
3
｜
히사이시 조 ― Spring
4
｜
히사이시 조 ― 인생의 회전목마
5
｜
LiSA ― 홍련화(귀멸의 칼날)
6
｜
히사이시 조 ― Summer
7
｜
소리꽃 KeyBloom 1
읽는 중
8
｜
소리꽃 KeyBloom 2
9
｜
소리꽃 KeyBloom 3
10
｜
소리꽃 KeyBloom 4
11
｜
소리꽃 KeyBloom 5
12
｜
소리꽃 KeyBloom 6
13
｜
소리꽃 KeyBloom 7
14
｜
소리꽃 KeyBloom 8
15
｜
소리꽃 KeyBloom 9
16
｜
소리꽃 KeyBloom 10
17
｜
소리꽃 KeyBloom 11
18
｜
소리꽃 KeyBloom 12
19
｜
소리꽃 KeyBloom 13
20
｜
소리꽃 KeyBloom 14
21
｜
소리꽃 KeyBloom 15