The third postcard was meant to explore the contrasting relationship between analogue and digital. For this design, I wanted to show my tendencies in working with digital mediums as opposed to print and traditional materials. However, I wanted to take a reversed approach with the execution of this design. Instead of using code to create a work or design, I wanted to create something by hand first, and then convert it to code.
The process began with me hand lettering my name on a sheet of paper. I used a calligraphic marker with a chisel tip and carried out some exploration.
I then picked the one that I like the most and scanned it into the computer. I proceeded to vectorize the lettering using Image Trace in Adobe Illustrator.
After this, I saved the output as an SVG file to expose the vector path information and its corresponding code. The code generated is in fact, a complex system of cartesian coordinates and equations that compute curves and lines. Here is a screenshot of the code from within Coda, my code editing program of choice.
And here is the solve for the vector path
As seen above, the code ended being extremely long and complex for it to be used in a visually appealing way. Furthermore, the moire process would introduce too many gaps in the delicate text, rendering them unreadable and unsightly. As such, I decided to use only a small portion of the code to represent the idea of coding. In the end, I settled with the header segment of the file.
I rendered the portion of the code in the same font, “Input Sans”, which I also use in my code editor. I chose to set the font to black as it would be more resistant to the gaps created in the moiré process. I ended up with a 3 frame animation that presented the code, and then the solve for the path, and finally the actual image that I started with. This is the composite:
And this is what the final animated version looks like, when interacted with: