"Building a Music Learning Game with Elm, Web MIDI, and SVG Animation"
summary
A browser game that teaches piano notes using Web MIDI input, an Elm front end and SVG animation is actually built and playable; MIDI note numbers arrive via a single port integer, the UI animates with an onAnimationFrame loop and an Elm animation library, and sprite animation uses SVG viewBox slicing. A solved piece is a projectile-motion solver that computes initial velocity so a character reliably jumps to arbitrary targets; current limits: about ten visualized keys, occasional scroll/teleport bugs and an infinite-jump edge case.
AI-written summary · about
chapters (12)
- 0:00Introduction and motivation
- 3:01Introducing Elm and MIDI
- 6:34First Elm MIDI prototype
- 8:04Fixing impossible states
- 9:12Adding SVG animations
- 10:39Sprite sheets and SVG
- 12:05Learning animation basics
- 13:32Linear interpolation and easing
- 16:23Realistic jumping physics
- 18:09Projectile motion math
- 19:54Demo of the game
- 22:42Current progress and next steps
