p5js selfie

As my first Creative Coding assignment, I had to draw a selfie using p5js. It was a lengthy process but I’m pretty satisfied with how it looks! For starters, here’s the end result.

my process

My first thought was to use Photoshop actions to make my picture cartoony, then trace over it on Illustrator, and use the anchor points to create coordinates for “quads” on p5js (four-pointed polygons).

Original selfie
All my Illustrator layers

I didn’t realize until basically the end that p5js also allowed more complex shapes — so I could just use each anchor point in my Illustrator layers, instead of dividing these pretty complex shapes into quads. Oops.

The quad version was not only more time-consuming, but it produced a worse drawing, because you could see the gaps between the quads. I thought that might be fixed by making strokes, but then the really sharp points created wonky lines which was also not great. In the end, I redid all layers to be complex shapes instead of quads. Given the end result is a lot more polished, I’m glad I took the time.

Close-up of the gaps on my hair

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s