https://editor.p5js.org/Sitong_Zhou_Silvia/full/IIMfLVtwT
In this project, I created an interactive handwritten math quiz using p5.js and the MNIST dataset.
At first, the digit recognition was inconsistent the same number could be interpreted differently depending on how I drew it.
To solve this, I redesigned the preprocessing pipeline to make my handwritten digits look more like MNIST digits before classification.
After these changes, the recognition accuracy improved dramatically, from around 40–50% to about 85–95% on average.
Originally, I directly resized my drawn canvas to 28×28 pixels.
However, MNIST digits are centered, evenly scaled, and surrounded by padding.
I implemented a new preprocessing function that crops the bounding box of the digit, scales it proportionally, and centers it on a blank 28×28 canvas just like how MNIST digits are formatted.
This alignment step alone made a big difference in accuracy.
My canvas used black strokes on a white background, while MNIST images are white strokes on a black background.
I added a step to invert the grayscale values so that bright pixels represent the written stroke.
This made the input consistent with how the model was trained.
Sometimes I wrote numbers in a corner or left too much empty space.
I now detect the bounding box of non-zero pixels and crop to that region before scaling.
This helps the classifier focus only on the meaningful part of the image the digit itself.