Kaboom Draw

프로그래밍 초보자에게 코드와 출력 사이의 피드백 루프는 매우 번거로운 과정이다. 코드를 수정할 때마다 매번 실행 버튼을 눌러 결과를 확인해야 하기 때문이다.

이 실험은 CodeMirror 6의 확장성과 Kaboom 게임 라이브러리를 결합하여, Bret Victor의 'Learnable Programming' 개념을 구현하는 것을 목표로 한다.

주요 구현 방식은 다음과 같다:

• CodeMirror 6 확장: 마우스 클릭과 드래그를 통해 코드 내 임의의 값을 조작할 수 있는 기능을 제공한다.
• 실시간 시각적 피드백: Kaboom의 onDraw() 이벤트 내에서 코드를 매 프레임 재평가함으로써 지연 없는 **라이브 리로딩(Live-reloading)**을 구현한다.

사용자는 다음과 같은 직관적인 인터랙션을 통해 코드를 제어할 수 있다:

• Alt + 드래그: 숫자 변경 및 vec2(x, y)를 통한 객체 위치 이동
• Alt + 클릭: rgb(r, g, b) 색상 선택기 호출
• 스니펫 및 드래그 앤 드롭: 도형 생성 및 이미지 스프라이트 삽입