My full name is Matthew William McClane, and I’ve always been drawn to the way my initials MWM look when placed together. The repeating lines create a clean, functional rhythm, almost like a logo in themselves. For my self-portrait, I wanted to capture that feeling rather than a literal drawing of my face. I’ve never been interested in illustrating faces, whether my own or others, and I see self-expression as something that can also come through in design, typography, or symbolic marks. Using my initials as the foundation, I plan to explore how code can transform a simple set of letters into a personal identity piece.
Quick sketch
I didn’t want to use any AI to vibe code this and instead wanted to gain a better understanding of the p5 library and its resources. One issue I ran into was implementing a 3D model (such as a cylinder) from the library onto the sketch - essentially trying to put my initials over the model. This was hard to replicate in the end and I instead pivoted back to the original sketch idea on paper.
Step 1: Setting Up the Canvas I started by with the default canvas of (400,400). In the end however, I ultimately adjusted the size to (420,410) since it centered the line segments better.
Step 2: Creating a Dotted Background I made a dotted grid using two loops, one moving across and one moving down the canvas. At each intersection, I drew a small gray circle, which evenly spaces the dots and makes the canvas look like a dotted notebook.
I referred to this example: https://editor.p5js.org/eevirutanen/sketches/Nx-ZaIwh7 while adjusting the aesthetics to my liking.
Step 3: Drawing My Self-Portrait To build the ‘MWM’ design, I only used simple line segments, connecting points one by one to replicate the letterforms. Each stroke was manually plotted with start and end coordinates rather than relying on text functions or shapes.
Key Coding Concepts
Loops: I used loops to repeat instructions for drawing all those dots, which made my code much shorter and more flexible.
Layers: By drawing the dots before my self-portrait, the background grid appears behind everything else.
Questions