Interactive Coloring Page
By Zoe Descoteaux
Inspiration
Can code be used as a tool for meditation and relaxation? This is the question that I wanted to explore the most in my creative coding showpiece. Originally my plan was to make a generative art piece that responds to mouse movements. I liked the idea of having the user be able to control what happens on the screen, the point being to get their mind off of day to day stress. I had decided from the beginning of this project that color would play a very important role in my piece, but I still wasn’t sure how to incorporate it in a way that would give the user total freedom to play.
I had envisioned using p5.js as a tool for creating my piece after finding this resource, which allows the user to chose from a color palette and freely draw on the page.
Proposal
After looking at a number of different resources I had established that I wanted to create my own coloring page. Originally I had pictured having my blank image on the page, as well as a color palette and an option to change the brush size. Essentially the user would be able to draw directly onto the page, having the color go behind the image and preserving the black lines.
At this point in the process I still had no idea how I was going to execute my piece. I was starting to think that maybe having a brush was not a good idea, and I found it hard to believe that someone would find it relaxing to constantly make sure they are coloring in the lines. I thought about instead having the objects perfectly colored in when the user clicks a certain area of the image. I decided to do more research on similar projects and art pieces. I wasn’t sure if this had already existed or if it was even possible to make, but I was able to find exactly what I was looking for.
This is an SVG coloring book that I found on Codepen, and it is what I ended up using as inspiration for my own coloring page. The artist is Brett Williams. As stated previously I had intended on using P5.js to write this code, but after playing around with Codepen it seemed like the best direction for me to go in.
Assets
Color
I created a color palette of 24 colors, specifically those that are bright, soothing, and appealing to look at.
SVG
I started by making a line drawing of Magic Gardens, making sure it would be engaging enough to play with. I then took my drawing and scanned it into photoshop where I was able to fix any mistakes and clean up the lines. Finally I brought my drawing into illustrator where I used image trace to turn black lines and white areas into shapes that can be filled with color. From illustrator I was able to export my SVG file.
Problems
A big problem that I ran into was not being able to color my own SVG in. I tried replacing the SVG file in Brett Williams’ original code with my SVG, which allowed the image to show up but no color could be added to it. I thought that maybe it had something to do with the javascript because of an error that kept showing up saying that the jQuery was not defined. I was able to fix the javascript error by linking the jQuery to my project, but this did not solve the coloring issue.
Solutions
I ended up bringing the SVG from Brett Williams’ code and my SVG into Dreamweaver to see if there were any major differences in the format of the code. Both codes had a series of paths and fills so nothing had to change there. I was able to get my SVG to color in after defining a few things that were not originally defined in my SVG. I copied and pasted the first few lines of Williams’ code which defined the height and width, and also established a class and id which I had not previously had in my SVG. This allowed my SVG to finally color in!
CSS
Now that I was able to get my code to do what I wanted it to do, it was time to make it my own style. I changed the type and buttons as well as the color palette slider to keep things looking a little more modern and clean. I added a textured background image that I created in photoshop to give the piece more of a paper like feel.
Conclusion
Overall, I’m really happy with how this project came out. I learned so much about all the possibilities of creative coding. I can see myself expanding this project into a full coloring book with more pages to chose from.
This project was completed as a part of the Spring 2021 Creative Coding class at Tyler School of Art and Architecture. For more projects from this class, visit the Creative Coding medium feature page.
