Illustration Project

 

     This assignment was to create an interactive illustration using HTML5 Canvas with at least 2,000 lines of code and include ten shapes and gradients to illustrate dimension. We were required to make each image appear that stood out on the page as well as have multiple interactive elements that kept the user entertained and engaged in the illustration. The code needed to be well organized and flow through, with meaningful comments to explain where and what each element was. 

     For this assignment, I used two inspiration pictures; one was a cartoon city, and the other was a 3D version of the Powerpuff Girls to create my final illustration. I added gradients to the shapes I made to have them appear three-dimensional, as well as using mouseX and mouseY components to make the work user interactive. I used 3,273 lines of code for my image, which took me 37 hours to complete. I used Photoshop to get the coordinates of different elements to code them in, as well as the exact colors from my original images to make them look identical to my illustration. This project was very challenging and time-consuming, but I enjoyed every second of it because it pushed me to think outside of the box and challenge myself as a coder.