Untitled (Self Portrait in Processing)


Processing is a programing language. It also comes with its own development environment. Which is a convenient place where you can write a program, compile it (or, convert the programmatic code into machine language, e.g. 01100101 00101110 01100111 00101110 ) and run your code. It also has libraries that allow you to call functions that would otherwise be a pain in the ass or impossible to write into your own program.

Week 1 Assignment: “Create your own screen drawing: self-portrait, alien, monster, etc. Use only 2D primitive shapes…”

We begin with our canvas.

Screen Shot 2014-09-04 at 12.35.25 PM
This would produces an 800 x 800 pixel canvas.

I thought a grey square might be a little boring. Drab. Uninspiring. Dull. Call it what you will. So I went shopping on the Processing Reference site. I came across the background function. One of the examples demonstrated how to pull in an image as a background. That sounded interesting. So I did.

Screen Shot 2014-09-04 at 12.57.16 PM
Code to pull in an image as a background.

Screen Shot 2014-09-04 at 12.57.06 PMThis background is objectively awesome. (It’s a glitched-up American Flag I made using a pretty incredible tool called GlitchMap.) Keep in mind that background is a “basic color function” and therefore this is a totally legal move. Now that we have our canvas, the artist emerges and prepares to do its art.

I chose to attempt a self portrait…or, rather the self portrait  organically emerged from the mind of the artist (me). Screen Shot 2014-09-04 at 1.26.30 PM

Screen Shot 2014-09-04 at 1.26.34 PM

You can see there’s an ellipse, a few quads, an arc, and a triangle. Placing everything on the canvas using x,y coordinates is fairly easy one you mentally set the bounds of whatever size your window is. There’s are a lot of minor tweaks, a few pixels up or down, left or right to get your shapes where you want them.  You can see that I started to play around with the stroke and strokeWidth functions a bit too.

The arc was a pain in the ass. At first I couldn’t get it to show because I was putting the final 2 floats (start, stop) in as numerals. I saw they need to be in radians…which I was under the impression were the standard numerical measurements of an arc. But boy was I mistaken. They need to be entered as text using a measure of PI. I get it the what now, but I’m not so clear on the why. I’m gonna probably need this explained at some point.

Side note: (And this might eventually be pointless once we move on from static 2D images, but) it would be cool to see a a dynamic set of coordinates next to the cursor as you mouse over the sketch window (e.g. when in screen grab mode on a Mac). That  would make it easier to know where exactly you’re trying to place things.

Next, I added in some small ellipses and used fill to add some color. Screen Shot 2014-09-04 at 1.44.54 PM

Using color to really accent the mood of the piece.
Using color to really accent the mood of the piece.

At this point the broad strokes are all there. It’s expressive. It’s intriguing. It looks exactly like me. Now it’s time to go in and put the finishing touches in. Really get granular and add in the details that are going to make this piece great.

All about the details.
All about the details.

So I put in a lightning bolt. Which obviously represents the raw, elemental power of code. And because lightning bolts are cool.