OP-Z TETRIS for Web Browser (MIDI Tetris)

I wrote a Javascript MIDI parser library for the OP-Z (https://github.com/nbw/opz) to use in conjunction with the Web MIDI API.

One of the examples I wrote was Tetris:

https://tetris.nathanwillson.com/

I hope you enjoy it. I will be posting more projects I’ve made here soon.

I wrote this library because I don’t want to write Unity for make videos and I don’t want to spend a ton of money on a DMX lighting rig, but I do have an external monitor and I can program. So voila.

Feedback is welcome. If you’re a programmer with some js chops, make something sweet!

7 Likes

Nice - my ‘day job’ is JS coding so this is a nice bit of inspiration for doing something with the Z.

Did have an issue on my machine with 5 midi devices - is only listing 1 device. Had a look at your code, and it is because var item = document.createElement(‘li’); is outside the loop so get you only ever get one midi device listed :slight_smile:

1 Like

thanks! @husker pushed up a fix. I don’t have multiple midi devices to test with so hopefully it works.

yep, works now :slight_smile:

1 Like

Works great! By the way, with a Mac, you don’t need to plug the OP-Z at all, it works great over Bluetooth Midi too, just connect it through the “Audio Midi Setup” control panel.

1 Like

Oh I had no idea, but that makes sense. Gonna try that later. Thanks for the tip.

Time for OP-Z Tetris from my bed.

Yeah, it’s super not obvious: “Audio Midi Setup” → “Window / Show Midi Studio” → “Midi Studio / Open Bluetooth Configuration…”

Then you should see the OP-Z in the list when you press the back button and… magic, you’re set!

Bonus: that’s also how you use the OP-Z app on the Mac :slight_smile:

I’m curious, what other applications do you have in mind to control with the op-z?

Sticking with the game idea I was thinking of this gameboy emulator: https://github.com/torch2424/wasmboy, but it would likely be run locally. I tried it at one point, but wasn’t successful at the time. I really wanted to play pokemon with the op-z.

I’ve also considered making a drawing app with it. That one I haven’t started code-wise but I’ve thought out some of the details.

I have a few other ideas, but nothing I can announce yet with confidence. There are obviously tons of music related ideas out there, but I think it’s fun to try and think a bit outside the box and look elsewhere. Mind you, at least for OP-Z project one is limited to the web browser so.

Wow, sounds cool! Looking forward to these! Since it runs in the browser, maybe something web-related would be cool… e.g. a sort of photomatic app where you can specify a url to fetch images from that website and then control them via op-z tracks… maybe even a different url per track? Would something like this be possible?

voila: https://sketch.nathanwillson.com/

As far the picture idea goes, that would totally be possible. I thought about that too. The using a URL would a be a good touch. Plus then you could share your creation and the assets (photos) would be somewhere in internet already (yay no bandwidth fees!). I’ll keep it in mind as a project.

1 Like