NeoMatrix Series

Video Lesson

Tinkercad Resources

Tinkercad is a free in browser software that allows users to build and program simulated circuits using a selection of micro-controllers.

You will need an account, these are free to register, or you can sign in using an existing Google, Apple, Microsoft, or Facebook account.

We have made our NeoMatrix simulated circuit available for these activities.

This file also includes a program for set-up - as Tinkercad cannot access the NeoMatrix library, the functions it contains have been pre-written into the code.

For more information regarding how to use Tinkercad, please visit our Online Electronics Series.

Exercises

We have put together a set of exercises for you to get started with programming a simulated NeoMatrix in Tinkercad.

All learners should start with the bronze level and work their way up as far as they can.

Click on each challenge heading to expand.

The program we provide with the circuit includes the libraries and NeoMatrix set-up.

We have already provided a function called randomColor, but it is incomplete. Can you make it so that this function generates a random output value for the brightness of the red, green, and blue outputs?
Tip: The lower and upper variables have already been set in the function's parameters.

Tip: Use the return command at the end, not matrix.show(). You should only use the show command inside the void loop().
- We have already created the local variables for each colour as r, g, and b and set them to zero.
- Call the random() function (already created as part of one of the libraries) for each colour's variable.
- The parameters for the random() function should be set to match the variables created inside the randomColor() parameters.
- For example, to set the brightness of the red colour to a random value;
```
                      
  r = random(lower, upper);
                      
                    
```
  This is then the same instruction for g and b.
```
                    
  uint16_t randomColor(uint8_t lower=0, uint8_t upper=255) 
  {
    uint8_t r,g,b = 0; 
    r = random(lower, upper);
    g = random(lower, upper);
    b = random(lower, upper);
    return matrix.Color(r, g, b); 
  }
                    
                  
```

Create a new function that will fill the whole matrix with a random colour.
- You can call a function inside another function's parameters.
- Call the matrix.fillScreen() function (this is included in the libraries already added).
- Call your randomColor() function from inside the brackets of the matrix.fillScreen() command.
For our answer program, we have called this new function 'randomFill'.
```
                    
  void randomFill()
  {
    matrix.fillScreen(randomColor());
  }
                    
                  
```

Move the matrix.fillRect() command from the void loop() to a new function called 'redSquare'. Then, delete the rest of the void loop() program.

The new function:

                  
  void redSquare()
  {
    matrix.fillRect (1, 1, 6, 6, matrix.Color(255, 0, 0));
  }

The void loop():

                    
  void loop()
  {

  }

In the now empty void loop(), start a new program that does the following;
1. Clears the matrix.
2. Calls your function for filling the screen with a random colour.
3. Shows the results on the matrix.
4. Waits for a second.
- Call the matrix.Clear() function from the supplied libraries to clear the screen.
- The matrix.show() function is called to refresh the matrix and display the current programmed image.
```
                    
  void loop()
  {
    matrix.clear();
    randomFill();
    matrix.show();
    delay(1000);
  }
                    
                  
```

Use the documentation tags (/** and */) to document (make notes on) your functions as a reminder of what they do, what the parameters are, and why. This will make it easier for you to understand when you look back through your code later.

/** This function is a random colour generator for RGB pixels/LEDs.
The minimum brightness is 0 and the maximum is 255.
The function has local variables for the RGB values as well as the lower and upper limits of the brightness.
The lower and upper varaibles are created and set inside the function's parameters.*/

This continues to build on the same program.

Create a new function that will draw 3 different sized rectangles inside each other on the matrix using a random colour for each.
Tip: You already have a redSquare() function you can look at for guidance, as well as the video for this session.
- First look at the redSquare() function. This uses one line of code to produce a square - a rectangle where all the sides are the same length.
- The structure of the parameters is as follows:
  matrix.fillRect(Start Column, Start Row, Column Span, Row Span, Colour);
  
  Remember, as this is a programming language, the first row and column are numbered as 0.
  
  The column span is how many columns the rectangle is drawn over, whilst the row span is how many rows.
- The randomColor() function replaces the matrix.Color() for this exercise.
- If using the fillRect(), the rectangles will be added to the neomatrix in the order you write them. This means you'll need to write the functions in order of largest first. Alternatively, you could use the drawRect() function which just produces an outline, removing this issue.
In our solution program, we have named this new function tripleRect(). Your rectangles may have different start points and/or dimensions.
```
                    
  void tripleRect()
  {
    matrix.fillRect (1, 1, 10, 6, randomColor());
    matrix.fillRect (2, 2, 8, 4, randomColor());
    matrix.fillRect (3, 3, 6, 2, randomColor());
  }
                    
                  
```

Document this new function and then call it in you void loop() program. Remember, you will need to clear the matrix before adding this new section of program.

Tip: Add to the current program, as the next image, rather than deleting the previous exercise.

Look at the four lines of code required for exercise 4 in the Bronze Level. Other than the name of the function being called, the rest is identical.

You will need to include the delay() or else the image will not hold on the neomatrix long enough to see.

                    
  void tripleRect()
  {
    //uses structure (Start Column, Start Row, Column Span, Row Span, Colour).
    matrix.fillRect (1, 1, 10, 6, randomColor());
    matrix.fillRect (2, 2, 8, 4, randomColor());
    matrix.fillRect (3, 3, 6, 2, randomColor());
  }

                    
  void loop() 
  {
    matrix.clear();
    randomFill();
    matrix.show();
    delay(1000);
    matrix.clear();
    tripleRect();
    matrix.show();
    delay(1000);
  }

Repeat the previous two steps for a function that draws three different sized and randomly coloured circles on your matrix. You may decide on positioning/overlapping. Remember to include documentation again.
- You can use matrix.fillCircle() and/or matrix.drawCircle() functions.
- The parameters for circles are slightly different:
  fillCircle(centre column, centre row, shape radius, colour):
  
  This means that we are positioning the centre of the circle, not the top left corner.
- Remember to clear the screen and show the new design, with a delay, in the void loop().
- You can increase the delay to give yourself the opportunity during testing to check positioning or to help debug.
Our function names, shape positionings and size may vary to your own.
```
                    
  void tripleCircle()
  {
    //uses structure (Centre Column, Centre Row, Radius, Colour)
    matrix.fillCircle(4, 3, 3, randomColor());
    matrix.fillCircle(9, 3, 3, randomColor());
    matrix.drawCircle(6, 5, 2, randomColor());
  }
                    
                  
```
```
                    
  void loop()
  {
    matrix.clear();
    randomFill();
    matrix.show();
    delay(1000);
    matrix.clear();
    tripleRect();
    matrix.show();
    delay(1000);
    matrix.clear();
    tripleCircle();
    matrix.show();
    delay(1000);
  }
                    
                  
```

This continues to build on the same program.

Write a function that will set all the pixels in a column the same colour, and fills the matrix with each column a different colour.
Tip: This will require a nested for-loop.

Write a function that will set all the pixels in a row the same colour, and fills the matrix with each row a different colour.

Call these functions from your void loop(), with screen clearings and pauses where needed.

Document your new functions.

Here are some suggestions of other things you could attempt at this stage.

Write a function that creates a circle with the fill a different colour to it's outline.

Use combinations and/or variations of your functions to generate different images.

Try adding a parameter to your circles function from Silver Level that will swich between drawing circle outlines and filling them.

Online NeoMatrix Series

Video Lesson

Tinkercad Resources

Exercises