소리꽃 KeyBloom
소리꽃 KeyBloom 바로가기 ↗
소리꽃 KeyBloom 8
소리꽃 KeyBloom YouTube에서 보기 ↗
이 글은 소리꽃 KeyBloom 시리즈의 21번째 기록입니다. (총 46개)

오늘 한 일

  • 색 모드를 파티클·건반 공용 5종으로 통일 — 단색 / Min~Max 그라데이션 / 파스텔 / 무지개 / 팔레트
    • 이유: 원래 파티클은 그라데이션·무지개만, 건반은 단색·그라데·파스텔·무지개로 목록이 서로 달랐다. 같은 색 규칙을 한 곳에 모으고 목록을 맞추니 파티클은 단색·파스텔이, 건반은 팔레트가 새로 생김
  • 팔레트 모드 추가 — 색을 최대 8개 지정하면 노트마다 그 안에서 한 색씩, 직전 노트에 나온 색은 빼고 나옴. 파티클과 건반이 같은 노트에는 같은 색
    • 이유: Min~Max 두 색만으론 다채로움이 부족했다. 색을 직접 여러 개 골라 돌리고 싶었음. 스크럽하거나 다시 재생해도 같은 노트는 늘 같은 색이 나오게 함
  • 팔레트 편집기 — 색 칸을 4열로 배치, +로 추가·×로 제거(최소 1색)

막힌 부분

  • 팔레트에 색을 5개 넣었는데 1·2번 색만 계속 나왔다
    • 원인: 노트마다 색을 정하는 해시 계산이 큰 수 곱셈을 쓰는데, 그 값이 자바스크립트가 정확히 다룰 수 있는 정수 범위를 넘겨서 아랫자리가 뭉개졌다. 하필 그 아랫자리로 색 번호를 골라서 몇 색으로 쏠림
    • 해결: 정수 전용 곱셈으로 바꾸니 5색이 고르게 나옴
  • 광택을 올리면 파티클 주변에 네모가 생겼다
    • 원인: 팔레트·단색 모드의 색은 hex(#4a90d9)인데, 발광 글로우를 만드는 색 변환 함수가 hex를 처리 못 해서 가장자리가 투명이 아니라 불투명으로 남았다 → 스프라이트 전체가 색 네모
    • 해결: hex도 처리하는 기존 변환 함수로 교체(무지개·그라데는 원래부터 정상)
  • 색 칸을 4열로 바꾸니 패널 폭을 넘쳤고, 페이지에 스크롤바가 두 개 생겼다
    • 해결: 그리드를 패널 폭에 맞춰 칸이 줄어들게, 페이지 자체는 스크롤 안 되게 잠금(스크롤은 패널 안쪽만)

다음에 할 일

  • 고화질 4K 오프라인 인코딩
  • 합성음 피아노틱하게
  • Cloudflare Pages 배포


Series: 소리꽃 KeyBloom

1 소리꽃 KeyBloom 2 Rescene(리센느) ― Pretty Girl 3 히사이시 조 ― Spring 4 히사이시 조 ― 인생의 회전목마 5 히사이시 조 ― Summer 6 LiSA ― 홍련화(귀멸의 칼날) 7 DJ Okawari ― Flower Dance 8 안젤리크스페셜 ― The Queen 9 쇼팽 ― 녹턴 10 테일즈위버―Reminiscence 11 D.Gray-man―14番目ノ子守歌 12 이루마―Kiss in the rain 13 Bach―Invention No. 8 in F Major 14 소리꽃 KeyBloom 1 15 소리꽃 KeyBloom 2 16 소리꽃 KeyBloom 3 17 소리꽃 KeyBloom 4 18 소리꽃 KeyBloom 5 19 소리꽃 KeyBloom 6 20 소리꽃 KeyBloom 7 21 소리꽃 KeyBloom 8 읽는 중 22 소리꽃 KeyBloom 9 23 소리꽃 KeyBloom 10 24 소리꽃 KeyBloom 11 25 소리꽃 KeyBloom 12 26 소리꽃 KeyBloom 13 27 소리꽃 KeyBloom 14 28 소리꽃 KeyBloom 15 29 소리꽃 KeyBloom 16 30 소리꽃 KeyBloom 17 31 소리꽃 KeyBloom 18 32 소리꽃 KeyBloom 19 33 소리꽃 KeyBloom 20 34 소리꽃 KeyBloom 21 35 소리꽃 KeyBloom 22 36 소리꽃 KeyBloom 23 37 소리꽃 KeyBloom 24 38 소리꽃 KeyBloom 25 39 소리꽃 KeyBloom 26 40 소리꽃 KeyBloom 27 41 소리꽃 KeyBloom 28 42 소리꽃 KeyBloom 29 43 소리꽃 KeyBloom 30 44 소리꽃 KeyBloom 31 45 소리꽃 KeyBloom 32 46 소리꽃 KeyBloom 33

Suggested Posts