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!
Top comments (19)
OMG, I got scared when I first clicked 😳 I had the volume up and didn't expect codepen to speak with me 😂
Did exactly the same...but I even checked my volume before and it was only at 30 - still jumped when I clicked and I was expecting it 🤣
@madsstoumann one quick fix - account for window scroll position on the pad, if you scroll down to the other controls to change the pattern etc. the touch target is out on the pad.
Had a lot of fun playing with it! ❤🦄
Haha, yeah, the default values are the loudest possible! As I write in the article, I haven't looked into scroll-stuff like
pageYOffsetyet, because I'm considering changing the script to usingoffsetYinstead ofclientY, so I don't have to worry about nested scrolling etc. It's still work-in-progress, though!Haha, yes it can be quite noisy! 😂
Wow, great project! I remember some friends who had a lot of fun playing around with a real Kaossilator, so thanks for bringing back memories. I'm very curious to see how you approached this, will jump into the code when I find some spare time.
Thank you! It's "Two projects in one". One is the XY-controller, the other the Web Audio-stuff. I use a single oscillator, where you change the frequency on the y-axis, and the filter on the x-axis.
Lol I played with this for like 10 minutes. This is so cool. What 🔥🔥🔥
Thank you!
👏 Really cool, always wanted a Korg Kaossilator... I guess I can now tick that off!!!!
Thx!
Super nice project! Very cool!
Thanks!
This is amazing!
Thank you!
Absolutely love it. I'm about as good using it as I was with a Stylophone though ha.
Thx!
It just doesn't stop the sound when using 2 fingers
It doesn't use multi-gesture, but thanks for letting me know.
Thx! I really want to do more stuff with the web audio api, it’s so cool.