I watched a tutorial video from the coding train about painting with Pixels, which I thought is really cool. So I tried to do this pixels first.

Then I thought it was a little boring, so I added a slider to control the size of the brush circle.

Then I added another slider to control the transparency of the brush circle.

To make it more like a painting, I added a white frame.

Also, I added some text to explain the two sliders. However, I found that text() can only display the text inside the canvas, while the sliders are outside the canvas. So I tried creating an HTML element with createP() or createDiv() and style it with CSS.

https://editor.p5js.org/HanBao/full/X6odeNAX0

let video;
let particles = [];
let slider, slider2;
let displayText, displayText2;

These variables are declared for the video capture (video), the particles array (particles), two sliders (slider and slider2), and two HTML text elements (displayText, displayText2).

function setup() {
createCanvas(600, 600);
pixelDensity(1);
video = createCapture(VIDEO);
video.size(width / 10, height / 10);
video.hide();

setup() is called once to initialize the canvas and elements. createCanvas(600, 600) creates a 600x600 canvas, pixelDensity(1) sets pixel density to 1 for simplicity. createCapture(VIDEO) accesses the webcam, and video.size(width / 10, height / 10) reduces the video resolution by scaling down. video.hide() hides the video element from the display.

for (let i = 0; i < 100; i++) {
particles[i] = new Particle(random(width), random(height));
}

A loop creates 100 particles, each with a random initial position on the canvas. Each particle is stored in the particles array.

slider = createSlider(2, 50, 24);
slider.position(110, height + 10);
slider2 = createSlider(5, 255, 125);
slider2.position(440, height + 10);

Two sliders are created. slider controls brush size (with a range of 2 to 50, defaulting at 24), and slider2 controls transparency (range 5 to 255, defaulting at 125). Their positions are set just below the canvas.

displayText = createP("Brush Size:");
displayText.position(32, height - 1);
displayText2 = createP("Brush Alpha:");
displayText2.position(352, height - 1);