Creating a Self-Portrait in Processing
Programs: Processing, Adobe Illustrator
Time Spent: 1 week
Completed: April 6, 2022
The goal for this project was to create an abstract self-portrait using Processing. Since I had never used Processing before, it was quite a challenge!
Processing is a programming language designed to help teach artists and designers how to program. It is well-suited to creating works of art.
First, I created a mood board to define the visual style for my portrait and creating some preliminary sketches. I decided to be inspired by the vaporwave aesthetic for this project.
After receiving feedback from my professor, I chose to go with the sketch to the left, where my face is framed by the triangle for the sense of balance that the composition has. The sketches below were less balanced due to the grid lines, which are common in vaporwave designs.
Pseudo-Code
Next, I wrote out the pseudo-code for my project. Pseudo-code is "code" written in a human language that helps the programmer plan which items to program and in which order to program them in.
I later revised my pseudo-code to account for the fact that Processing will create the shapes that you coded last on top of the shapes you coded first.
So instead of drawing the background lines last (which would put them on top of my portrait), I switched their placement to the front of the code so that the lines will go behind the face.
Trial and Error
I drew the portrait in Adobe Illustrator as I programmed it in Processing. I had two reasons for drawing the portrait in Illustrator. One, I could use the hex values for the colors I used in Illustrator to color the programmed portrait. Two, I could use the coordinates for the vertices of the shapes I drew in Illustrator to plot the vertices in Processing.
I discovered that using the curveVertex statement (which allows you to draw freeform, curvilinear shapes) with beginShape and endShape will actually close the shape with a straight line (and no stroke) instead of a curve. I looked up how to solve it, and it turns out that a lot of people have had this problem, but they did not have a solution.
I decided to solve this problem by adding more curveVertex points to my curvilinear shapes.
The images above show my process learning how to fix my curvilinear shapes.
_edited.jpg)
Then, I encountered another problem.
For some reason, Processing did not put the vertex coordinates in the same place as on Illustrator (and I set both images as 500 x 500 pixels), so a lot of my work in Processing is gerrymandering the shapes so that they somewhat resemble what I had originally drawn.
The images above show the difference between the two portraits in progress. The left image shows my portrait in Processing, and the right image shows my portrait in Illustrator.
Here are are few screenshots showing my code in progress.
Final Portraits
Here is my final portrait in Processing!
And here is my final reference portrait from Adobe Illustrator!
Although my final portrait in Processing does not look exactly like my drawing in Illustrator, I learned a lot about using Processing and about translating images from one program to another!