olos-eq.html

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

<link rel="import" href="../olos-param/olos-param.html">

<!--
olos-eq is a wrapper for the Web Audio API biquad filter node.

##### Example


@element olos-eq
@blurb 
@status alpha
@homepage http://olosmusic.github.io/olos-eq
-->
<dom-module id="olos-eq">
  <link rel="import" type="css" href="olos-eq.css">
  <template>

    <div class="olos-container">
      <div class="controls">
        <paper-input label="Freq (Hz)" id="freqSlider" type="number" preventinvalidinput="" committedValue="{{filterFreq}}" value="{{filterFreq}}"></paper-input>
        <paper-input id="qSlider" label="Q" type="number" preventinvalidinput="" committedValue="{{Q}}" value="{{Q}}" max="[[qMin]]" min="[[qMax]]" step="0.1"></paper-input>

        <paper-dropdown-menu id="filter-type-drop" label="Filter Type" icon="menu" class="dropdown-trigger">
          <paper-menu selected="[[filterType]]" on-iron-select="setType" attr-for-selected="label" class="menu dropdown-content">
              <paper-item label="lowpass"> lowpass </paper-item>
              <paper-item label="highpass"> highpass </paper-item>
              <paper-item label="bandpass"> bandpass </paper-item>
              <paper-item label="notch"> notch </paper-item>
          </paper-menu>
        </paper-dropdown-menu>

      </div>

      <div id="canvas_container" on-mousedown="mouseDown" on-mouseleave="mouseLeave" on-mouseenter="mouseEnter" on-mouseup="mouseUp" on-mousemove="mouseDragged">
      </div>

      <olos-param id="frequencyParam"></olos-param>
      <olos-param id="filterQParam"></olos-param>
    </div>
  </template>
  <script src="biquads.js"></script>
  <script>
    (function (params) {
      Polymer({
        is: 'olos-eq',
        properties: {
          biquad: {
            value: undefined,
            type: Object
          },
          Q: {
            type: Number,
            value: 10,
            observer: 'QChanged'
          },
          qMin: {
            type: Number,
            value: 0.1
          },
          qMax: {
            type: Number,
            value: 64
          },
          // p5 sketch
          _sketch: { value: null },
          filterFreq: {
            type: Number,
            value: 20,
            notify: true,
            observer: 'filterFreqChanged'
          },
          filterGain: {
            type: Number,
            value: 1
          },
          filterType: {
            type: String,
            value: 'lowpass'
            // observer: 'filterTypeChanged'
          },
          frequencyParam: {
            value: null,
            notify: true
          },
          filterQParam: {
            value: null,
            notify: true
          },
          // inputs and outputs
          inputAudio: {
            value: null,
            notify: true
          },
          output: {
            value: null,
            notify: true
          },
          plotGainMax: {
            type: Number,
            value: 40
          },
          plotGainMin: {
            value: function () {
              return -100;
            }
          },
          plotMode: {
            type: String,
            value: 'logarithmic'
          },
          publicMethods: {
            type: Array,
            value: function () {
              return ['set', 'freqUpdate'];
            }
          },
          rootfolder: {
            type: String,
            value: '../olos-eq/'
          }
          // set: { observer: 'setChanged' }
        },
        ready: function () {
          var self = this;
          self._audioContext = audioContext;
          self.biquad = self.inputAudio = self.output = audioContext.createBiquadFilter();
          self._initUI();
          self._initParams();
          self.set();
        },
        attached: function() {
          this._initCanvas();
        },

        _initUI: function() {
          this.freqSlider = this.$.freqSlider;
          this.qSlider = this.$.qSlider;
        },
        // set audioParams for olos-params
        // TO DO: generate these automatically ?
        _initParams: function () {
          var self = this;
          self.frequencyParam = this.$.frequencyParam;
          self.filterQParam = this.$.filterQParam;
          self.frequencyParam.scope = self;
          self.frequencyParam.callback = function(a, b) {
            self.freqUpdate(a, b)
          };
          self.filterQParam.scope = self;
          self.filterQParam.callback = function(a, b) {
            self.filterQUpdate(a, b)
          };
          self.filterQParam.audioParam = self.biquad.Q;
          self.frequencyParam.audioParam = self.biquad.frequency;
        },
        freqUpdate: function() {
          var values = arguments[0];
          var time = arguments[1];

          for (var i = 0; i < values.length; i++) {
            if (values[i] > 0) {

              // scale frequency according to the key olos is in
              this.freqSlider.value = olos.scaleStep(i);

              // apply new frequency to this oscillatorNode
              this.biquad.frequency.setValueAtTime(this.filterFreq, time);
            }
          }

        },
        filterQUpdate: function() {
          var values = arguments[0];
          var time = arguments[1];
          console.log(values);
        },

        set: function () {
          // this.filterFreq = 200;
          // this.filterType = 'lowpass';
          this.Q = 10;
          this.filterGain = 1;
          this.plotMode = 'logarithmic';
        },
        // this.sliderValue = this.eqNode.frequency.value;
        dispose: function () {
          var nodes = [
            'output',
            'eqNode'
          ];
          for (var i = 0; i < nodes.length; i++) {
            try {
              var node = self[nodes[i]];
              node.disconnect();
              node = null;
            } catch (e) {
            }
          }
        },
        setChanged: function () {
          this.drawWaveShape();
        },
        drawWaveShape: function () {
          var self = this;
          var sketch = self._p5;
          sketch.draw();
        },
        _initCanvas: function () {
          var self = this;
          self._sketch = function (sketch) {
            sketch.setup = function () {
              // var parentBB = self.$.canvas_container.getBoundingClientRect();
              //   parentWidth = parentBB.width,
              //   parentHeight = parentBB.height;
              //   console.log(parentWidth, parentHeight);
              sketch.bgColor = sketch.color(207, 241, 247);

              sketch.cnv = sketch.createCanvas(300, 255);
              sketch.cnv.mouseDragged = function() {
                console.log('mouse dragged');
              };

              sketch.background(sketch.bgColor);
              sketch.noFill();
              sketch.noLoop();
            };
            sketch.draw = function () {
              var peaks = calcBiquad(self.filterType, self.filterFreq, self.Q, self.filterGain, self.plotMode);
              sketch.clear();
              sketch.background(sketch.bgColor);
              sketch.strokeWeight(2);
              sketch.stroke(0, 0, 0);
              // draw curve
              sketch.beginShape();
              for (var i = 0; i < peaks.length; i++) {
                var x = sketch.map(i, 0, peaks.length, 0, sketch.width);
                var y = sketch.map(peaks[i][1], self.plotGainMin, self.plotGainMax, sketch.height, 0);
                sketch.vertex(x, y);
              }
              sketch.endShape();

              // draw filter node
              // var x = sketch.map(Math.log(self.filterFreq), Math.log(20), Math.log(audioContext.sampleRate / 2), 0, sketch.width);
              // var y = sketch.map(self.filterGain, self.plotGainMin, self.plotGainMax, sketch.height, 0);
              // sketch.ellipse(x, y, sketch.width / 10, sketch.height / 10);
            };
            sketch.onresize = function () {
              var compStyle = getComputedStyle(self);
              var w = Math.round( Number(compStyle.width.split('px')[0]) );
              var h = Math.round( Number(compStyle.height.split('px')[0]) );
              sketch.resizeCanvas(w, h);
            };
          };
          self._p5 = new p5(self._sketch, self.$.canvas_container);
        },
        resize: function () {
          this._p5.onresize();
        },
        filterFreqChanged: function () {
          var now = audioContext.currentTime;
          if (!this.biquad) return;
          this.biquad.frequency.cancelScheduledValues(now + 0.0001);
          this.biquad.frequency.exponentialRampToValueAtTime(this.filterFreq, now + 0.0001);
          if (typeof this._p5 !== 'undefined') {
            this._p5.draw();
          }
        },
        QChanged: function () {
          var now = audioContext.currentTime;
          if (!this.biquad) return;
          this.biquad.Q.linearRampToValueAtTime(this.Q, now + 0.0001);
          if (typeof this._p5 !== 'undefined') {
            this._p5.draw();
          }
        },
        setType: function(e) {
          if (!this.biquad) return;
          var sel = e.target.selected;
          this.filterType = sel;
          this.biquad.type = this.filterType;
          this._p5.draw();
        },
        // filterTypeChanged: function () {
        //   this.set('biquad.type', this.filterType);
        // },
        frequencyParamChanged: function () {
          if (this.frequencyParam[this.frequencyParam.length - 1] instanceof AudioNode) {
            this.modulator = this.frequencyParam[this.frequencyParam.length - 1];
            this.modulator.connect(this.biquad.frequency);
          }
        },
        // for (var i = 0; i < this.frequencyParam.length; i++) {
        //   if (this.frequencyParam[i] > 0) {
        //     this.freqSliderValue = nx.mtof( this.frequencyParam[i] );
        //     this.setFreq();
        //   }
        // }
        //////////////////////
        // mouse events
        mouseUp: function (e) {
          var self = this;
          self._dragging = false;
        },
        mouseDown: function (e) {
          var self = this;
          self._dragging = true;
        },
        mouseDragged: function (e) {
          var self = this;
          if (self._dragging) {
            var freq;
            var q;

            // factor in zoom level if olos exists
            var zoomFactor = window.olos ? olos._zoom : 1;
            var mX = self._p5.mouseX * 1/zoomFactor;
            var mY = self._p5.mouseY * 1/zoomFactor;

            if (self.plotMode === 'linear') {
              freq = self._p5.map(mX, 0, self._p5.width, 20, audioContext.sampleRate / 2);
              q = self._p5.constrain( self._p5.map(mY, 0, self._p5.height, self.qMax, self.qMin ), self.qMin, self.qMax );

            } else {
              // scale values logarithmically: http://stackoverflow.com/questions/846221/logarithmic-slider
              var minp = 0;
              var maxp = self._p5.width;
              var minv = Math.log(20);
              var maxv = Math.log(audioContext.sampleRate / 2);
              // calculate adjustment factor
              var _scale = (maxv - minv) / (maxp - minp);
              freq = Math.exp(minv + _scale * (mX - minp));

              // same for Q
              minp = self._p5.height;
              maxp = 0;
              minv = Math.log(self.qMin);
              maxv = Math.log(self.qMax);
              _scale = (maxv - minv) / (maxp - minp);
              q = Math.exp(minv + _scale * (mY - minp));
            }
            freq = self._p5.constrain(freq, 20, audioContext.sampleRate / 2);
          }
          if (typeof freq !== 'undefined') {
            self.filterFreq = freq;
            self.Q = q;
          }
        },
        mouseEnter: function (e) {
          this._p5.loop();
        },
        // var self = this;
        // self._dragging = false;
        mouseLeave: function (e) {
          this._p5.noLoop();
        }  // var self = this;
           // self._dragging = false;
      });
    }());
  </script>
</dom-module>