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


BlocksDrawing is a JUCE application that allows you to use your Lightpad as a drawing surface. You can choose from a palette of 9 base colours and paint them on the 15x15 LED grid, blending between colours using touch pressure.

Navigate to the JUCE/examples/BLOCKS/BlocksDrawing/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 3x3 grid of colours to choose from. Touch a colour to set it as the current brush colour and then press the mode button to switch to canvas mode where you will be presented with a blank touch surface. Touch anywhere on the LED grid to start painting and use the pressure of your touch to control how bright the colour is. Try painting over an already painted LED to increase its brightness and blend between different colours by doing this with a different brush colour. To clear the canvas and start over, double-click the mode button.

The concept of a BLOCKS topology and the methods for receiving callbacks from a Block object are covered in the BlocksMonitor example and this tutorial will cover the methods in the API for displaying grids and setting LEDs on the Lightpad.

The LEDGrid Object

Lightpads have a 15x15 LED grid which can be accessed and controlled through the LEDGrid object, a pointer to which is returned by the Block::getLEDGrid() method (for more details on how the LEDGrid object operates, see Controlling LED grids). In the topologyChanged() method of MainComponent this LEDGrid pointer is passed to the setLEDProgram() method, which sets the LEDGrid::Program to either a DrumPadGridProgram or BitmapLEDProgram, depending on the selected mode.

Colour Palette

In the colour palette mode the Lightpad displays a 3x3 grid of colours, constructed using the DrumPadGridProgram class. A DrumPadGridProgram pointer called colourPaletteProgram is declared as a private member variable of MainComponent and in the MainComponent::setLEDProgram() method this is set to point to a new DrumPadGridProgram object and is passed the LEDGrid object of the Lightpad in its constructor. After the program has been initialised, it is passed to the LEDGrid to display using the LEDGrid::setProgram() method and the layout of the grid is set up using the DrumPadGridProgram::setGridFills() method. This function takes 3 arguments: the number of rows, number of columns and an array of DrumPadGridProgram::GridFill objects containing a GridFill for each pad that controls its colour and fill type. The ColourGrid struct in MainComponent.h contains all of this information and handles the construction of the GridFill array in the ColourGrid::constructGridFillArray() method. An instance of this object called layout is declared as a member variable of MainComponent to easily change how the grid looks. The ColourGrid::setActiveColourForTouch() method is called in the MainComponent::touchChanged() callback and is used to determine which brush colour has been selected based on a Touch coordinate from the Lightpad.

Colour palette mode


In canvas mode, the LEDGrid program is set to an instance of BitmapLEDProgram and uses the BitmapLEDProgram::setLED() method to set individual LEDs on the Lightpad to a particular colour. The ActiveLED struct declared in the private section of MainComponent is used to keep track of which LEDs are on and their colour and brightness. MainComponent contains an Array of these objects called activeLeds. In the MainComponent::setLEDProgram() method the program is set up and passed to the LEDGrid object the same way as in the colour palette mode but the MainComponent::redrawLEDs() method is also called which iterates over the activeLeds array and sets the appropriate LEDs on the Lightpad so the LED states persist between mode switches. When a Touch is received in the MainComponent::touchChanged() callback the MainComponent::drawLEDs() method is called with 4 arguments: x and y coordinates, touch pressure and brush colour. This method iterates over the activeLed array and checks to see if there is an active LED at the given coordinate. If it is blank, an ActiveLED object is created and added to the array with the given coordinates and colour using touch pressure for brightness. If there is already an active LED at the coordinate, the colour of that LED will be blended with the current brush colour, the proportion of which is determined by the touch pressure.

Unleash your inner Picasso!


This tutorial and the accompanying code project have introduced the LEDGrid object and shown how to use the LEDGrid::Program object to display basic grids and set individual LEDs on the Lightpad.