Lets build a synthesizer

Three little synthesizers

Here are three synthesizers, written in programming language p5.js, a flavour of the ubiquitous JavaScript. You can program in p5.js online at editor.p5js.org.

Synthesizer 1

A simple sine tone. You can see in the reference documentation for p5.Oscillator that you can enter the frequency parameter on line 2 when the oscillator is created.

function setup() {
  sound = new p5.Oscillator();
  sound.start();
}

What extreme tones could you create? What is the range of frequencies of your hearing, your laptop speakers, and your headphones? If you have pets, test if they seem to hear higher or lower than you? What about your parents? What happens if you run multiple synthesizers at the same time? You can try it also on your phone, does it sound different? Where in the world can you encounter sine waves? Do sine waves even exist, or are they a mathematical ideal?

Synthesizer 2

Adds interaction with a slider. The function setup runs exactly once when you press Play on the editor, and from then on the function draw runs typically at 60FPS = 60Hz = 60 times per second.

function setup() {
  sound = new p5.Oscillator();
  sound.start();
  slider = createSlider(200, 1000);
}

function draw() {
  sound.freq(slider.value());
}

In the reference documentation for createSlider you can see that it takes minimum and maximum values as it's two arguments inside the ( and ) on line 4.

Synthesizer 3

The third synthesizer is an FM, ie. frequency modulation synthesizer; it uses multiple oscillators organized so that the second (the "modulator") changes the first one's (the "carrier") frequency. These arrangements are called algorithms.

base_freq = 220;
modulation_ratio = 3;
modulation_depth = 100;

let carrier, modulator;

function setup() {
  createCanvas(400, 400);
  
  carrier = new p5.Oscillator(base_freq);
  modulator = new p5.Oscillator(base_freq * modulation_ratio);
  
  modulator.disconnect();
  modulator.amp(modulation_depth);
  carrier.freq(modulator);

  carrier.start();
  modulator.start();
}

What values for base_freq, modulation_ratio and modulation_depth on lines 1, 2 and 3 seem familiar, musical, extreme or unpleasant? Could you combine the programs for synthesizers 2 and 3 by building sliders into the FM synthesis? Or could you add a second modulator to modulate the first modulator?

A recording of synthesizer 3 above with modulation_rate 2 on the left and 3 on the right, recorded with Audacity. Can you convince yourself that for each cycle of the carrier, the modulator changes it twice on the left, and three times on the right?

For exploration

• Modify the above software synthesizers.
• Record your modifications. Try to google for "record internal audio" or something like that. Windows computer might have this feature built in with Windows Recorder. On macOS use SoundFlower on pre-Intel chips, or BlackHole for M1 and M2 chips. Use your smartphone if nothing else.