Remixing

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.

random image

Now let's create three variables that we'll use. Name the variables effect, intensity, and volume.

random image
random image

Repeat this step three times, so you have the following variables available:

random image

Drag and drop the "set" block under Arduino run first and choose the "effect" in the drop-down menu:

random image

In the "Math" section, choose the "123" block and insert it into the previous block. Put the 0 value instead of 123.

random image

random image

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".

random image

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. 

random image

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.

random image

Open a drop-down menu in this block and choose any song you'd like to remix.

random image

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.

random image

Let's call it "setEffect":

random image

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.

random image

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.

random image

Drop it into the "setEffect" block.

random image

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:

random image

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.

random image

Make sure to keep the equal sign and type in the 0 in the other window of the comparison. 

random image

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".

random image

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.

random image

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:

random image

We repeated the previous step four more times for four new effects:
  1. low pass
  2. high pass
  3. reverb
  4. bit crusher
Close this block by clicking on the small minus sign next to "else".

random image

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".

random image

Put this block here:
random image

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.

random image

random image

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.

random image

Drop it here:

random image

Like with the intensity variable, let's replace the number with the volume variable here as well:

random image

Open the "DJ" section again and find a block that says "start playing".
Put it here:

random image

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.

random image

Don't forget to drop the "call draw" block here:

random image

Let's edit the "draw" function now.

We'll use the blocks in the "Display" section to set the font size, type, and color.

random image

Set the following options for the text on the screen:

random image

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:

random image

Go to the "Display" section and find the print block:

random image

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".

random image

Put this block here:

random image

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:

random image

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.

random image

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:

random image

Instead of "true", let's use the comparison block.

random image

Insert the effect variable in the first window and type 0 in the second window.

random image

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:

random image

random image

Now add the "set effectname to" the block here:

random image

Go to the "Text" section and find the blank text box block:

random image

Add the text block and write "none" in it. This indicates that if the effect is set to 0, the effect is none.

random image

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.

random image

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:

random image

To print the effect name, go to the "Text" section and choose the "create text with" block. 

Put it here:

random image

Add a text window from the "Text" section and write "Effect:".

random image

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.

random image

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:

random image

To finalize this "draw" function, we'll use the block "draw sprite to display".

You can find it in the "Display" section.

random image

This is the finalized "draw" function:

random image

And this is what you should have up until now:

random image

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.

random image

Choose the "encoder middle" option in the first drop-down menu and "pressed" in the second drop-down menu.

random image

To choose an effect when pressing the middle encoder, use the following function from the "Variables" section:

random image

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.

random image

Add the division block in the first window of the remainder block:

random image

Edit the block like this by adding the effect variable:

random image

Now add two of the functions that we created previously: setEffect and draw.

random image

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:

random image

After this, add a block that is setting the intensity from the "DJ" section:

random image

Drag the value block from the bottom of the Input block and put it in the window instead of the value 100.

random image

Add the variable function that will set the intensity to the value that's set like this:

random image

To finalize this block, add the "call draw" function:

random image

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:

random image

Lastly, let's add one more Input block for the right potentiometer that will regulate the volume:

random image

Find the "set volume to" block in the "DJ" section and put it here:

random image

Drag the small value block into the window in the previous block:

random image

Now, find the "set" block in the "Variables" section and insert the value block here:

random image

Add the "call draw" function at the end of the block.

random image

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.

random image