Sketch link https://80u1v.csb.app/
Description
It’s a web app that allows users to pick whatever doodle sketch they’d like to color.
Inspiration
In my other class, we have been exploring and building creative tools for phones. I think the interactions people have with their phones could be more meaningful and fun instead of only scrolling and tapping. Being introduced to Google's quickdraw dataset and ml5's sketch RNN, I found it fun to play with those libraries. As I'm brainstorming how I could combine those libraries and creative tools, I thought about coloring books. I often find myself to only color the sketches I enjoy on physical coloring books, so I thought it'd be cool to make an interactive coloring book.
Process
How did you make this? What did you struggle with? What were you able to implement easily and what was difficult?
I divided the project into four parts, create page input box, load the doodle sketches, match the words input to doodle categories, and build coloring brushes/picker.
Originally I wanted to use the quickdraw dataset for generating doodle sketches, but I did know how to read the data file in javascript. Also, because the dataset is huge and contents 3000+ categories, I was worried that it'd take a long time to load and generate doodles for the user experience. Therefore, I decided to go with the ml5 sketchRNN library. It's easy to use and responds quickly.
I was able to implement coloring brushes and coloring picker easily.
Audience/Context
Anyone who’d enjoy an interactive coloring experience, and thinks collaborative drawings are fun. Users can either coloring on the laptop or coloring on their phone with their fingersUsers can either coloring on the laptop or coloring on their phone with their fingers. It's fun, and gives users the control of their own experience.
User testing
What was the result of user testing? How did you apply any feedback?
Code references
Next steps
Look into better ways to load all 3000+ categories of doodle sketches, maybe use https://magenta.github.io/magenta-js/sketch/ ?
Users can input not only nouns, but also full sentence that can generate multiple doodles in the same canvas.
Comments