Products for USB Sensing and Control
Products for USB Sensing and Control

Sliding Synthesizer with Processing and Java - Part 1/2

Add a physical touch to a custom digital synthesizer


by Phidgets Education

Introduction

Prerequisites

This project assumes you have completed the following guides:

Goal

In part 1 of this project, you will create a simple synthesizer using one Slider 60 Phidget. You will add two more sliders and create a more sophisticated FM synthesizer in Part 2.

Parts Inventory


Note: the first project uses a single Slider 60 Phidget, while the second project uses three.

Hardware

Connect a Slider 60 Phidgets to your VINT Hub, and your VINT Hub to your computer.

Software

Install Beads

We will be utilising the Beads Library in Processing throughout this project. The library is required for Processing to produce sound.

Open Processing and navigate to Sketch > Import Library... > Add Library...

Enter "Beads" in the search bar and install it.

You will see a green checkmark indicating the installing was successful.

Note: Beads is also available as a Java Library so this project can be completed entirely in Java. See Sound Synthesis in Java for a guide for using Beads in Java.

Create Project

Start by opening a new Processing window.

Navigate to File > Examples...

Open the example under Contributed Libraries > Beads > Lesson01_AudioContext

Next, select File > Save As...

Name the program Phidgets_SimpleTone and save it at the location of your choice.

Finally, import the Phidget libaries. If you forget how, go back to the Processing and Phidgets Tutorial.

Finally, try running the example. You should hear static coming from your speakers / headphones.

Write Code

Step 1: Setup

Modify your program so it looks like the code below. Use the flow chart to help with the TODOs. Here is more infomation regarding the wavePlayer Class. We will use the setFrequency method in a later step.




//define slider outside of setup
VoltageRatioInput slider;

void setup() {
    size(300,300);
    
    //Create an Audio Context, 
    ac = new AudioContext();
    
    //assign wavePlayer to generate a sine wave at 440 hz.
    sineWave = new WavePlayer(ac, 440, Buffer.SINE);
    
    //Setup gain
    Gain g = new Gain(ac, 1, 0.1);
    
    //Connect gain to sine wave and audio context
    g.addInput(sineWave);
    ac.out.addInput(g);
    
    try{
        //Create Phidget Object
        slider = new VoltageRatioInput();

        //TODO: Address Phidget object, 
        //      Register for Events, Open Phidget
    }catch(Exception ex){
        print(ex);
    }
}

Step 2: Attach and Detach Events

Next, you can add your event methods.

View the Beads Audio Context API for information about stopping the audio context.



public AttachListener onAttach = new AttachListener() {
    @Override
    public void onAttach(AttachEvent e) {
        try{
            //TODO: Set slider data interval to minimum.
            ac.start(); // Start audio context
        }catch(Exception ex){
            print(ex);
        }
    }
};



public DetachListener onDetach = new DetachListener() {
    @Override
    public void onDetach(DetachEvent e) {
        ac.stop(); // Stop audio context
    }
};

Step 3: Voltage Ratio Change Event

Voltage ratio from the slider is returned as a double between 0 and 1. You will need to map this value to a frequency. The map() function is particularly useful for this. Try mapping the slider to a range of 220 Hz - 330 Hz to start.




slider.addVoltageRatioChangeListener(new VoltageRatioInputVoltageRatioChangeListener() {
    public void onVoltageRatioChange(VoltageRatioInputVoltageRatioChangeEvent e) {
        float voltageRatio = (float)e.getVoltageRatio();
        //TODO: Map voltage ratio to frequency
        //TODO: Set WavePlayer frequency
    }
});

Step 4: Application Quit Events

As always, close your Phidgets when the program terminates.



void exit() {
    print("Closing Voltage Ratio Input");
    try{
        slider.close();
    }catch(Exception ex){
        print(ex);
    }
    super.exit();
}

Conclusion

After you're done, move on to Part 2 where three sliders are used to create a more versatile synthesizer.

There are a lot more sounds that can be discovered and experimented with using the Phidget Sliders and your favourite audio synthesis library. Now that you know the basics, you are free to generate the next coolest tones for your upcoming mixtape!

For more ideas, be sure to check out the following:

Beyond music, we hope this article has inspired you with how fun it is to add a tactile face to programming. If you make something cool using Phidgets or have education project suggestions let us know at education@phidgets.com

Next Steps

After writing the software as described above, you'll be able to modify the frequency of a tone based on the position of your slider. Before moving on, try experimenting:

  • Try mapping your slider to a wider range of frequencies (e.g. 20Hz - 2000Hz)
  • Try experimenting with Sawtooth Waves, adding multiple waves / harmonics to the synth, and whatever else strikes your facny. If you need inspiration check out or Sonifying Processing: The Beads Tutorial, a tutorial by Evan X. Merz.
  • Try adding a second slider and a second Wave Player. Adjust the sliders so the frequencies are close together and you will produce a beat. Learn more about the physics of why this happens here.