Let's start! Step by step
In front of you are three sketches that will introduce you to the coding world!
Connect Synthia with your PC, open CircuitBlocks, and follow these steps.
Usually, there are displays on our devices, but we decided to change it a bit and put an LED matrix on Synthia.
First things first!
Let us introduce to you a few important terms:
- Track monochrome -> those are the LEDs in the middle of Synthia (the one with the largest number of LEDs)
- Cursor monochrome -> the white row under the track monochrome
- Sliders monochrome -> next to the sliders
- Track RGB -> on the left and right side of the track monochrome
- Slot RGB -> under the pushbuttons
Click on the new sketch in CircuitBlocks and choose Synthia since that is the device we'll be coding today.
This is what you'll be seeing once you enter the sketch:
This section contains a group of blocks that can be used for displaying animations and on Synthia's LED matrix.
Change the pitch into volume!
Firstly, let's create a variable. Find the section named "Variables" and press the "Create variable..." button.
As you can see, we have two sections in this main block - "Arduino run first" and "Arduino loop forever". As their name says, the blocks you will put in Arduino run the first section will run as soon as you turn on the device, and the blocks from the loop forever section will run afterward.
First, we'll check the LED matrix block section on the left side and look for the "play matrix animation" block.
This section contains a group of blocks that can be used for displaying animations and on Synthia's LED matrix.
Simply, click on it and drag it to the board.
We want to put the "play matrix animation" block here so that the animation starts playing only once when the device starts.
Change the pitch into volume!
Now we'll have to create our first variable for this sketch. Let's call it "x".
In computer programming, a variable is a storage location that contains a value.
Every variable has a specific name. You can store and change the value of a variable.
Every variable has a specific name. You can store and change the value of a variable.
Firstly, let's create a variable. Find the section named "Variables" and press the "Create variable..." button.
You'll get a pop-up window like this one:
Save it and you're good to go!
Right now, you'll have two new blocks in the variable section called "Set x to" and "Change x by". For now, we need the "Set x to" block.
When we create a variable, it's undefined - it has no value. We must set a value for every variable when our computer program starts. That's why you'll need the "set variable" block.
There is a block in which you can write any numerical value, and it is located in the Math block section.
Variable "x" holds the value of the ordinal number of the LED that is currently lightning up.
Since there are 5 RGB LEDs under each pushbutton, and the PCs are counting them from 0, we'll have to put 0 for the value of the first LED.
Set the "x" variable to 0.
Why to 0 you may ask?
Variable "x" holds the value of the ordinal number of the LED that is currently lightning up.
Since there are 5 RGB LEDs under each pushbutton, and the PCs are counting them from 0, we'll have to put 0 for the value of the first LED.
Now is the time to make the first function.
Just like with the variable, you can create a function by clicking on the block, saying create a function, and a pop-up window will appear.
You can give any name you want to your function, but we named it "drawPixel".
Once you click on the done button, you'll get a new blueish block on the drawing area. Leave that part for later and use "call drawPixel" right now.
Let's create another variable and call it "pixelTime".
We need that variable in order to track the time that passed since the last LED lightened up.
You already know how to do that, right?
So, click on the Variables block section, and then on the create variable option.
Drag and drop "Set variable to" block under the "call drawPixel" block.
Just like in the photo below:
Go to the Time block section and choose the "current elapsed Time (milliseconds)".
The first thing you want to do is to clear the entire matrix.
For that, you'll need this block saying "clear the track monochrome matrix".
The final product should look like this:
What this function will do is light up the LED that the variable "x" is showing.
Firstly, the "drawPixel" function will turn off all the LEDs, change the current pixel to cyan, and push the changes on the matrix.
Let's create another variable and call it "pixelTime".
We need that variable in order to track the time that passed since the last LED lightened up.
You already know how to do that, right?
So, click on the Variables block section, and then on the create variable option.
Write down a name for it.
Drag and drop "Set variable to" block under the "call drawPixel" block.
Just like in the photo below:
You can see that once again, we don't have the value of the variable, so we have to fix that.
This time, we won't give any numerical value to the variable.
Go to the Time block section and choose the "current elapsed Time (milliseconds)".
Place that block on the place of a circle in the variable block.
Now is time to use the "drawPixel" function block.
This block will determine what will be shown on the LED matrix.
The first thing you want to do is to clear the entire matrix.
For that, you'll need this block saying "clear the track monochrome matrix".
After dropping it in the "drawPixel" block, we'll change the "track monochrome" to "slot RGB".
The next block we'll need is also from the LED matrix block section.
Search for this particular block:
Search for this particular block:
Change the track into a slot, since we are working on a slot right now, and put the color cyan (or any other that you want to).
You'll also have to change 0 to a variable "x".
The final product should look like this:
We are still in the LED matrix block section.
Search for this block saying "push changes to track monochrome matrix".
Now, we will be working on a track RGB.
This is what the drawing area should look like by now:
Let's finish that as well!
The logic block section is the next section we'll use.
Since we are working on slot RGB, we have to change the "track monochrome" to "slot RGB".
Once again, we are going to use the "clear the matrix" block. You can either make it the same way as we did for the first such block, or you can simply copy the one we already have.
For copying, you just click on the right button on your mouse and choose duplicate. You can use that button to delete some blocks as well.
Now, we will be working on a track RGB.
You can copy the next two blocks called "set RGB matrix pixel color" and "push changes to matrix" as well.
The only thing you'll change is "slot RGB" into "track RGB".
This is what the drawing area should look like by now:
We successfully finished everything in the "drawPixel" function.
The only thing missing is the Arduino loop forever part.
Let's finish that as well!
The logic block section is the next section we'll use.
We'll replace the "true" part of the block with this block:
This is a comparison function, so we'll need to use the math block instead of the left number.
After making some changes, this is what your drawing block should look like:
We will change the variable "x" by 1.
This change means that every 500 milliseconds "x" will change by 1 (up to 4).
Once "x" get to 4, it will go back to 0.
Once again, we are in a need of an "if - do" block.
Take another comparison block and place it instead of the "true" part.
What we did here is we determined that the variable "x" is set to 0.
Every 500 milliseconds the variable "x" will change by 1. This will go up to 4 since there are 5 RGB LEDs in the row.
Once "x" get to 4, it will go back to 0.
Now we have to call the "drawPixel" function to light the LED and save the current time.
Now that you finished your sketch and you understand what is going on, hit the big red Run button and wait for the code to compile!
If you're doing this for the first time, the code can take up to a minute to compile.
But, don't worry, after that, the compiling should be faster.
But, don't worry, after that, the compiling should be faster.
Here are a few photos showing what it should look like once you compile the code.
So this is how Synthia will look once you turn it on. The first LED under the pushbutton will light up (the one we set as 0).
Every 500 milliseconds, the light will switch to another LED.
Also, the animation will be playing on the LED matrix this whole time.