olos-piano.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../iron-dropdown/iron-dropdown.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-menu/paper-menu.html">
<link rel="import" href="../paper-input/paper-input.html">

<!-- <link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icons/av-icons.html"> -->

<!--
olos-piano, built with NexusUI keyboard
http://nexusosc.com/
New BSD License by Jesse Allison, Yemin Oh, Sebastien Piquemal, Andrew Bernstein, Ben Taylor

Equal temperament by default. But you can play with the tuning and intonation.
More info on that: http://www.kylegann.com/tuning.html

##### Example


@element olos-piano
@blurb 
@status alpha
@homepage 
-->
<!-- to do: check to see if loaded, otherwise load -->
<!-- <script src="../nexusUI/dist/nexusUI.js"type="text/javascript"></script> -->
<dom-module id="olos-piano">
  <link rel="import" type="css" href="olos-piano.css">
  <template>

    <div id="container" class="olos-container">
    </div>

    <div style="position:relative; left:5%; top:110%">
      <paper-dropdown-menu id="scaleNames" class="dropdown-trigger" label="scale">
        <paper-menu class="menu dropdown-content" id="scaleMenu" on-iron-select="_setScale" attr-for-selected="label" style="color:black;">
        </paper-menu>
      </paper-dropdown-menu>

        <!-- <input is="core-input" type="number" preventinvalidinput="" committedValue="{{rootNote}}" value="{{rootNote::input}}" style="width:50px"> -->
      <paper-input label="Root Note" type="number" preventinvalidinput="" committedvalue="{{rootNote}}" value="{{rootNote::input}}" style="width:50px; display:inline-block;"></paper-input>

    </div>
  </template>
  <script>
    // helper
    // via http://stackoverflow.com/questions/4025893/how-to-check-identical-array-in-most-efficient-way
    function arraysEqual(arr1, arr2) {
      if (arr1.length !== arr2.length)
        return false;
      for (var i = arr1.length; i--;) {
        if (arr1[i] !== arr2[i])
          return false;
      }
      return true;
    }
    (function (params) {
      Polymer({
        is: 'olos-piano',
        properties: {
          _upTick: {
            type: Boolean,
            value: false
          },
          clockParam: { value: null },
          height: {
            type: Number,
            value: 55
          },
          midiScales: {
            type: Object,
            value: function () {
              return {
                'custom': [],
                'major': [
                  0,
                  2,
                  4,
                  5,
                  7,
                  9,
                  11
                ],
                'diminished': [
                  0,
                  2,
                  3,
                  5,
                  6,
                  8,
                  9,
                  11
                ],
                'minor': [
                  0,
                  2,
                  3,
                  5,
                  7,
                  8,
                  10
                ],
                'melodic minor': [
                  0,
                  2,
                  3,
                  5,
                  7,
                  9,
                  11
                ],
                'pentatonic major': [
                  0,
                  2,
                  4,
                  7,
                  9
                ],
                'blues': [
                  0,
                  3,
                  5,
                  6,
                  7,
                  10
                ],
                'pentatonic minor': [
                  0,
                  3,
                  5,
                  7,
                  10
                ],
                'whole tone': [
                  0,
                  2,
                  4,
                  6,
                  8,
                  10
                ],
                'flamenco': [
                  0,
                  1,
                  3,
                  4,
                  5,
                  7,
                  8,
                  10
                ],
                'chromatic': [
                  0,
                  1,
                  2,
                  3,
                  4,
                  5,
                  6,
                  7,
                  8,
                  9,
                  10,
                  11
                ],
                'augmented': [
                  0,
                  3,
                  4,
                  7,
                  8,
                  11
                ],
                'mixolydian': [
                  0,
                  2,
                  4,
                  5,
                  7,
                  9,
                  10
                ]
              };
            }
          },
          // nexusUI multi piano
          nexusEl: {
            type: Object,
            value: null
          },
          // equal temperament by default
          // publicMethods: {
          //   type: Array,
          //   value: function () {
          //     return ['setScale'];
          //   }
          // },
          /**
           *  Root note at far left of piano, as MIDI value.
           *
           *  Equivalent to nexusEl.midibase.
           *
           *  Also serves as olos.rootNote.
           *  
           *  @property rootNote
           *  @type {Number}
           */
          rootNote: {
            type: Number,
            value: 48,
            observer: 'rootNoteChanged'
          },
          rootNotefolder: {
            type: String,
            value: '../olos-piano/',
            notify: true
          },
          scale: {
            value: [0, 2, 4, 7, 9, 10],
            type: Array
          },
          /**
           *  Options: 'equal', 'just'
           *  
           *  @property tuning
           *  @type String
           */
          tuning: {
            type: String,
            value: 'equal'
          },
          width: {
            type: Number,
            value: 200
          }
        },
        created: function() {
          this.nexusEl = this.piano = nx.add('keyboard');
          this.nexusEl.colors.border = 'rgba(121, 225, 178, 0.5)';
        },
        ready: function () {
          var self = this;
          // nexus element
          Polymer.dom(document.body).removeChild(this.nexusEl.canvas);
          // new
          Polymer.dom(this.$.container).appendChild(this.nexusEl.canvas);
          self.nexusEl.canvas.style.setProperty('width', '100%');
          self.nexusEl.canvas.style.setProperty('height', '100%');
          this.set('nexusEl.canvas.width', this.width);
          this.set('nexusEl.canvas.height', this.height);
          this.$.container.style.setProperty('width', this.width);
          this.$.container.style.setProperty('height', this.height);
          this.setup();
          this.output = [0];
        },
        attached: function() {
          var self = this;
          self.resize();
          self.nexusEl.init();
          self.rootNoteChanged();


          setTimeout(function() {
            self.updateScale();
          }, 400);

        },
        // these settings can be tweaked in the editor
        setup: function () {
          var self = this;
          self.nexusEl.mode = 'sustain';
          self.nexusEl.octaves = 1;
          // this.nexusEl.canvas.onmousemove = function(e) {
          //   console.log(window.getComputedStyle(e.target));
          // }
          self.nexusEl.on('*', function (e) {
            self.updateScale();
          });
          self._setupScales();
          setTimeout(function () {
            olos.piano = self;
            olos.toF = self.numToFreq.bind(self);

            olos.scaleStep = self.stepToFreq.bind(self);
            // pentatonic by default, which is 5th item in the scale menu
            self.$.scaleMenu.selected = 'pentatonic';
          }, 450);
        },
        resize: function () {
          this.set('nexusEl.width', this.$.container.offsetWidth);
          this.set('nexusEl.height', this.$.container.offsetHeight);
          this.set('nexusEl.canvas.width', this.$.container.offsetWidth);
          this.set('nexusEl.canvas.height', this.$.container.offsetHeight);
          this.nexusEl.canvas.style.setProperty('width', this.$.container.offsetWidth);
          this.nexusEl.canvas.style.setProperty('height', this.$.container.offsetHeight);
          this.set('nexusEl.actualWid', this.$.container.offsetWidth);
          this.set('nexusEl.actualHgt', this.$.container.offsetHeight);
          this.nexusEl.draw();
        },
        rootNoteChanged: function () {
          if (typeof olos == 'undefined') return;

          this.rootNote = Number(this.rootNote);
          this.set('nexusEl.midibase', this.rootNote);
          var offset = this.rootNote % 12;

          var prevScale = olos.scale;

          var newKeyPattern = [];
          var origKeyPattern = [
            'w',
            'b',
            'w',
            'b',
            'w',
            'w',
            'b',
            'w',
            'b',
            'w',
            'b',
            'w'
          ];
          for (var i = 0; i < origKeyPattern.length; i++) {
            newKeyPattern[i] = origKeyPattern[(i + offset) % origKeyPattern.length];
          }
          this.set('nexusEl.keypattern', newKeyPattern);
          this.nexusEl.init();

          if (typeof olos !== 'undefined') olos.rootNote = this.rootNote;
          // draw scale
          this._drawScale(prevScale);
        },
        updateScale: function () {
          var rootNote = this.rootNote;
          var _scale = [];

          for (var i = 0; i < this.nexusEl.keys.length; i++) {
            if (this.nexusEl.keys[i].on) {
              _scale.push(i);
            }
          }
          var scaleMatch = 0;
          // see if custom scale matches any scales. If so select it, otherwise set to custom
          var scaleNames = Object.keys(this.midiScales);
          var scaleMatch = scaleNames.length - 1;
          while (!arraysEqual(_scale, this.midiScales[scaleNames[scaleMatch]]) && scaleMatch > 0) {
            scaleMatch--;
          }
          if (scaleMatch > 0) {
            this.set('$.scaleMenu.selected', scaleNames[scaleMatch]);
          } else {
            this.set('midiScales.custom', _scale);
            this.set('$.scaleMenu.selected', 0);
          }
          olos.scale = this.scale = _scale;
          olos.rootNote = rootNote;
        },
        _setScale: function (e, detail, selection) {
          var scaleName = e.target.selected;
          var scale = this.midiScales[scaleName];
          olos.scale = this.scale = scale;
          this._drawScale(scale);
        },
        _drawScale: function (scale) {
          for (var i = 0; i < this.nexusEl.keys.length; i++) {
            if (scale.indexOf(i) > -1) {
              this.set('nexusEl.keys' + ('.' + i) + '.on', true);
            } else {
              this.set('nexusEl.keys' + ('.' + i) + '.on', false);
            }
          }
          this.nexusEl.draw();
        },
        // UI
        _setupScales: function () {
          var scaleNames = Object.keys(this.midiScales);

          for (var i = 0; i < scaleNames.length; i++) {
            var item = document.createElement('paper-item');
            Polymer.dom(item).setAttribute('label', scaleNames[i]);
            Polymer.dom(item).innerHTML = scaleNames[i];
            Polymer.dom(this.$.scaleMenu).appendChild(item);
          }
        },
        _draw: function () {
        },
        // to do
        dispose: function () {
          var self = this;
          // erase nexus element
          self.nexusEl.destroy();
        },
        // calculate frequencies from a midi scale
        // midiToFreq
        mtof: function (midiVal) {
          var rootNote = this.rootNote || 69;
          var frequency;
          var a440midi = 69;
          function eqlTemperament(midiVal) {
            var stepsFromA440 = midiVal - a440midi;
            // equal temperament equation based on 12th rootNote of 2
            freq = 440 * Math.pow(2, stepsFromA440 / 12);
            return freq;
          }
          if (this.tuning !== 'equal') {
            // just intonation ratios:
            var twelveSteps = [
              1 / 1,
              16 / 15,
              9 / 8,
              6 / 5,
              5 / 4,
              4 / 3,
              Math.sqrt(2),
              3 / 2,
              8 / 5,
              5 / 3,
              9 / 5,
              15 / 8,
              2 / 1
            ];
            var stepsFromRoot = midiVal - rootNote;
            var octavesFromRoot = Math.floor(stepsFromRoot / 12);
            var rootNoteFreq = eqlTemperament(rootNote);
            var arrayPosition = stepsFromRoot % 12;
            if (arrayPosition < 0) {
              arrayPosition = arrayPosition + 12;
            }
            var freq = rootNoteFreq * twelveSteps[arrayPosition];
            frequency = freq * Math.pow(2, octavesFromRoot);
          } else {
            frequency = eqlTemperament(midiVal);
          }
          return frequency;
        },
        // convert a number to frequency based on its distance from the rootNote in half-steps
        numToFreq: function (val) {
          return this.mtof(val + this.rootNote);
        },
        pitchToPlaybackRate: function (step) {
          return this.mtof(step) / this.mtof(this.rootNote);
        },
        // convert a number to frequency based on its position in global scale, and dist from the rootNote in scale position
        stepToFreq: function (val) {
          var sign = val < 0 ? -1 : 1;
          val = Math.abs(val);
          var relativeVal = val % this.scale.length;
          var octavesFromRoot = Math.floor(val / this.scale.length) * sign;
          return this.numToFreq(this.scale[relativeVal] * sign + octavesFromRoot * 12);
        }
      });  // from mtof
           // for (var i = 0; i < olos.scale.length; i++) {
           //   var stepsAboveA440 = olos.scale - a440;
           //   var frequency = 440 * Math.pow(2, stepsAboveA440/12);
           //   freqs.push(frequency);
           // }
           // olos.freqs = freqs;
    }());
  </script>
</dom-module>