[EDT] – “Draw a Picture”

EDT stands for Emergent Digital Tools, a class I’m enrolled in. This blog post follows my work created as a result of my assignments for this class.

Visual Arts

We are exploring P5.js, a library in Javascript that makes it easier for artists to create their work through code. It’s very easy! Essentially one line can draw the perfect circle you need.

And our assignment is to use this tool to draw a picture. Which is a big moment of realization for me, as it occurs to me that I am enrolled in a visual arts class as a composer. Visual arts has never been my strong suit, but I’ve enlisted in the challenge and so I’ll find a way to give it my all.

My first thought is, I’ve always been inclined to make more abstract works using various lines, guided by my instinct. And, seeing how P5.js is geared towards using simple forms to make work, I thought it would be appropriate to pursue. But I also wanted to show that I know how to use this tool for more than just lines…

As composers do, I created a system.

I imagined a series of repeating lines that I could procedural generate. And after I drew these lines, I could easily imagine a creepy, but happy face in the middle. The result was this sketch.

My sketch

This poses a few challenges:

  1. The curved lines follow a system and I wanted to code that system as efficiently as possible (not part of the assignment, but I want to flex my math muscles as they have a tendency to atrophy).
  2. The curve of the mouth is very specific. While I can use simple arcs for everything including the eyes, the top of the mouth needs a bit of a swoop on the right to be pulled off. I’ll have to figure out how to do that in p5.js
  3. I don’t think this sketch is everything I want in the picture. I need to think about embellishments and color.

Curved Lines

I knew the radiating curved lines followed a pattern. So I looked at how to draw these lines in p5.js (the arc() tool), and the variables that defined the tool. The tool defines the arc based on how far we’re going around a hypothetical ellipse. So I had to figure out what polar coordinate system it used and how many radians I wanted depending on how far out the curve was. It took some guessing and checking, but I settled on a logarithmic drop off in radians. (I also adjusted the darkness so it had a radiating feel).

The Mouth

Figuring out how to make the curve of the mouth you see above wasn’t hard. It just required the curveVertex() tool. But figuring out how to fill this in was a whole other story. The curve it creates only fills in if it wraps around itself so much, and even so, that mouth is made of two arcs and this curve. Their fills didn’t overlap. So I had to wrap the curve back around the mouth so the fill would show, then fill in the gaps with a filled polygon.


Rattling around in my brain, somewhere, was this image:

Shepard Fairey’s Andre the Giant

Which I’m pretty sure I got from an episode of Family Guy, but that’s irrelevant. The point is, the idea in my head was colorless, but I feel the need to add color.

So I started with the background. It could be one color, but as soon as I did that, the picture screamed 1990’s internet page. And I diagnosed the issue as the monochrome nature of the background. It needed some dodging at the edges to add some fade. Let the eye ease into the picture.

A quick Google search led me to this example, which was very useful, but only allowed dodging on one edge, I wanted a diagonal gradient. So I modified the code, nuanced my blue, and then modified the radiating lines to make them fade into the background better.

Lastly, I wrote everything for a 400 x 300 pixel resolution and couldn’t live with it, so I upped the resolution by multiplying everything by 3. This complicated the code… but wasn’t earth shattering. I then touched up the fade on the radiating lines.

At this point, I had spent way more time on this than I actually had, so I had to call it good. It’s a bit minimalist, so we’ll see how that plays off!

– Dewey

Leave a Reply

Your email address will not be published. Required fields are marked *