BlocksSynth

Introduction

BlocksSynth is a JUCE application that turns your Lightpad into a simple monophonic synthesiser capable of playing 4 different waveshapes - sine, square, sawtooth and triangle.

Generate a Projucer project from the file located in the examples/ folder, then navigate to the BlocksSynthDemo/Builds/ directory and open the code project in your IDE of choice. Run the application and connect your Lightpad (if you do not know how to do this, see Connecting BLOCKS) - it should now display a simple 5x5 grid where each pad plays a note in the chromatic scale using a sine wave starting from the bottom-left (C3). It is possible to play any of the 25 notes but for ease of use tonics (the root note of the scale) are highlighted in white and notes in the C-major scale are highlighted in green. When a note has been played it is possible to change the amplitude using touch pressure and to pitch bend between adjacent notes by sliding left and right. Pressing the mode button on the Lightpad will change to the waveshape selection screen where the currently selected waveshape is rendered on the LEDs and you can switch between the 4 different waveshapes by touching anywhere on the Block surface.

The concept of a BLOCKS topology and the methods for receiving callbacks from the Block object are covered in the BlocksMonitor example and the basic methods for displaying grids and setting LEDs on the Block are covered in the BlocksDrawing example. This example will cover how to render custom programs on the LEDGrid using the Littlefoot language and how to do some simple audio synthesis using data from the Lightpad.

Note Grid

In the synthesiser mode the Lightpad displays a 5x5 grid constructed using the DrumPadGridProgram class. The SynthGrid struct handles the setup and layout of this grid and sets the colours of the pads to white for tonics, green for notes in the C major scale and black for notes that are not in the C major scale.

void constructGridFillArray()
{
    gridFillArray.clear();
 
    for (auto i = 0; i < numRows; ++i)
    {
        for (auto j = 0; j < numColumns; ++j)
        {
            DrumPadGridProgram::GridFill fill;
 
            auto padNum = (i * 5) + j;
 
            fill.colour =  notes.contains (padNum) ? baseGridColour
                                                   : tonics.contains (padNum) ? Colours::white
                                                                              : Colours::black;
            fill.fillType = DrumPadGridProgram::GridFill::FillType::gradient;
            gridFillArray.add (fill);
        }
    }
}

The SynthGrid::getNoteNumberForPad() method is called in the BlocksSynthDemo::touchChanged() callback and returns the corresponding MIDI note number for a Touch coordinate on the Lightpad. This note number is then passed to the Audio class to be played on the synthesiser.

int getNoteNumberForPad (int x, int y) const
{
    auto xIndex = x / 3;
    auto yIndex = y / 3;
 
    return 60 + ((4 - yIndex) * 5) + xIndex;
}

When the application is run, the synthesiser note grid would look like this:

Synthesiser note grid

Waveshape Display

In the waveshape selection mode the Block::Program is set to an instance of the WaveshapeProgram class [1]. This class inherits from Block::Program so that it can be loaded onto the LEDGrid and its LittleFoot program can be executed on the Lightpad.

void setLEDProgram (Block& block)
{
    if (currentMode == waveformSelectionMode)
    {
        block.setProgram (new WaveshapeProgram (block));    // [1]
 
        if (auto* waveshapeProgram = getWaveshapeProgram())
        {
            //...
        }
    }
    //...
}

The class itself is relatively simple and contains a method to set which waveshape should be displayed [2], a method to load the coordinates for each of the four waveshapes into the heap [3] and one pure virtual method overridden from Block::Program, the Block::Program::getLittleFootProgram() method [4]. The heap is the area of shared memory that is used by the program to communicate with the host computer and the size of this memory is set using the #heapsize: XXX directive where XXX is the number of bytes required [5].

class WaveshapeProgram : public Block::Program
{
public:
    WaveshapeProgram (Block& b) : Program (b) {}
 
    void setWaveshapeType (uint8 type) {...} // [2]
    void generateWaveshapes() {...}          // [3]
 
    String getLittleFootProgram() override   // [4]
    {
        return R"littlefoot(
 
        #heapsize: 256                       // [5]
 
        //...
 
        )littlefoot";
    }
    //...

The string literal returned by the getLittleFootProgram() function needs to be preceeded by the "R" prefix and enclosed between "littlefoot" delimiters in order to prevent the characters to be escaped in the program.

In the private section of WaveshapeProgram the structure of the shared data heap is laid out with variables containing the offsets for each section and the total size (in bytes) that is required can be determined by adding the last set of bytes required to the last offset, which in this case is 136 + 45 = 181. The heap contains space for a variable that determines which waveshape type to display and the Y coordinates for 1.5 cycles of each of the four waveshapes.

static constexpr uint32 waveshapeType      = 0;   // 1 byte
static constexpr uint32 sineWaveOffset     = 1;   // 1 byte * 45
static constexpr uint32 squareWaveOffset   = 46;  // 1 byte * 45
static constexpr uint32 sawWaveOffset      = 91;  // 1 byte * 45
static constexpr uint32 triangleWaveOffset = 136; // 1 byte * 45

