p5.sound Library: Part 3

NOTE: This workshop is broken into 3 parts, due to come constraints with the number of canvases using the p5.sound library. Click to go back to the previous section of this workshop.

Using p5.sound to generate sound

p5.sound library provides the p5.Oscillator object, which creates an audio signal that oscillates between -1.0 and 1.0. By default, the signal will oscilate in a sine wave form. The p5.Oscillator will start generating the signal with start() function, and there are also other functions that you can use to manipulate the audio signal being generated.

• amp(vol): Sets the amplitude to vol of minimum 0 and maximum 1.0
• freq(val): Sets frequency of an oscillator to val
• setType('type'): Sets type to 'sine', 'triangle', 'sawtooth' or 'square' (default is 'sine').

p5.Oscillator object can be created inside the setup() function, and depending on the behavior of signal you are trying to generate, you can also initialize amplitude, frequency and type values also in the setup() function.

var osc;

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

Below example code will change the frequency of the oscillator depending on the mouseX position. The mouseX position is mapped between 220 and 880.

var osc;
var playing = false;

function setup() {
    createCanvas(windowWidth, windowHeight);

    osc = new p5.Oscillator();
    osc.amp(0);
    osc.start();
    noStroke();
}

function draw() {
    if (playing == true) {
        background(0, 30);
        fill(255);

        var frequency = map(mouseX, 0, width, 240, 880);

        osc.freq(frequency);
        ellipse(mouseX, height / 2, 100, 100);
    } else {
        background(255);
    }
}

function mousePressed() {
    if (playing == true) {
        osc.amp(0);
        playing = false;
    } else {
        osc.amp(1);
        playing = true;
    }
}
                

Below example code combines OOP with p5.Oscillator:

"use strict";

var osc;
var playing = false;
var particles = [];

function setup() {
    createCanvas(windowWidth, windowHeight);

    for(var i = 0; i < 50; i++){
        particles.push(new Particle(random(width), random(height)));
    }

    osc = new p5.Oscillator();
    osc.amp(0);
    osc.start();

    noStroke();
}

function draw() {

    if (playing == true) {
        background(0, 30);
        osc.amp(0.5);

        for(var i = 0; i < particles.length; i++){
            particles[i].checkBoundary();
            if(particles[i].hit){
                osc.freq(particles[i].frequency);
            }
            particles[i].update();
            particles[i].display();
        }

        fill(255);
    } else {
        background(255);
    }
}

function mousePressed() {
    if (playing == true) {
        osc.amp(0);
        playing = false;
    } else {
        osc.amp(1);
        playing = true;
    }
}

class Particle{
    constructor(x, y){
        this.x = x;
        this.y = y;
        this.xSpeed = random(-5, 5);
        this.ySpeed = random(-5, 5);
        this.size = random(25, 75);
        this.col = color(random(255), random(255), random(255), 100);
        this.frequency = int(random(220, 680));
        this.hit = false;
    }

    checkBoundary(){
        this.hit = false;

        if(this.x > width || this.x < 0){
            this.xSpeed *= -1;
            this.hit = true;
        }

        if(this.y > height || this.y < 0){
            this.ySpeed *= -1;
            this.hit = true;
        }
    }

    update(){
        this.x += this.xSpeed;
        this.y += this.ySpeed;
    }

    display(){
        fill(this.col);
        ellipse(this.x, this.y, this.size, this.size);
    }
}