Inspiration
I've been pretty stressed this past week, and mental well-being is just as important as physical, so I thought of something to take my mind off it. Art is fun, but can sometimes be frustrating, so I decided to go for a simple coloring program.
What it does
My project is a browser-based program that lets you color intricate mandala shapes without access to a printer or art supplies.
How I built it
The webpage is built from HTML, CSS, and JavaScript.
Challenges I ran into
One of the challenges I faced was how neatly coloring in complex shapes can be difficult on a mouse or trackpad. However, a fill tool isn't nearly as satisfying as slowly working your way across. The solution was discarding any color outside the current section while the user painted it in, which took a lot of time and problem-solving to implement.
Also, it took a lot of time to make the page look half-decent (I'm not too practiced with CSS).
Accomplishments that I'm proud of
Even coming close to finishing a project in such a short time is a definitely an accomplishment for me. I'm proud of the effort I put in and pushing myself a bit out of my comfort zone.
Implementing an efficient flood-fill algorithm, multiple drawings, and that sectioned color mode were beneficial experiences for me that I'm proud of.
What I learned
I learned how to use the canvas element in HTML, and manipulating multiple canvases to achieve the results I wanted. I also learned about pseudo-elements in CSS, which made some of the UI visuals easier.
What's next for Mandala Coloring
If I had more time, I would've liked to add panning and zooming on the canvas and support changing the size of the browser window. In the future, I can see myself making this project a mobile app to drive home the convenience aspect.
Log in or sign up for Devpost to join the conversation.