I used to carry my “Korg Kaossilator” around with me. For those of you who don't know what that is – it's a small, portable synthesizer, with a large, touch-based XY-controller:

This week, I've been working on a generic XY-controller – for both pointer-devices and keyboards:

It was meant to be for a “Color Picker”, but I ended up making this instead:

I'm working on a larger article about XY-controllers, where I will showcase the “Color Picker” – but for now, please have fun with the simplified, JavaScript-version of “Kaossilator”!

The XY-controller is still work-in-progress, so I haven't added scroll-position-fixes to the script yet. Please open it in fullscreen-mode on Codepen, to avoid scrolling within the iframe.

Keyboard-user?

The XY-Controller can also be operated with a keyboard.

When the point-ring has focus, press Space to toggle the sound on or off, and use the Arrow-keys to move around.

Press and hold Shift while using the Arrow-keys, to move the point-ring with a larger increment.

Pick the Sine-wave (first) and “allpass”, if you want to play the theme from “Doctor Who” 😁

Happy jamming!