After assembling your 2048, now it is time to learn about how to work with it.
1. Installing the Arduino Software (IDE) & Downloading Hardware and Graphics Libraries
First of all, you will be using the Arduino Software (IDE) in order to upload your codes to 2048. Please find the link below to download the Arduino Software:
https://www.arduino.cc/en/Main/Software
After installing the Arduino Software, you need to download the necessary libraries to work with your 2048. Please find the links below to download the hardware and graphics libraries, both prepared by Adafruit Industries.
https://github.com/adafruit/RGB-matrix-Panel
https://github.com/adafruit/Adafruit-GFX-Library
Download the RGBmatrixPanel library by clicking the green download button near the top right corner, click download .zip and rename the uncompressed folder RGBmatrixPanel. Check that the RGBmatrixPanel folder contains RGBmatrixPanel.cpp and RGBmatrixPanel.h. Similarly, download the Adafruit_GFX library as well. Rename the uncompressed folder Adafruit_GFX and confirm it contains Adafruit_GFX.cpp and Adafruit_GFX.h. Place both library folders inside your <arduinosketchfolder>/libraries/ folder. You may need to create the libraries subfolder if its your first library. After completing these steps, restart the Arduino Software (IDE) to see the libraries.
Now, you are ready to start coding.
2. Template Sketch and Creoqode 2048 Functions
Please find the screenshot below to see the template you will be using for 2048. It includes the libraries in your sketch, defines the pins of the LED display and defines the pins that the push buttons are connected to.
You can find the text version of this template at the very bottom of this page, that you can directly copy and paste in your sketch.
If you have worked with Arduino Software before and you used push buttons, you can notice on top that the pin modes are defined as "INPUT_PULLUP" instead of simply "INPUT". The main reason is that no external resistors are used while connecting the push buttons to Creoqode Mini Mega. By defining the pin modes as "INPUT_PULLUP", we can enable the internal pull up resistors that already exist in Mini Mega development board by using the Arduino Software. This makes it very easy to work with push buttons and prevents us from using unnecessary components.
When the push buttons are pressed, the pins will be connected to GND and you will be reading LOW. This is why the activated state is defined as LOW at the beginning of the sketch.
Now, let's have a look at the functions that are already defined in the graphics library. They can be found below:
creoqode.drawPixel( x, y, creoqode.Color333( r, g, b))
The LED display of Creoqode 2048 works based on a coordinate system. The top left LED chip has the coordinates of (0, 0) and the bottom right LED chip has the coordinates of (63, 31). The variables "x" and "y" of the function above defines the coordinates of the LED chip that you want to illuminate. The colour function that is used inside works based on the RGB colour system. All variables of this function, "r", "g" and "b" can take a value between 0 and 7 which defines the brightness of an individual colour. You can see the RGB colour wheel below.
As an example, if you want to achieve the colour purple, you can use (7, 0, 7). For the colour yellow, you can use (7, 7, 0). You can play with these variables in order to achieve many different colours while working with 2048. The colour function is used by all the other shape functions and work exactly the same.
You can see an example below, which is achieved by "creoqode.drawPixel(29, 11, creoqode.Color333(7, 0, 0))".
creoqode.drawRect( x, y, a, b, creoqode.Color333( r, g, b))
creoqode.fillRect( x, y, a, b, creoqode.Color333( r, g, b))
As you can guess, these two functions makes you draw rectangles with 2048. The function that starts with "drawRect" only illuminates the LED chips that define the outer edge of the rectangle where as the one with "fillRect" illuminates all the LED chips that is located in the defined coordinates.
The variables "x" and "y" determines the coordinates of the top left corner of the rectangle. "a" and "b" defines the length of the horizontal and vertical edges of the rectangle you want to create.
Please see the example below to have a better understanding. The function used is "creoqode.drawRect(0, 0, 20, 10, creoqode.Color333(0, 7, 0))".
creoqode.drawCircle( x, y, r, creoqode.Color333( r, g, b))
creoqode.fillCircle( x, y, r, creoqode.Color333( r, g, b))
You can draw circles with these functions, where "x" and "y" defines the centre point of the circle and "r" the radius. You can find an example below.
creoqode.drawLine( x1, y1, x2, y2, creoqode.Color333( r, g, b))
You can draw a line with this function, which basically works based on the coordinates of the two different points.
creoqode.fillScreen(creoqode.Color333( r, g, b))
This function covers all the screen with a specific colour you want.
creoqode.setTextSize(x)
creoqode.setCursor( x, y)
creoqode.setTextColor(creoqode.Color333( r, g, b))
creoqode.print("......")
The function group above adjusts the size, location, and colour of the letters you would like to write with 2048.
The function with "setTextSize" can have an integer variable, where 1 means a letter size of 8 pixels high, 2 means 16 pixels, 3 means 24 pixels and so on. "setCursor" defines the coordinates of the top left corner where the writing starts. You should not forget to use " " when using the "print" function, otherwise the words you write will not be illuminated.
3. Creating Custom Graphics and Characters without Using the Shape Functions
While designing retro-style video games, one of the most important factors that makes your games attractive is the graphics and characters you will be using. In order to create your custom characters:
1. You have to define the size of your character in terms of pixels,
2. You have to define each colour you will be using for your character with a number.
Let's assume you want to draw a smiley face with size of 7 pixels by 7 pixels, as illustrated below.
Now, you can prepare a template of the same size in order to name the colour of each pixel individually. Please see the template below, and the numbers that define the colour of each pixel. In this example, "0" is used for black, and "1" is used for yellow.
Now, you need to write this template in your sketch, by creating a char variable with exactly the same size of elements, 7 pixels by 7 pixels.
const char smiley[] = { 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0
};
After creating the template, you can replace the numbers with the ones that define specific colours. In this example, it would be:
const char smiley[] = { 0, 0, 1, 1, 1, 0, 0,
0, 1, 1, 1, 1, 1, 0,
1, 1, 0, 1, 0, 1, 1,
1, 1, 1, 1, 1, 1, 1,
1, 0, 1, 1, 1, 0, 1,
0, 1, 0, 0, 0, 1, 0,
0, 0, 1, 1, 1, 0, 0
};
After these steps, it is time to make Creoqode Mini Mega development board read each one of these values and illuminate LED chips according to the numbers and their location in the matrix. In order to do that, you will be using two for-loops, one for rows and one for columns. Please find the code section below:
for (int q = 0; q < 7; q++) { for (int w = 0; w < 7; w++) { if ( smiley[q * 7 + w] == 1 ) creoqode.drawPixel(w, q, creoqode.Color333(7, 7, 0)); else creoqode.drawPixel(w, q, creoqode.Color333(0, 0, 0)); } }
Let's have a closer look to understand this better. The variable "q" is used for rows and "w" for columns. "q" will be incremented by one each time when all the columns in a row are checked and the LED chips are illuminated accordingly. "q" will keep its initial value of 0 until "w" reaches 7 which is the final column of each row.
If we write down the algorithm behind this loop with its iterations, it would be as the one below:
Element 1. q = 0, w = 0 | smiley[0 * 7 + 0] | smiley[0] == 0 | creoqode.drawPixel( 0, 0, creoqode.Color333(0, 0, 0));
Element 2. q = 0, w = 1 | smiley[0 * 7 + 1] | smiley[1] == 0 | creoqode.drawPixel( 1, 0, creoqode.Color333(0, 0, 0));
Element 3. q = 0, w = 2 | smiley[0 * 7 + 2] | smiley[2] == 1 | creoqode.drawPixel( 2, 0, creoqode.Color333(7, 7, 0));
Element 4. q = 0, w = 3 | smiley[0 * 7 + 3] | smiley[3] == 1 | creoqode.drawPixel( 3, 0, creoqode.Color333(7, 7, 0));
Element 5. q = 0, w = 4 | smiley[0 * 7 + 4] | smiley[4] == 1 | creoqode.drawPixel( 4, 0, creoqode.Color333(7, 7, 0));
...
Element 47. q = 6, w = 4 | smiley[6 * 7 + 4] | smiley[46] == 1 | creoqode.drawPixel( 4, 6, creoqode.Color333(0, 0, 0));
Element 48. q = 6, w = 5 | smiley[6 * 7 + 5] | smiley[47] == 0 | creoqode.drawPixel( 5, 6, creoqode.Color333(0, 0, 0));
Element 49. q = 6, w = 6 | smiley[6 * 7 + 6] | smiley[48] == 0 | creoqode.drawPixel( 6, 6, creoqode.Color333(0, 0, 0));
After all the iterations in the for-loop is completed, you will have your character displayed by 2048, as shown below.
You can find below the template sketch you can use for your own Creoqode 2048 coding projects:
#include <Adafruit_GFX.h> // Graphics Library #include <RGBmatrixPanel.h> // Hardware Library
#define ACTIVATED LOW
#define CLK 11 #define LAT 10 #define OE 9 #define A 12 #define B 13 #define C 14 #define D 15
RGBmatrixPanel creoqode(A, B, C, D, CLK, LAT, OE, false, 64);
const int button1 = 34; const int button2 = 35; const int button3 = 36; const int button4 = 37; const int button5 = 38; const int button6 = 39;
int button1state; int button2state; int button3state; int button4state; int button5state; int button6state;
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
void setup() { creoqode.begin();
pinMode(button1, INPUT_PULLUP); pinMode(button2, INPUT_PULLUP); pinMode(button3, INPUT_PULLUP); pinMode(button4, INPUT_PULLUP); pinMode(button5, INPUT_PULLUP); pinMode(button6, INPUT_PULLUP);
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
void loop() {
button1state = digitalRead(button1); button2state = digitalRead(button2); button3state = digitalRead(button3); button4state = digitalRead(button4); button5state = digitalRead(button5); button6state = digitalRead(button6);
}