Project Summary
For my project, I decided to use the KNNClassification_PoseNet code Professor Moon sent to us in order to make text responsive to the distance between your face and the camera. I was inspired by my parents, who whenever I show them things on my phone, they have to move their faces further/closer to see what I show them.
The way my project works is that I have two different font-sized sentences. Below the sentences are buttons that the user clicks to gather samples on how close/far their face needs to be in order to read that font size. After they gather the samples, the user clicks a button that says “start reading” and then part of the first chapter of the first book of Harry Potter shows up. The font size changes based on the distance between the users face and camera that was gathered from the previous samples.
Process
There was definitely a learning curve with understanding how the code works at first. I had to analyze how each function was triggered and where the data was being gathered/reset. But after looking at the code for a while, I was able to understand. I dealt with a lot of css for this assignment because I wanted to organize the page more neatly so that the reading and steps would feel more intuitive to users. I also included bootstrap to move the first two buttons into two columns. In the script, it was mostly just using document.getElementById(“”).style.fontSize to change the font size. The rest was fairly simple.
Final Thoughts
My intial goal for this assignment was to make an interface that allows people to adjust the text to their eyesight. I think if I were to work more on this project, I would make the font size changes feel smoother. Right now, they just abruptly change between the face distance changes. I would also probably add images and change the sizes. Aside from that, I would probably just make the interface look neater and more professional.