Week 1: Introduction & Drawing

Let’s see, first ICM assignment...shapes, squares, ellipses, my self portrait...Chuck Close! Is how my thinking proceeded after we exited class last week. What follows records my pursuit to program a Chuck Close-esque self portrait.

Maybe if I could “pixelate” a recent photo (Step 1 below), I could create a map of sorts to follow in p5.js. So I turned to Photoshop CS, and lo and behold the Filter > Pixelate > Mosaic feature gave me exactly what I needed (Step 2).

After placing a few guidelines and numbering the rows and columns--23 of each and labeled in blue, I quickly calculated and noted the number of squares in each row in pink (Step 3). Using the eyedropper, I jotted down the grayscale values for each box (Step 4).

In the p5.js web editor I decided to draw each square at 20 x 20 pixels, and since I had previously determined the number of rows and columns, setting my canvas size was a cinch (20 pixels x 23 for both width and height). I used my PS-altered portrait as a guide to start drawing rects, keen to start to commenting quickly before I lost track of my row numbers. With the first row place, it was easy enough to copy and paste all of its lines for each subsequent row and merely change the x and y coordinates by 20.

At this point I became convinced that my particular exercise was the perfect setup for a future lesson on variables because I was copying and pasting my code A LOT. Too much. I still needed to declare each square to color it (or so I think at this point in time), but any repetitive action always triggers my brain to consider a more efficient way. But I was having fun and enjoyed the rhythm of the work (Step 5).

Then the web editor started freezing...and not saving. Oh no, was my inefficiency too much to handle?! I scooped my code into a text editor for safe keeping. There I dropped the fill() function ahead of each rect(), and then plunked in the grayscale numbers.

Back to the web editor, with everything working properly again (whew!), I removed the stroke for each square and presto! my paint by numbers style portrait with rects (see also Step 6).

Using the text editor’s find and replace, I replaced each rect with ellipse, so here’s another version with ellipses (Step 7).

You can slide through all of the steps and portrait variations here:

Current Computational Interests
Looking ahead I’m excited to explore the connection between creative movement and digital drawing. Is it possible to paint with arm waves and legs twirls? The work of Camille Utterback is of particular interest to me for this question, but I wonder if I can comfortably attach sensors to performers instead of using an external device, such as a Kinect?

I also wish to explore image manipulation for which several projection mapping and installation examples caught my attention: Color the Temple of Dendur at The Met, Augmented Hand Series from Golan Levin, Chris Sugrue, and Kyle McDonald, and the Oasis installations from Yunsil Heo and Hyunwoo Bang.

Finally, data visualization always delights in providing me new ways of seeing relationships between information, understanding otherwise difficult concepts, and answering questions that I didn't know I had. Nicholas Felton’s work stands out to me, specifically his PhotoViz, as well as Fernanda Viégas and Martin Wattenberg's Fleshmap Touch. In general, at least from the examples on this site, I can't help but notice a strong connection between mapping and data visualization--yet another possible area to tease out during my studies.