The WaveshapeProgram::getLittleFootProgram() method returns the LittleFoot program that will be executed on the BLOCKS device. The repaint() method of this program is called at approximately 25Hz and is used to draw the moving waveshape on the LEDs of the Lightpad.

void repaint()
{
    fillRect (0xff000000, 0, 0, 15, 15);    // [6]
 
    int type = getHeapByte (0);
 
    int offset = 1 + (type * 45) + yOffset; // [7]
 
    for (int x = 0; x < 15; ++x)
    {
        int y = getHeapByte (offset + x);
 
        if (y == 255)
        {
            for (int i = 0; i < 15; ++i)
                drawLEDCircle (x, i);
        }
        else if (x % 2 == 0)
        {
            drawLEDCircle (x, y);           // [8]
        }
    }
 
    if (++yOffset == 30)                    // [9]
        yOffset = 0;
}

Each time this method is called, it clears the LEDs by setting them all to black [6] then calculates the heap offset based on the waveshape type that has been set [7] and uses a for() loop to iterate over the 15 LEDs on the X-axis and draw an LED 'circle' using the drawLEDCircle() method at the corresponding Y coordinate for the selected waveshape [8]. The read position of the heap is offset using the yOffset variable which is incremented each repaint() call and wraps back around when the end of the heap section for the selected waveshape is reached to draw a 'moving' waveshape [9].

A sine wave dispayed in the waveshape selection mode

Audio

The Audio class handles the audio synthesis for this application and overrides the AudioIODeviceCallback::audioDeviceIOCallback() method to call the Synthesiser::renderNextBlock() method of a Synthesiser object.

void audioDeviceIOCallback (const float** /*inputChannelData*/, int /*numInputChannels*/,
                            float** outputChannelData, int numOutputChannels, int numSamples) override
{
    AudioBuffer<float> sampleBuffer (outputChannelData, numOutputChannels, numSamples);
    sampleBuffer.clear();
 
    synthesiser.renderNextBlock (sampleBuffer, MidiBuffer(), 0, numSamples);
}

This object is initialised to be capable of rendering sine, square, sawtooth and triangle waves on separate MIDI channels in the constructor of Audio, and Audio contains methods for sending note on, note off, channel pressure and pitch wheel messages to the Synthesiser.

Audio()
{
    //...
    synthesiser.clearVoices();
    synthesiser.clearSounds();
 
    synthesiser.addVoice (new SineVoice());
    synthesiser.addVoice (new SquareVoice());
    synthesiser.addVoice (new SawVoice());
    synthesiser.addVoice (new TriangleVoice());
 
    synthesiser.addSound (new SineSound());
    synthesiser.addSound (new SquareSound());
    synthesiser.addSound (new SawSound());
    synthesiser.addSound (new TriangleSound());
}

When a note is triggered on the Lightpad, the Audio::noteOn() method is called with 3 arguments: a MIDI channel corresponding to the waveshape that should be generated, a MIDI note number and an initial velocity.

void noteOn (int channel, int noteNum, float velocity)
{
    synthesiser.noteOn (channel, noteNum, velocity);
}
 
void noteOff (int channel, int noteNum, float velocity)
{
    synthesiser.noteOff (channel, noteNum, velocity, false);
}
 
void allNotesOff()
{
    for (auto i = 1; i < 5; ++i)
        synthesiser.allNotesOff (i, false);
}

Whilst the note is playing, the amplitude and pitch are modulated by calling the Audio::pressureChange() and Audio::pitchChange() methods from the BlocksSynthDemo::touchChanged() callback. The pressure value of the Touch instance is used to directly control the Synthesiser amplitude and the distance from the initial note trigger on the X-axis of the Lightpad is scaled to +/-1.0 and used to modulate the frequency of the currently playing note.

void pressureChange (int channel, float newPressure)
{
    synthesiser.handleChannelPressure (channel, static_cast<int> (newPressure * 127));
}
 
void pitchChange (int channel, float pitchChange)
{
    synthesiser.handlePitchWheel (channel, static_cast<int> (pitchChange * 127));
}

The Oscillator base class contains the waveshape rendering code which inherits from SynthesiserVoice and has a pure virtual Oscillator::renderWaveShape() method that is overridden by subclasses to render the 4 different waveshapes.

class OscillatorBase   : public SynthesiserVoice
{
public:
    //...
    virtual bool canPlaySound (SynthesiserSound*) override = 0;
    virtual double renderWaveShape (const double currentPhase) = 0;
    //...

Summary

This tutorial and the accompanying code project have expanded on the topics covered by previous tutorials, showing you how to display more complex, custom programs on the LEDGrid using the LittleFoot language and how to control simple audio synthesis parameters using the Lightpad.

See also

• BlocksMonitor
• BlocksDrawing