Harold

Description

This is Harold, a friendly fish Dachshund human hybrid. Harold has the power to change the world around him with the blink of an eye.

Click your mouse to make Harold blink.

Design Process

I had to create a figure with my head, Ina's body, and JinxinLi's legs. To make a drawing that resembled the original ones as much as possible, I thought I could use Illustrator to record multiple coordinates and plot them in P5JS. Unfortunately, this approach did not work as the image created was too angular and geometric. In order to preserve my mental sanity and not code hundreds if not thousands of bezierVertexs, I did a bit of research and found that it was possible to translate Illustrator files to .SVG and .SVG into HTML5 Canvas (the foundation of P5JS). I proceeded to draw each section of Harold on a different Ai layer and save it as a separate .SVG file, after that, I used a web tool to convert the .SVG file into HTML5 Canvas code. I then procedeed to clean up the code in order to paste it in P5JS, assigning each block to a user-defined function. I also coded a function to have Harold blink, and the background change every time the mouse was pressed and released. Thanks to "designers do code" for the awesome tutorial on how to convert Ai files into html5 (https://www.youtube.com/watch?v=BATJDnUsTiU)

Reflection

As a big fan of the "work smarter, not harder philosophy," I was quite delighted to be able to translate illustrator files into code. This gave me the perfect opportunity to use user-defined functions and taught me a new, nifty, and useful trick.