In this code, I've created an interactive web application that combines a live webcam feed with a drawing canvas.
I create two graphics buffers: graphics for drawing and displaying the drawings, and classificationGraphics exclusively for classification purposes. The graphics buffer has a transparent background and is used to overlay drawings on the webcam feed, while classificationGraphics has a white background, ensuring that only the drawings are used for classification, without any interference from the webcam feed.
In the draw function, I display the webcam feed on the left side of the canvas and overlay the graphics buffer onto it. The same graphics buffer is also shown on the right side of the canvas as a separate drawing area. During the mouseDragged event, I ensure that drawing occurs only on the right side of the canvas, and I replicate these drawings on both the graphics and classificationGraphics buffers.
For image classification, I use DoodleNet with ml5.js. The classification is triggered in the mouseReleased function, and it analyzes the content of the classificationGraphics buffer.
Comments