← Hackathon

Play the Picture — 연주로 완성하는 그림

@mungjin01

기획 배경

악기를 연주할 때 음정을 정확히 맞추면 의도한 그림이 정상적으로 그려지고, 음정을 잘못 내거나 흔들리면 그 순간 화면에 그려지는 선과 형태도 함께 일그러지는 프로그램을 기획했습니다.

단순히 “지금 음정이 맞다/틀리다”를 보여주는 튜너가 아니라, 연주 자체가 그림을 만들어내는 인터랙티브한 시각화 도구를 만드는 것이 목표입니다. 연주가 안정적이면 깔끔한 결과물이 나오고, 중간에 삐끗한 부분이 있으면 그 구간만 삐뚤어지거나 흐트러져 최종적으로는 연주 실수가 그대로 반영된 재미있는 그림이 남도록 구성했습니다.

핵심 기능 및 동작 흐름

악기 선택 또는 마이크 입력 허용 ➔ 기준 멜로디/음정 설정 ➔ 연주 시작 ➔ 실시간 음정 분석 ➔ 음정 정확도에 따라 그림 생성 ➔ 연주 종료 ➔ 최종 그림 확인 및 저장

ThorVG 활용

ThorVG를 이용해 음정 데이터를 실시간 벡터 그래픽으로 렌더링합니다.

  • 실시간 드로잉: 연주가 진행되는 동안 선, 곡선, 도형이 계속 이어지며 하나의 그림 생성
  • 정확도 반영: 음정이 맞으면 균형 잡힌 선과 형태를 유지하고, 틀리면 선이 흔들리거나 찌그러지도록 표현
  • 시각 효과 적용: Blur, Shadow, Opacity 등을 활용해 음정이 불안정한 순간을 더 두드러지게 표현
  • 애니메이션 구성: 연주 흐름에 따라 그림이 자연스럽게 확장되도록 Path와 Transform 활용
  • 결과물 저장: 연주가 끝난 뒤 완성된 그림을 이미지로 저장

기대 결과

같은 그림을 그리는 구조라도 연주 정확도에 따라 결과물이 매번 달라집니다. 즉, 정확한 연주는 정돈된 그림, 실수가 섞인 연주는 일부가 뒤틀린 그림으로 남기 때문에, 연습 과정 자체를 시각적으로 보여주면서 재미 요소도 줄 수 있습니다.

댓글

이슈 원문