Highlighter

Inspiration

Shiny face is hard, need to know how to shiny face.

We wanted a webapp that will help show the appropriate places to place highlighter on your face. Sometimes remembering a bunch of rules to put makeup on can be intimidating.

What it does

It maths to shiny your face. It maths. Upload a picture of yourself into the computer, staring straight into the camera with a neutral face. Press the submit button and the program will approximate the optimal places to apply your luminizer or highlighter onto your face.

How we built it

We mathed, we cried, we did more math, and we waited for download screens. Building the project required use of intellij IDE, node.js, a little bit of calculus 3, html, css, and html canvas.The project required full-stack development. Code uses vectors and dot product to determine projection. After calculating projection, the resulting vector coordinates are placed into the components for the shapes using in html canvas.

Challenges we ran into

Node.js is not shiny. Javascript is not shiny. We can't shiny Node.js or Javascript. So as mentioned previously, the development of this program required use of intellij IDE, node.js, calculus 3, html, css, and html canvas. The only one of these things we had familiarity with was calculus 3.Everything we worked on over the course of this hackathon was new to us. This meant that there was a lot of troubleshooting that comes with using something for the first time. It meant that everything needed to be downloaded, or formatted or learned before use.

Accomplishments that we're proud of

We hope it works. We both got hands on experience with full stack development. Applying the math that we learned in school less 3 months ago was rewarding and gave us a sense of accomplishment. It really helps us to remember that what we do in school only strengthens us as programmers.We both didn't sleep very much, the whole time was spent working on our projects.

What we learned

We learned front end and back end development of a webpage. We learned rudimentary JavaScript and html. We worked with node.js for the first time. We've only begun to scratch the surface with html canvas but we intend to use it more now.

What's next for Highlighter

We will shiny more faces and more of the face with more maths, and shinier interface. We would like fix the ratios with AI to learn more ratios of faces to provide a more customized experience for the user. We would also like for our output highlight points to be smoother and larger spaces of the face, more in keeping with how a professional makeup application would be.

Built With

• html5
• javascript
• microsoft-cognitive-services
• node.js