openmusic-xycontroller

A component for plotting (and getting!) X-Y input

Usage no npm install needed!

<script type="module">
  import openmusicXycontroller from 'https://cdn.skypack.dev/openmusic-xycontroller';
</script>

README

openmusic-xycontroller

A component for plotting (and getting!) X-Y input values

Install with NPM

Installation

npm install openmusic-xycontroller.

You need to load the module and then register it--it is not automatically registered!

require('openmusic-xycontroller').register('openmusic-xycontroller');

But you could even register it with other name, for example:

require('openmusic-xycontroller').register('mega-xycontroller');

Up to you.

Usage

Have a look at demo/main.js for an example that uses this component to control the volume and pitch of an oscillator in order to build a very simple theremin-like instrument.

Attributes

Both x and y go from -1 to 1. Values from outside this range won't be accepted and will be automatically clamped.

x

Determines the horizontal value.

Examples:

<openmusic-xycontroller x="-1"></openmusic-xycontroller> // left
<openmusic-xycontroller x="0"></openmusic-xycontroller> // center
<openmusic-xycontroller x="1"></openmusic-xycontroller> // right

y

Determines the vertical value.

Examples:

<openmusic-xycontroller y="-1"></openmusic-xycontroller> // bottom
<openmusic-xycontroller y="0"></openmusic-xycontroller> // center
<openmusic-xycontroller y="1"></openmusic-xycontroller> // top

Events

input

This event will be dispatched as the value changes due to user input. To listen for input events on a controller, add an event listener:

controller.addEventListener('input', function(ev) {
    var detail = ev.detail;
    // detail.x and detail.y contain the values you want
    console.log(detail.x, detail.y);
});