JUCE/extras/BLOCKS/doxygen/pages/juce_example_blocks_synth.dox

/**
@page example_blocks_synth BlocksSynth

In order to compile and run this application you need to first download the @jucelink{JUCE framework}, which can be obtained from GitHub @jucegithub{here}.

@section blocks_synth_introduction 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 PIP file located in the @s_file{JUCE/examples/BLOCKS/} folder, then navigate to the @s_file{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 @ref 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 @ref example_blocks_monitor example and the basic methods for displaying grids and setting LEDs on the %Block are covered in the @ref example_blocks_drawing 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.

@section blocks_synth_note_grid Note Grid

In the synthesiser mode the Lightpad displays a 5x5 grid constructed using the DrumPadGridProgram class. The @s_projcode{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.

@code{.cpp}
    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);
            }
        }
    }
@endcode

The @s_projcode{SynthGrid::getNoteNumberForPad()} method is called in the @s_projcode{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 @s_projcode{Audio} class to be played on the synthesiser.

@code{.cpp}
    int getNoteNumberForPad (int x, int y) const
    {
        auto xIndex = x / 3;
        auto yIndex = y / 3;

        return 60 + ((4 - yIndex) * 5) + xIndex;
    }
@endcode

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

@image html BlocksSynth_grid.JPG "Synthesiser note grid"

@section blocks_synth_waveshape_display Waveshape Display

In the waveshape selection mode the Block::Program is set to an instance of the WaveshapeProgram class @s_item{[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.

@code{.cpp}
    void setLEDProgram (Block& block)
    {
        if (currentMode == waveformSelectionMode)
        {
            block.setProgram (new WaveshapeProgram (block));    // [1]

            if (auto* waveshapeProgram = getWaveshapeProgram())
            {
                //...
            }
        }
        //...
    }
@endcode

The class itself is relatively simple and contains a method to set which waveshape should be displayed @s_item{[2]}, a method to load the coordinates for each of the four waveshapes into the heap @s_item{[3]} and one pure virtual method overridden from %Block::Program, the Block::Program::getLittleFootProgram() method @s_item{[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 @s_projcode{\#heapsize: XXX} directive where XXX is the number of bytes required @s_item{[5]}.

@code{.cpp}
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";
    }
    //...
@endcode

The string literal returned by the @s_projcode{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 @s_projcode{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.

@code{.cpp}
    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
@endcode

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

@code{.cpp}
        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;
        }
@endcode

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

@image html BlocksSynth_waveshape.gif "A sine wave dispayed in the waveshape selection mode"

@section blocks_synth_audio Audio

The @s_projcode{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.

@code{.cpp}
    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);
    }
@endcode

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

@code{.cpp}
    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());
    }
@endcode

When a note is triggered on the Lightpad, the @s_projcode{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.

@code{.cpp}
    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);
    }
@endcode

Whilst the note is playing, the amplitude and pitch are modulated by calling the @s_projcode{Audio::pressureChange()} and @s_projcode{Audio::pitchChange()} methods from the @s_projcode{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.

@code{.cpp}
    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));
    }
@endcode

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

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

@section blocks_synth_summary 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.

@section blocks_synth_see_also See also

- @ref example_blocks_monitor
- @ref example_blocks_drawing

*/