Welcome to the last step in this guide, where we'll show you one more sketch example you can try out in CircuitBlocks.
This time, we're going to create a DJ interface where you can remix one song, add different effects and intensities.
Also, we'll explore options for printing letters on display. This function will enable us to see the names of the available sound effects on the LCD display.
Let's start with creating a new Jay-D block project.
Now let's create three variables that we'll use. Name the variables effect, intensity, and volume.
Repeat this step three times, so you have the following variables available:
Drag and drop the "set" block under Arduino run first and choose the "effect" in the drop-down menu:
In the "Math" section, choose the "123" block and insert it into the previous block. Put the 0 value instead of 123.
Now drag and drop two more "set" blocks from the "Variable" section.
Open the drop-down menus and choose intensity in one block and volume in the other block.
Intensity and volume will be controlled by the slider potentiometers. So, go to the "Input" section and find the block that says "potentiometer middle current value".
Put this block into the variable block for intensity and volume. Set the intensity potentiometer to be the left one and the volume potentiometer to be the right one.
Let's open a file on the memory card. This is a song that you're going to remix.
Go to the "DJ" section and find a block "open file pre-recorded". This block will give you an option to choose from songs that were pre-recorded on the memory card.."
If you'd like to use a song that you added yourself, choose a block that says "open file (name of the song)".
You can put this block after the variable blocks that we added earlier.
Open a drop-down menu in this block and choose any song you'd like to remix.
After you have chosen a song you want to remix, let's create a function that will set the effects for remixing.
Go to the "Functions" section and create a new function.
Let's call it "setEffect":
The function will appear in the sketch, but don't forget to put the "call effect" in the first block after the "open file" block.
We'll now use a logical function for setting the effect. There will be 5 options, so bear with us.
Go to the "Logic" section and choose a second block with the if and else option.
Drop it into the "setEffect" block.
We'll now insert a new logic block instead of the "true" option. So, go to the "Logic" section and drag and drop the following block:
This is a comparison function, so we'll need to use the "effect" variable instead of numbers. Each effect will have its number, so we will assign those numbers by using this function.
Go to the "Variables" section and put the "effect" variable in the first window in the comparison.
Make sure to keep the equal sign and type in the 0 in the other window of the comparison.
We just set the comparison for the effect to be equal to zero. If that is the case, we need to select an action that will take place.
Go to the "DJ" section and find a block that says "set effect slot 0 to effect low pass".
Drag and drop this one here:
Make sure to choose 0 in the first drop-down menu and effect none in the other drop-down menu.
Setting the none effect option is done. Let's repeat this a couple of more times, but adding different effects this time.
Every time you want to expand the logical block and add another effect, click on the small plus sign at the bottom of the block:
We repeated the previous step four more times for four new effects:
- low pass
- high pass
- bit crusher
Close this block by clicking on the small minus sign next to "else".
Lastly, we'll add the block that will connect the effect with the intensity we used as a variable previously.
Go to the "DJ" section and find the last block that says "set effect slot 0 intensity to 100".
Put this block here:
Instead of "100", we'll use the intensity variable. So, go to the "Variables" section and drag and drop the intensity variable in the last block.
If the number pops up outside the block when you drop the intensity variable, just drag it on the side where the sections are to delete it from the sketch.
The function "setEffect" is done!
Let's return to the Arduino run first block and add the volume block.
Open the "DJ" section and find the "set volume to" block.
Drop it here:
Like with the intensity variable, let's replace the number with the volume variable here as well:
Open the "DJ" section again and find a block that says "start playing".
Put it here:
We need to create one more function.
Let's call it "draw" since this function will print the effect names and intensity on the display.
After you create the function, it will appear in the sketch.
Don't forget to drop the "call draw" block here:
Let's edit the "draw" function now.
We'll use the blocks in the "Display" section to set the font size, type, and color.
Set the following options for the text on the screen:
Since we chose the white font color, let's set the background to black.
Go to the "Display" section and find the block that says "clear the display with screen color Black".
Put the block here:
Go to the "Display" section and find the print block:
We're going to edit this so that it prints the word Volume and the volume value as well.
In the "Text" section, find the block that says "create text with".
Put this block here:
Open the "Text" section again and drag and drop the blank text block in the first window of the previous text block that's in the sketch.
Write "Volume:" in the text box like this:
Put the volume variable in the next window in the text box. This will print the actual volume value.
x and y are the coordinates of the text "Volume:". Set the x to 10 and y to 20.
To print the effect names, we'll have to use the logic function. This step is similar to the one where we assigned the numbers to the effects.
Put this logical function here:
Instead of "true", let's use the comparison block.
Insert the effect variable in the first window and type 0 in the second window.
This means that if the effect is set to 0, then the display needs to show an indicator that there is no effect.
Let's add this condition now.
We need a new variable "effectname" that we'll later use in the functions for printing the effect names.
Create the variable:
Now add the "set effectname to" the block here:
Go to the "Text" section and find the blank text box block:
Add the text block and write "none" in it. This indicates that if the effect is set to 0, the effect is none.
Now we need to repeat this step for all the names of the effects.
Extend the block by clicking on the plus sign at the bottom and close the block at the end by clicking on the small minus sign.
When you entered all the logical functions in this block, it's time to add the block to print the effect name on display.
Go to the "Display" section and use this block:
To print the effect name, go to the "Text" section and choose the "create text with" block.
Put it here:
Add a text window from the "Text" section and write "Effect:".
Put the "effectname" variable in the next window in the block.
Also, set the coordinates of the text.
Set the x to 10 and y to 40.
This function should now print the effect name on display after it prints the volume value.
All it's left is to print the intensity value.
Put another "print" block and edit it like this:
To finalize this "draw" function, we'll use the block "draw sprite to display".
You can find it in the "Display" section.
This is the finalized "draw" function:
And this is what you should have up until now:
The only thing remaining now is to define the input functions for the middle encoder that will regulate the effect and potentiometers that will regulate volume and effect intensity.
Let's start with changing the effects. We'll do this by pressing the middle encoder.
So, let's go to the "Input" section and find the block that says "when button bottom left gets pressed".
Drag and drop this block to the sketch.
Choose the "encoder middle" option in the first drop-down menu and "pressed" in the second drop-down menu.
To choose an effect when pressing the middle encoder, use the following function from the "Variables" section:
Since we have 5 options for effect (none, low pass, high pass, reverb, and bit crusher), we're going to use the "remainder" block from the "Math" section for dividing the number of times the middle encoder gets pressed by 5.
Add the division block in the first window of the remainder block:
Edit the block like this by adding the effect variable:
Now add two of the functions that we created previously: setEffect and draw.
This "Input" is done.
Let's create one that will set the left potentiometer to control the intensity of the effect.
Find this potentiometer block in the "Input" section and edit it like this so it's set to the left side:
After this, add a block that is setting the intensity from the "DJ" section:
Drag the value block from the bottom of the Input block and put it in the window instead of the value 100.
Add the variable function that will set the intensity to the value that's set like this:
To finalize this block, add the "call draw" function:
The left potentiometer input block is done!
This is what you should have for now until we add only one more block similar to the previous one:
Lastly, let's add one more Input block for the right potentiometer that will regulate the volume:
Find the "set volume to" block in the "DJ" section and put it here:
Drag the small value block into the window in the previous block:
Now, find the "set" block in the "Variables" section and insert the value block here:
Add the "call draw" function at the end of the block.
This is it!
You should be ready to Run the project now. It might take a few moments to compile, so please be patient.
If the project doesn't work when you try to Run it, go through the sketch one more time.