Minesweeper, the obvious thing to build with a launchpad and WebMIDI

on YouTube ↗30m

" summary

Builds an actual 8x8 Minesweeper on a Launchpad mini using the browser WebMIDI API, sending MIDI bytes (note on 144, control change 176) and working around the device’s limited red/green color space. Implements flag mode via a side column, shows adjacent counts with top-row control changes, fits in about 160 lines of copy‑pasteable JavaScript, runs in Chromium (and Android with USB OTG), and the full source lives as pad‑sweeper on GitHub.

AI-written summary · about

" chapters (14)

1. 0:00Introduction
2. 1:05Launchpad Mini device
3. 2:30MIDI protocol basics
4. 6:44Launchpad LED control
5. 10:38Porting Minesweeper challenges
6. 12:26Setting up WebMIDI in the browser
7. 16:21Launchpad display init
8. 18:09Button input handling
9. 20:58Minesweeper grid display
10. 23:09Flagging mines and modes
11. 25:17Adjacent mine counts
12. 26:46Finalizing implementation
13. 27:51Live demo and code walkthrough
14. 28:54Alternative uses

" related talks

• 57mMake More Than Music with Tiny Computers, JavaScript and MIDIGeorge Mandis · HolyJS 2017 Piter
• 29mMIDI A New Dimension in Controlling Your BrowserArmagan Amcalar · You Gotta Love Frontend 2019
• 39mBuild Fast and Smooth Web Apps from Feature Phone to DesktopMariko Kosaka · Google I/O 2019
• 20mLook What You MIDI Me Do!Rachel White · JSConf Hawaiʻi 2020
• 44mTiny Computers, JavaScript and MIDIGeorge Mandis · JSFoo 2017
• 23mLet's talk about MIDIRuth John · RuhrJS 2016
• 26mLearning to Read Music with the Web MIDI APIJan Kleinert, Ryan Jarvinen · Node+JS Interactive 2019
• 40mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · Copenhagen Developers Festival 2023