setup()
setup() runs once at the start of the sketch. It is where you initialize your canvas, create objects, and set up resources like sound oscillators that need to exist for the entire program.
function setup() {
createCanvas(windowWidth, windowHeight);
noStroke(); // Pas de contour pour les formes
// Initialisation des raquettes
paddleA = { x: 20, y: height / 2, w: 10, h: 80 };
paddleB = { x: width - 30, y: height / 2, w: 10, h: 80 };
// Initialisation de la balle
resetBall();
// Initialisation des oscillateurs p5.sound
// Son de la raquette: Sinusoïde, fréquence 440Hz, volume 0 (silencieux au début)
paddleOsc = new p5.Oscillator();
paddleOsc.setType('sine');
paddleOsc.amp(0);
paddleOsc.freq(440);
paddleOsc.start();
// Son du mur: Triangle, fréquence 220Hz, volume 0
wallOsc = new p5.Oscillator();
wallOsc.setType('triangle');
wallOsc.amp(0);
wallOsc.freq(220);
wallOsc.start();
// Son du score: Dent de scie, fréquence 110Hz, volume 0
scoreOsc = new p5.Oscillator();
scoreOsc.setType('sawtooth');
scoreOsc.amp(0);
scoreOsc.freq(110);
scoreOsc.start();
}
Line-by-line explanation (8 lines)
🔧 Subcomponents:
paddleA = { x: 20, y: height / 2, w: 10, h: 80 };
Creates two paddle objects with x, y center position, width, and height properties
paddleOsc = new p5.Oscillator();
Creates three p5.Oscillator objects (paddle, wall, score) and configures each with type, amplitude, frequency, and starts audio
createCanvas(windowWidth, windowHeight);- Creates a fullscreen canvas that fills the entire browser window
noStroke();- Disables outlines on all shapes drawn after this, so rectangles and ellipses appear solid
paddleA = { x: 20, y: height / 2, w: 10, h: 80 };- Creates an object representing the left paddle with position (20, center-y), width 10, height 80
paddleB = { x: width - 30, y: height / 2, w: 10, h: 80 };- Creates the right paddle positioned 30 pixels from the right edge, same height as paddleA
resetBall();- Calls the resetBall() helper function to initialize the ball at the center with random direction
paddleOsc.setType('sine');- Sets the paddle oscillator to generate a sine wave, a smooth, pure musical tone
paddleOsc.freq(440);- Sets the paddle sound frequency to 440 Hz (the musical note A4)
paddleOsc.start();- Begins the oscillator—it will now generate sound when amp() is called to increase volume