Jumping ahead, I wanted to hybridize the first week’s portrait assignment with components from the first chapter of Fry’s Data Visualization (for Processing). There’s not much simple coordinate drawing, but I wanted to reinforce the data techniques, table use, and start thinking about how to trouble shoot them, as my ultimate goal for the course is to create interactive infographics.
I was hoping to combine point data and coordinates, drawn from a table, imports of svg graphics, png masking layers, and some good old jpgs.Dan Mountford’s elegant combination of landscape (first exposure), portrait (second exposure), and imitation 3D modeling vertex overlays seemed like a good precedent image to recreate on some level. As you can see from png exports, from the processing sketch, I did and didn’t quite achieve the same aesthetic effect, but I’ll a bit more about my strategy and code choices/experiments below.
So I knew that I wanted to work with photos, transparencies, and data. A few flickr clicks later, I had a simple, profile portrait and a few underlays to work with for the sketch. A little photoshop posterization and the delete of black areas gave me the portrait mask. The underlays worked ‘as-is’ and so I dropped everything into illustrator. Why? SVG!
Basically, to replicate Mountford’s effect, I’d need to load the background image, the white mask (later, I choose the tint or alpha adjustment), and a few dots and lines jointing significant features. In illustrator, I dropped a bunch of circles (for their center points) onto the significant peaks of mountains, shore, chimneys, and mew sidewalks. As separate layers, I was then able to export those points, clean out the files between the tabular and word processing function of open office and move from svg to csv to tsv. During that process I stacked the x,y of each profile series with it’s related profiles- hence mountain points and shore points form a final single table. Also, just to make the line triangulation of some of the shots easier, I added back the first profile as a third column (so they’ve a, b, a) and offset it by a row. That way I could work get two lines out of a single ‘for’ loop by reading a single row.
I did have the upper hand, because I was working with Fry’s Table class, but I never quite got the line split at “,” working. So I did some hack saving between cvs/rft/txt/tvs trying to get the conversion right. At the end, I just cleaned things in open office (cvs) copied them into a basic text file and did paste special to get a table which could be converted to text, save as unformatted txt and edit that to tsv… 3 hrs later stuck an ‘id’ column on there for column 0 and everything was playing well with Table.pde Viola!
I’ll save you the details of the point loop structure, but I mixed that with the transparent overlays, an svg profile that I took straight from illustrator and a few text tags for the general Mountford effect.
mousePressed(), else statement
Of course, I couldn’t stop there so I decided that the various ‘network’ overlays of lines and text tags should be tied into mouse and keyboard interactions.
Again, look at the code for the specific of layering. In general, I placed the bar scene, general mask, and title into void draw() and then used ‘if/else’ statements with mousePressed (the mountain/shore underlay) and keyPressed (cambridge chimney/mew underlay) which also layered the svg secondary profile at the right.
If you’re interested in the code, it resides here.
Here are the other results. The fade between views was just to leave traces, but I’m sure there are better mechanisms. Likewise, I know we’ll learn the ends and other svg parsing and sub-layer figure access, but this was really just to get started with some tabular processing.
mousePressed(), if (mouseX<=width/2),
keyPressed(), else, I didn’t insert a lines into the loop here, just for a some variation
keyPressed(), if (key==’ ‘),