[ICM] A1: Our Own Screen Drawing, or 50 Shades of Grey (pixels)

The assignment

We had to create “our own screen drawing: self-portrait, alien, monster, etc. Use 2D primitive shapes – arc(), curve(), ellipse(), line(), point(), quad(), rect(), triangle() – and basic color functions – background(), colorMode(), fill(), noFill(), noStroke(), stroke(). Remember to use createCanvas() to specify the dimensions of your window and wrap all of your code inside a setup() function.”

My approach

I wasn’t sure at first what to draw. I knew I wanted to do a self-portrait, but it’s hard to draw yourself with code. Especially when you are a newbie. At first I tried drawing myself from the side and it was horrible. I scrapped it, thought long and hard, and then I had my ‘a-ha!’ moment. I thought, “well why not combine this with something that I already know?” So, I combined my GIMP (an open-source image editing software, definitely check out) skills with p5. I picked out a photo that I recently used for my NYU ID card, simplified the colors and put a threshold on the values between black and white, so that I have minimal colors and finally pixelated the whole images to break it down into tiles of 5×5 pixels:

“I am the most brilliant man on earth!” I thought to myself gleefully, thinking that this will be simple. Nope. It took 7.5-8 hours. I felt like Bart Simpson in the opening of The Simpsons.

Bart Simpson from The Simpsons writing on chalkboard.
Bart Simpson from The Simpsons

The process

I used only the fill() function and used rect() as my tiles of 5×5. I basically went from left to right and where it wasn’t white (there was so much grey, I am going to dream in blends of grey I am sure of it) I filled it in. So all in all, I basically worked with negative space. The Measure tool and the Color Picker in Gimp did wonders for me because they told me exactly what pixel and what color I am working with.

p5 open on the left side in browser and Gimp open on the ride side. I sourced my image from Gimp and wrote it in pixel for pixel in p5.
the beginning of it all

The first half of the face took extremely long. About 5 hours, the other half with black pixels mostly took the rest of time. I do think I kind of sped up at some point. I wanted to give up 6 times, but I knew I had to complete the assignment.

The outcome

Final black and white image with gimp on the side as reference.
the final image

Since I worked with a black and white image it turned out a little boring. To make it a little more interesting I decided to give myself a red eye Terminator style.

final image Terminator style with p5 code on the side
final outcome Terminator style

Lessons learned

  1. Marking code with double slashes “//” was extremely useful. A few times I put in the wrong color and didn’t realize until after, but finding it was extremely easy because I knew which x-point I am on.
  2. Never do this again.
  3. Never do this again.
  4. Armin van Buuren is the best in trance.

How computation applies to my interests

Honestly, I don’t know. I used to alter code, but was never able to create code. I don’t have that bone in me. I never thought “oh I can write my own plug-in for this Community Management System”, I always thought “oh look how many awesome plug-ins there are available on somewebsitename dot com”. I was always busy managing a community or a website and I was able to deliver that way. My friend actually did code and he would request images from me and I would provide them. Henry Ford is credited with assembly line production and it works. We split jobs and therefore are able to accomplish them faster.

The lukewarmness I have for computation comes from not understanding it. It’s pure ignorance and I want to learn more. I attended the ml5 sessions on Friday and it was quite interesting. I really liked all the cool processes and tools people created. I would like to learn how to make them.

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