Renderer Class

Renderer Class

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

Caution

this class is not bundled with the npm package, you must copy it over by cloning this repo: src/spessasynth_lib/website/ui/renderer folder

Warning

This page is heavily outdated as it's not the part of spessasynth_lib.

Importing

import {Renderer} from "./website/js/renderer.js";

Initialization

const renderer = new Renderer(channelColors, synth, canvas)

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

Methods

render

Renders a single frame. Usually only internal

renderer.render(auto);

• auto - if set to false, the renderer won't clear the canvas or requestAnimationFrame. Useful for integrating into other drawing scripts. Defaults to true

Properties

noteTimes

The MIDI sequence data that is used for the rendering. Supplied by the Sequencer class. It's stored as an array of 16 channels, each channel being an array of events and the index of the first event in the frame. Each event has its MIDI note, absolute start time and length, both in seconds.

renderer.noteTimes = [
    {
        renderStartIndex: 0,
        notes: [
            {
                midiNote: 64, // the MIDI note of the event
                start: 3.4253, // absolute start time in seconds
                length: 0.543 // the length of the note in seconds
            },
            
            /*... a whole lot more events go here*/
        ]
    },
    
    /*... 15 more of these*/
]

the noteTimes is undefined until the sequencer suppliers it with its connectRenderer method.

renderAnalysers

A boolean, indicating if the renderer should render the waveforms of the channels. Defaults to true.

renderNotes

A boolean, indicating if the renderer should render the notes stored in renderer.noteTimes variable. Defaults to true.

noteFallingTimeMs

In miliseconds, how long should the note take to fall from the top to the trigger area. Sum with noteAfterTriggerTimeMs to get the full falling time. Defaults to 1000ms.

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

noteAfterTriggerTimeMs

In miliseconds, how long should the note fall after being triggered. For example, if timeMs is 1000ms and afterTriggerTimeMs is 1000ms, the total falling time will be 2000ms and the notes will be triggered (IE. lit up) in the middle. Sum with noteFallingTimeMs to get the full falling time. Defaults to 0ms.