vibrato.js

Table of Contents

  1. accidental.js
  2. annotation.js
  3. articulation.js
  4. barnote.js
  5. beam.js
  6. bend.js
  7. boundingbox.js
  8. canvascontext.js
  9. clef.js
  10. clefnote.js
  11. crescendo.js
  12. curve.js
  13. dot.js
  14. flow.js
  15. vexflow_font.js
  16. formatter.js
  17. fraction.js
  18. frethandfinger.js
  19. ghostnote.js
  20. glyph.js
  21. gracenote.js
  22. gracenotegroup.js
  23. keymanager.js
  24. keysignature.js
  25. modifier.js
  26. modifiercontext.js
  27. music.js
  28. note.js
  29. notehead.js
  30. ornament.js
  31. pedalmarking.js
  32. raphaelcontext.js
  33. renderer.js
  34. stave.js
  35. stavebarline.js
  36. staveconnector.js
  37. stavehairpin.js
  38. staveline.js
  39. stavemodifier.js
  40. stavenote.js
  41. staverepetition.js
  42. stavesection.js
  43. stavetempo.js
  44. stavetext.js
  45. stavetie.js
  46. stavevolta.js
  47. stem.js
  48. stemmablenote.js
  49. stringnumber.js
  50. strokes.js
  51. svgcontext.js
  52. tables.js
  53. tabnote.js
  54. tabslide.js
  55. tabstave.js
  56. tabtie.js
  57. textbracket.js
  58. textdynamics.js
  59. textnote.js
  60. tickable.js
  61. tickcontext.js
  62. timesignature.js
  63. timesignote.js
  64. tremolo.js
  65. tuning.js
  66. tuplet.js
  67. vex.js
  68. vibrato.js
  69. voice.js
  70. voicegroup.js

VexFlow - Copyright (c) Mohit Muthanna 2010.

Description

This class implements vibratos.

Vex.Flow.Vibrato = (function() {
  function Vibrato() { this.init(); }
  Vibrato.CATEGORY = "vibratos";

  var Modifier = Vex.Flow.Modifier;

Static Methods

Arrange vibratos inside a ModifierContext.

  Vibrato.format = function(vibratos, state, context) {
    if (!vibratos || vibratos.length === 0) return false;

Vibratos are always on top.

    var text_line = state.top_text_line;
    var width = 0;
    var shift = state.right_shift - 7;

If there’s a bend, drop the text line

    var bends = context.getModifiers(Vex.Flow.Bend.CATEGORY);
    if (bends && bends.length > 0) {
      text_line--;
    }

Format Vibratos

    for (var i = 0; i < vibratos.length; ++i) {
      var vibrato = vibratos[i];
      vibrato.setXShift(shift);
      vibrato.setTextLine(text_line);
      width += vibrato.getWidth();
      shift += width;
    }

    state.right_shift += width;
    state.top_text_line += 1;
    return true;
  };

Prototype Methods

  Vex.Inherit(Vibrato, Modifier, {
    init: function() {
      var superclass = Vex.Flow.Vibrato.superclass;
      superclass.init.call(this);

      this.harsh = false;
      this.position = Vex.Flow.Modifier.Position.RIGHT;
      this.render_options = {
        vibrato_width: 20,
        wave_height: 6,
        wave_width: 4,
        wave_girth: 2
      };

      this.setVibratoWidth(this.render_options.vibrato_width);
    },

    setHarsh: function(harsh) { this.harsh = harsh; return this; },
    setVibratoWidth: function(width) {
      this.vibrato_width = width;
      this.setWidth(this.vibrato_width);
      return this;
    },

    draw: function() {
      if (!this.context) throw new Vex.RERR("NoContext",
        "Can't draw vibrato without a context.");
      if (!this.note) throw new Vex.RERR("NoNoteForVibrato",
        "Can't draw vibrato without an attached note.");

      var start = this.note.getModifierStartXY(Vex.Flow.Modifier.Position.RIGHT,
          this.index);

      var ctx = this.context;
      var that = this;
      var vibrato_width = this.vibrato_width;

      function renderVibrato(x, y) {
        var wave_width = that.render_options.wave_width;
        var wave_girth = that.render_options.wave_girth;
        var wave_height = that.render_options.wave_height;
        var num_waves = vibrato_width / wave_width;

        ctx.beginPath();

        var i;
        if (that.harsh) {
          ctx.moveTo(x, y + wave_girth + 1);
          for (i = 0; i < num_waves / 2; ++i) {
            ctx.lineTo(x + wave_width, y - (wave_height / 2));
            x += wave_width;
            ctx.lineTo(x + wave_width, y + (wave_height / 2));
            x += wave_width;
          }
          for (i = 0; i < num_waves / 2; ++i) {
            ctx.lineTo(x - wave_width, (y - (wave_height / 2)) + wave_girth + 1);
            x -= wave_width;
            ctx.lineTo(x - wave_width, (y + (wave_height / 2)) + wave_girth + 1);
            x -= wave_width;
          }
          ctx.fill();
        } else {
          ctx.moveTo(x, y + wave_girth);
          for (i = 0; i < num_waves / 2; ++i) {
            ctx.quadraticCurveTo(x + (wave_width / 2), y - (wave_height / 2),
              x + wave_width, y);
            x += wave_width;
            ctx.quadraticCurveTo(x + (wave_width / 2), y + (wave_height / 2),
              x + wave_width, y);
            x += wave_width;
          }

          for (i = 0; i < num_waves / 2; ++i) {
            ctx.quadraticCurveTo(
                x - (wave_width / 2),
                (y + (wave_height / 2)) + wave_girth,
                x - wave_width, y + wave_girth);
            x -= wave_width;
            ctx.quadraticCurveTo(
                x - (wave_width / 2),
                (y - (wave_height / 2)) + wave_girth,
                x - wave_width, y + wave_girth);
            x -= wave_width;
          }
          ctx.fill();
        }
      }

      var vx = start.x + this.x_shift;
      var vy = this.note.getYForTopText(this.text_line) + 2;

      renderVibrato(vx, vy);
    }
  });

  return Vibrato;
}());
h