Creating a Selfie Solely with Code

When I first started learning markup, I couldn’t imagine myself doing this.

As a part of my Creative Coding class at NYU Tandon’s Integrated Digital Media program, my task for the first week was to draw a selfie entirely with code. Back when I was an undergrad learning basic markup languages like HTML and CSS, I definitely couldn’t imagine myself taking on a task like this. When I was brainstorming the composition for this odd little piece of digital art, I had two goals in mind.

The first: since the prompt was to create a selfie with code, I felt like I needed some kind of cell phone framework. When I think of selfies, I think of posing in a slightly embarrassing way and smiling.

The second: as something of a graphic designer, I wanted to make some visually appealing. I knew it was going to be a bit harder than picking up a pen tablet and doodling in PhotoShop, but I didn’t want to throw my visual sensibilities into the wind.

Without further ado, here’s a full look at the selfie.

Coded Illustration by Author

And of course…the 181 lines of code it took to create it. If you’d like to have a peek at every line that went into that graphic, it’s all there in the p5.js editor. I started with a dark line art in the first iteration, but I ended up feeling like that was a little too jarring. I kept tinkering with all the different coded elements to get a soothing pastel palette throughout.

I went through a significant amount of trial and error when writing the code behind this little graphic with p5.js. Though I dabble with markup languages, I’m a writer at heart. As a writer, I always try to approach a challenge by researching first.

Screenshot of Code by Author

I started by doing outside research, watching tutorials, and reading through the Make: Getting Started with p5.js book.

The mathematical backbone of the language threw me for a loop at first; words are my friends, but numbers typically are not.

Regardless, I decided to try and build a selfie by layering simple shapes and combining pastel colors for a simple coded illustration.

I even braved a bit of pi to create the curved lines with p5.js’ arc function. Here’s a little snippet of the code that creates the “line art” of my face.

Though I’m far from being a mathematician, I was able to work with the coordinates, tinker with that fearsome slice of pi, and get the lines working.

I feel like I’ll need to practice with the language a bit more before I have a really solid grasp on how to manipulate these functions efficiently, but I think I’m on my way.

Though I’m working with code, I’m still thinking like a regular digital artist.

Screenshot of Code by Author

I’m still getting the hang of the looping nature of p5.js and how proper layering works in the language. Since I’m still getting the feel for how best to organize my code, I fell back on working like a digital artist.

For me, that essentially meant… playing pretend like I was just making layers in PhotoShop or Paint Tool Sai.

I can’t say yet if this is an ideal system for organizing code, but it was a serviceable way to put together this first project.

One thing I learned fast doing complicated illustrations with detailed line arts is the importance of naming your layers.

It’s something that a lot of digital artists I know don’t bother doing, but if I’m doing a big illustration, I’ll easily end up 200 to 300 layers in PhotoShop.

After years of poor organization and never naming my layers, I realized how much time I could save on final edits if I just set myself up for success and named my layers as I made them.

I took that good habit from my experience drawing and named sections of my code accordingly. They’re not exactly “layers” in the literal PhotoShop sense, but it made it easy for me to go back and make changes.

Even when organizing things, I try to make it fun.

I’m notorious for ridiculous file names. While they’re silly, it’s better than the dread of every creative in the digital age: File_Final1, File_Final2, File_ReallyReallyFinal, File_SUPERFINAL, and endless similar iterations that just get incredibly confusing with each additional edit.

Screenshot of Code by Author

I like to throw some silly comments when I get deep into a project. This is probably something I’ll need to clean up when I’m doing more truly professional projects, but for now, I’ll have some fun slipping silly comments into my code.

The loop function did throw me for a loop.

One of my most triumphant (and silly) moments working on this piece was at the very end. The looping nature of p5.js gave me some trouble; I had color and stroke weight modifiers that were cycling in a way that disrupted the other parts of the illustration. A certain fill color modifier wanted to go wild and recolor other parts of the illustration. I found an absolutely terrible workaround.

Screenshot of Code by Author

The console was, quite understandably, rather upset with me. I watched a few other tutorials on YouTube (for where would we be without YouTube?) and when I was trying to learn how to import text into p5.js, I stumbled upon a glorious gem.

Screenshot of Code by Author

A simple command to stop the loop was all I needed. One simple line of code to resolve I problem I tinkered with for four days. It was a glorious moment and it felt great to overcome that bothersome little issue that prevented me from crossing the finish line.

All in all, though I do think I could make the illustration better with more practice, I feel like I did a fair bit of problem-solving and learned a decent amount of the basics. It’s a simple graphic with relatively simple code fueling it, but I’m eager to build on this foundation.

Writer and poet from Neptune. Instructional designer in NYC. Grad student at @NYUTandon studying Integrated Digital Media.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store