setup()
setup() runs once when the sketch starts. It is the perfect place to initialize the webcam and prepare the canvas. The createCapture(VIDEO) function prompts the user to allow camera access—this is a browser security feature.
function setup() {
createCanvas(windowWidth, windowHeight);
// Initialize the webcam
cam = createCapture(VIDEO);
cam.hide(); // Hide the default HTML video element
}
Line-by-line explanation (3 lines)
createCanvas(windowWidth, windowHeight);- Creates a canvas that fills the entire browser window, making the video effect immersive and full-screen
cam = createCapture(VIDEO);- Requests access to your webcam and creates a video object that stores the live camera feed frame-by-frame
cam.hide();- Hides the default HTML video element that p5.js creates, because we will draw the camera feed ourselves with custom effects