Get Started

First Step

Write some code just like p5

function preload(){
}

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

function draw() {
	clear();
	circle(mouseX, mouseY, 50);
	rect(mouseX, mouseY, 100, 100);
}

preload()

for codes that only run once at the VERY beginning

setup()

for codes that only run once at the beginning

draw()

for codes that will run in a loop

Make Some Noise

To make some sound out of it, p5 has its own sound library.

You can use either polysynth or monosynth

(But monosynth can only play one note at a time :)

//initialize
polySynth = new p5.PolySynth();

//play the note
polySynth.noteAttack(note, 0.1); // Play the note with velocity

//release the note after 500ms        
setTimeout(() => polySynth.noteRelease(note), 500);

noteAttack()

Make sound with the first parameter is for the note, and the second parameter is the velocity