Inspiration
Drawing diagrams, especially in anatomy, really sucks, as the diagrams are so tough to draw for many people. Took a good picture on your phone? Well trying to draw it can be hard as well. Inspired partially by many note-taking apps, their UIs are very smooth and I use the drawing tools a lot.
What it does
Tracy, an image-tracing app, makes art tracing a lot more easier by uploading an image and setting it at a lower opacity, like tracing under a light.
How we built it
Built using html, css, javascript, p5.js library.
Challenges we ran into
I had to learn about 60% of the things involved in this project. I didn't know intermediate css or javascript, so I had to self-learn much of it on the first day. I also wasn't familiar with the p5.js library, which is what makes the drawing tools smooth and builds the canvas.
Being a solo beginner, I was hit hard by the time limit and the conflicts with my daily events. I had limited time to learn what I have to and it was difficult keeping up.
Technologies used (AI)
I did use Google Gemini to see how the p5.js would integrate into javascript to create the canvas, but I actually coded it by learning the reference from the p5.js website, so no AI code is in this project.
Accomplishments that we're proud of
I learned so much about intermediate web dev and languages. I was a very novice when I started and I feel way beyond that after the project. The project teaches me about the web dev process and I really enjoyed it.
What we learned
Learned so much intermediate css, translated java logic to javascript, learned javascript syntax, p5.js syntax, learned many html tips I didn't know.
What's next for Tracy
This project is kind of unfinished, since the importing image button that makes the tracing possible wasn't finished in time. I plan to finish that and add more functionalities a drawing app would have. Maybe even style it in a better theme.
Log in or sign up for Devpost to join the conversation.