Renderer Class

Renderer Class

This is the module that is resposible for drawing the waveforms and the notes.

Initialization

const renderer = new Renderer(channelColors, synth)

• channelColors - an array of 16 strings with css colors for each channel.
• synth - an instance of Synthetizer class. Used for rendering its waveforms.

Methods

startNoteFall

Makes a note with infinite length start falling from the top.

renderer.startNoteFall(midiNote, channel, timeOffsetMs);

• midiNote - the note to play. Ranges from 0 to 127.
• channel - the midi channel. Determines the note's color. Ranges from 0 to 15.
• timeOffsetMs - in miliseconds, how late the should the note start. How low the note starts is determined by the noteFallingTimeMs property. For example, if noteFallingTimeMs is 1000ms (one second) and the offset is 500ms (half a second), then the note will instantly fill half of the screen and start falling from there.

stopNoteFall

Makes all matching notes stop falling from the top.

renderer.stopNoteFall(midiNote, channel, timeOffsetMs);

• midiNote - the note to stop. Ranges from 0 to 127.
• channel - the midi channel. Used for detecting notes to stop. Ranges from 0 to 15.
• timeOffsetMs - in miliseconds, how late the should the note cut off. How low the note gets cut off is determined by the noteFallingTimeMs property. For example, if noteFallingTimeMs is 1000ms (one second) and the offset is 500ms (half a second), then the note will get cut off in the middle of the screen and it's "tail" will start falling from there.

clearNotes

Clears all notes instantly.

renderer.clearNotes(); // boom, notes are gone >:)

pause

Pauses all the notes. Doesn't affect the waveforms.

renderer.pause(); // freeze!

resume

Resumes the notes' fall. Doesn't affect the waveforms.

renderer.resume(); // go, my notes!

Properties

noteFallingTimeMs

In miliseconds, how long should the note take to fall from the top to the bottom. Defaults to 1000ms.

renderer.noteFallingTimeMs = 1000; // notes will take one second to fall.