Lume
    Preparing search index...

    Class Keyboard

    The Keyboard CanvasDrawer dynamically generates a row of keys based on the layout of a standard piano keyboard, with the notes in the C major scale serving as the white keys, with inverted, smaller black keys inbetween them.

    // instantiate keyboard instance with dependencies
    // you would get these within a Layout
    const keyboard = new Keyboard(p5, noteTrackers[0], timeTracker, rConfig);

    // 2 octave keyboard + 1 extra key
    keyboard.lowestNote = 48;
    keyboard.highestNote = 48 + 12 + 12 + 1;

    // build keys
    const keyRatio = 4;
    const keyWidth = 25;
    const blackKeyWidth = 15;
    const blackKeyRatio = 3.5;
    keyboard.setKeyWidth(keyWidth, blackKeyWidth);
    keyboard.setKeyHeight(
    	keyWidth * keyRatio,
    	blackKeyWidth * blackKeyRatio,
    );

    // spacing between keys
    keyboard.gap = 1;

    // border that goes around all keys. helps create rounded borders
    keyboard.strokeWeight = 5;

    // make black keys appear on top of white keys
    keyboard.blackKeyOffset = -22;

    // make black keys have a different color
    keyboard.areBlackKeysFilled = false;

    // position keyboard on canvas
    keyboard.xOffset = 0;
    keyboard.yOffset = 15;

    // instant color fade in, with a quick fade to the held note color
    keyboard.noteEnvelope = new ADSREnvelope();
    keyboard.noteEnvelope.attack = 0;
    keyboard.noteEnvelope.decay = 100;

    Hierarchy (View Summary)

    Index

    Accessors

    areBlackKeysFilled blackKeyOffset cornerRadius gap highestNote isFadeToBackground lowestNote noteEnvelope sizeBoost spacingBetweenKeys strokeWeight

    Constructors

    constructor

    Methods

    draw render setKeyHeight setKeyWidth setTransforms

    Accessors

    • get areBlackKeysFilled(): boolean

      Returns the areBlackKeysFilled flag, which when true makes the black keys have the same color as the white keys.

      Returns boolean

    • set areBlackKeysFilled(value: boolean): void

      Sets the areBlackKeysFilled flag.

      Parameters

      • value: boolean

      Returns void

    • get blackKeyOffset(): number

      Returns the vertical offset between black and white keys.

      Returns number

      -10
    • set blackKeyOffset(value: number): void

      Sets the vertical offset between black and white keys.

      Parameters

      • value: number

      Returns void

    • get cornerRadius(): number

      Gets the corner radius of the keys.

      Returns number

    • set cornerRadius(value: number): void

      Sets the corner radius of the keys.

      Parameters

      • value: number

      Returns void

      Value must be zero or greater.

    • get gap(): number

      Returns the value of the gap property.

      Returns number

      Note that this property does not refer to the actual spacing between keys, but as internal value used for calculations.

      In other words, the code kinda sucks.

    • set gap(value: number): void

      Sets the value of the gap property.

      Internally, Keyboard draws keys by creating an outline around rectangles. These outlines are exculuded from size calculations, meaning that a negative key spacing is possible, which would make the last key on the keyboard larger than the rest (as they're drawn sequentially).

      Parameters

      • value: number

      Returns void

      Value must be zero or greater.

    • get highestNote(): number

      Returns the highest note on the keyboard.

      Returns number

      72
    • set highestNote(value: number): void

      Sets the highest note on the keyboard.

      Parameters

      • value: number

      Returns void

      Value must be a valid MIDI number, between 0 (inclusive) and 127 (inclusive).

    • get isFadeToBackground(): boolean

      Returns the isFadeToBackground flag, which if true, fades buttons immediately to the idle color rather than holding.

      Returns boolean

    • set isFadeToBackground(value: boolean): void

      Sets the isFadeToBackground flag.

      Set this property to true if you want to represent MIDI notes without sustain, typically on percussive instruments.

      Note that notes will immediately render as inactive if the note duration is shorter than the boost threshold, as it cannot track notes that aren't currently being played.

      Parameters

      • value: boolean

      Returns void

    • get lowestNote(): number

      Returns the lowest note on the keyboard.

      Returns number

      48
    • set lowestNote(value: number): void

      Sets the lowest note on they keyboard.

      Parameters

      • value: number

      Returns void

      Value must be a valid MIDI number, between 0 (inclusive) and 127 (inclusive).

    • get noteEnvelope(): ADSREnvelope

      Returns the noteEnvelope, which is used to calculate the color and size of active notes.

      The release property of the envelope is unused, as this drawer does not keep track of notes once they've been deactivated.

      Returns ADSREnvelope

      Default (no argument) instance of ADSREnvelope.

    • set noteEnvelope(value: ADSREnvelope): void

      Sets the value of the noteEnvelope property.

      Parameters

      Returns void

      It is recommended to avoid using the same envelope for different CanvasDrawer components, as Keyboards will automatically set sustain to 0 in order to comply with Lume's style guide.

    • get sizeBoost(): number

      Returns the amount that the keys increase in size when hit.

      Returns number

    • set sizeBoost(value: number): void

      Sets the amount that the keys increase in size when hit.

      Value must be greater or equal to zero. Setting this value to zero means that the buttons never change in size.

      Parameters

      • value: number

      Returns void

      Value must be zero or greater.

    • get spacingBetweenKeys(): number

      Returns the spacing between keys.

      Spacing is defined as the distance between the horizontal center of one key to the horizontal center of another.

      Returns number

    • get strokeWeight(): number

      Returns the strokeWeight of the keys.

      Keys are drawn as rectangles with an outline. strokeWeight refers to the width of the outline.

      Returns number

      2
    • set strokeWeight(value: number): void

      Sets the value of strokeWeight.

      Parameters

      • value: number

      Returns void

      Value must be zero or greater.

    Constructors

    Methods

    • Called by the rendering engine on every frame.

      When overriding this method, ensure that the p5 instance is configured properly. For example, rectangles may be drawn incorrectly if a previous CanvasDrawer had modified p5.rectMode(). CanvasDrawer classes are not obligated/expected to use the default p5 attributes.

      See the p5 documentation on attributes for more information: https://p5js.org/reference/#Attributes

      Returns void

    • Sets the height of both white and black keys.

      Parameters

      • height: number

        The height of all keys.

      Returns void

    • Sets the height of the white and black keys.

      Parameters

      • whiteKeyHeight: number

        Height of the white keys.

      • blackKeyHeight: number

        Height of the black keys.

      Returns void

    • Sets the width of the white and black keys.

      Parameters

      • whiteKeyWidth: number

        Width of the white keys.

      • blackKeyWidth: number

        Width of the black keys.

      Returns void

    • Sets the width of both white and black keys.

      Parameters

      • width: number

        The width of all keys.

      Returns void

    Settings

    Member Visibility

    On This Page

    Accessors
    Constructors
    Methods