P'unk Avenue Window

This Friday, Tom and I will be heading to Austin, Texas for SXSW Interactive. As hard as it is to pull myself away from my family, this conference is time well spent. We have started to use it as a milestone for our work at P’unk Avenue and in the Philadelphia tech/geek scene. As in… imagine how many cool things we will do by the time SXSW rolls around next year.

Well, this year has rolled around and I am happy to report that many very cool things have happened. I am also happy to report that Tom and I are heading down with clear missions. Mine is to do a good job on the Regional Whuffie Building: Attracting Innovation to Your City panel. I am looking forward to talking about how Philadelphia is a kick ass place to be right now.

More importantly, though, Tom is looking to bring home the OK Happy Cog’aoke trophy. Some of you may not realize that Tom’s karaoke roots go deep. He has tracked the Philly Karaoke scene for a long time. This will not be an easy task since he will up against competitors from around the world. However, Alex Hillman and Jonathan Finnegan also from Philadelphia could serve to be some of his toughest competition.

If you are going to be there… drop us a line so we can hang out.

And, wish us luck!

If you have passed our studio in the evening, you may have seen a rear projection installation in our window that faces E. Passyunk Avenue. University of Delaware professor, Ashley Pigford was inspired to create this site-specific piece after observing the diverse activity that unfolds at our intersection.

We will be having an opening and discussion on Thursday March 19th. Hope you can come.

P’unk Avenue Active Intersection
A new Sound Installation by Ashley John Pigford
Opening / Discussion: March 19, 6pm-9pm.
Hosted by P’unk Ave
1168 E Passyunk Avenue, Philadelphia PA 19147

In Ashley’s own words:

A camera records activity of the intersection of E. Passyunk Avenue and Federal Street in South Philadelphia. The amount of activity is translated into a constantly updating audio composition that is broadcast through low power FM in the area of the installation. Additional audio of the intersection, recorded live, is mixed into the broadcast composition and the composite video image of the camera is projected into the window of P’unk Avenue. This piece is intended to be experienced as an active participant of the intersection, with your radio tuned to the FM frequency that is projected in the window, or as an observer.

I have bigger fish to fry in my Wednesday window blog post, but I wanted to share this snippet.

A simple list of images like this one:

<ul class="slideshow">
<li><img src="wheatpaste_superman.jpg" /></li>
<li><img src="wheats_tidal_wave.jpg" /></li>
<li><img src="who_is_living_in_our_garden.jpg" /></li>
<li><img src="why_we_lost_vietnam.jpg" /></li>
<li><img src="wilmington_traffic_box.jpg" /></li>
<li><img src="wilmington-trestle.jpg" /></li>
<li><img src="witherspoon_building.jpg" /></li>
</ul>


… Can be transformed into a “click for the next image” slideshow with jQuery like so:

<script>
$(function()
{
  $('.slideshow li').hide();
  $('.slideshow li:first').show();
  $('.slideshow li').click(function()
  {
   $(this).hide();
   var next = $(this).next();
   if (!next.length)
   {
    next = $($(this).parent()).children(":first");
   }
   next.show();
  });
});
</script>

If JavaScript is disabled, you simply have all of the images visible instead, which is a reasonable fallback behavior. And your HTML stays sane and meaningful.

jQuery is a beautiful thing.

You can play with a demo here.

Bringing together great people for Ignite Philly on a weekday evening has been great… imagine what a Saturday night Ignite Philly will be like! That’s right, we are beginning planning now for Ignite Philly (3). It will take place once again at Johnny Brenda’s on the evening of May 2, 2009.

We are looking for inspiring speakers that are doing cool things in Philadelphia. Are you working on a rad project, have something interesting to say or know someone that is? Please comment with links and we will do our best to follow up and get them on the stage. Keep in mind, this is not a sales event. This is about sharing ideas.

I’ve been having an ongoing dialog/freakout with myself regarding authorship and creating content.

My degree is in folding metaphorical envelopes and I’m tired of licking them. I want to be a letter writer, but I have nothing to say.

But maybe that’s the point. For the sake of argument, there have only been a dozen or so original (archetypal) films ever made. Following those have been scores—six hundred or so a year—of genre films. Many of which are formulaic, the smarter of which do that reflexive meta Charlie Kaufman thing, where they acknowledge the formula. Fifty or so years of French films have used the modes of production over plot as vehicles for morality.

Maybe this is ok. Our brains are relational. We make connections and use them to process new things based on our previous experience. In the animal kingdom this probably helps animals decide what to do when they encounter an unfamiliar predator. In graphic design, museum art, music, film, and literature this is called vernacular. With culture ever reproducing, remixing, co-opting, we need these similes and metaphors.

When reviewing a movie for a friend I say, “it was sort of like Alien, but with that drug-stupor Spike Lee steadycam thing.” Or a band, “they’re kind of like Black Dice, but fun like Black Eyes, with the train wreck theatrics of Black Lips.”

At some point the snake might finish swallowing itself and we’ll be released from this cycle. For the time being I’m just going to have to keep making better envelopes with totally rad security patterns.

Today will be a day to go over everybody’s instructables project documentation and to reflect back on the first half of the semester. We will be meeting individually with you for the second half of the class period. We are also going to give noogies to Jared Delorenzo, Tim Peet, and Tom Reynolds for doing work, getting publicity for it, but not capitalizing on attribution. We saw the Eames hack project all over the internet a year and a half ago, but never got to know the perpetrators. Without a link back, publicity becomes a deadend.

Over break you will be submitting your final project documentation as actual Instructables entries. Some of you have already done so.

You will also have the opportunity to flesh out your wordpresses— documenting previous projects, current studio work, and personal accomplishments. As designers we often find ourselves playing the dual role of author, creating content and backstory for our work. For the next class you will be filling in that backstory. Your About Page should provide information ABOUT you. You should get credit for your work, building leverage with each new opportunity.

As an aside, those interested in the world of Graphic Design can supplement this week with a reading from Design Observer about the often subtle role design plays in our lives. Remember, we are available at any time to discuss visual design concerns.

Week 6

READ:

• What’s In A Name? by Steven Heller, Director of the Design Authorship Program at SVA
• A Layperson’s Guide to Graphic Design by Adrian Shaughnessy - Recommended, but not required.

WATCH:

• Achieving an Absolute Aesthetic by our own Rick Banister. Some of you watched part of this last week. We’ll be showing it in the second section today.

CREATE:

• Your instructable. If you haven’t done so already, take your revised project documentation and create actual entries on the Instructables site. Get some eyes on your project by participating in the Instructables community.

• More refinements to your blog. By the time you get back from spring break, there should be no more Hello Worlds or default About descriptions. Use your real names.

COMMENT:

• Post your thoughts on the readings to your own blog. Write as if you have an audience other than us. As if maybe next week you’ll be linked on Gizmodo or Wired.

Why back in my day we walked uphill both ways through slushing sleeting flaming hydrogenated bat oil without iPhones and we liked it. Youngsters today have no [INSERT NOUN HERE].

Okay, so sometimes the old ways are retarded. Entertaining to read about, but retarded. We no longer have to write video games in 2K of ROM (English translation: considerably less than a printed page’s worth of information). Better yet we’re not stuck playing them.

But sometimes, insane constraints produce beautiful solutions.

These days most web sites employ dynamically generated graphics, even if it’s something as simple as generating and displaying thumbnails of a photo. This is typically done with tools like the gd library, which I originated, or ImageMagick.

Both of these tools assume you have a lot of memory to play with. This is a reasonable assumption for two reasons:

1. It’s 2009. You do have a lot of memory to play with.
2. Both tools let you draw things on the fly on top of an image (creating charts and graphs, for instance) and then save it again. The sensible way to do that is to load the entire image into memory as a nice, convenient two-dimensional grid of pixels.

Trouble is, that two-dimensional grid of pixels can be pretty darn big. Sometimes even by modern standards.

That ten-megapixel camera you just bought? It creates images that take up ten megapixels times four bytes equals roughly forty million bytes of memory when you load them up with the gd library (usually via PHP’s imagecreatefromjpeg function).

Is that a dealbreaker? Well, your server probably has at least 2GB of RAM in it, and virtual memory besides. But that’s not the whole story. Most sites are deliberately set up with much tighter limitations on the amount of memory that a single PHP request can use up. And when dozens of people are uploading huge photos at the same time… well, there are good reasons to have those limitations.

So we’re back to the old days. That damn red dragon is going to eat us if we don’t find the sword to kill the memory monster.

Enter the netpbm library: a collection of sweet, simple command line tools for playing with images. A collection of tools that dates back to 1988… an age when you might just barely have enough memory in your computer to hold one half-megabyte, low-resolution photo.

So these tools don’t load the whole picture into memory at once. They load it one line at a time, or as many lines as they need to do the job in question, and they deal with those lines and pass them on to the next tool in the chain. You can read, resize, and re-save an image without using prodigious amounts of memory.

The netpbm tools are part of the Unix tradition, and they take advantage of the Unix concept of pipelines, which allow you to “pipe” the output of one program into another, and pipe that on to a second, and on and on. And that allows for some extremely elegant things:

anytopnm < uploadedfile.bmp | pnmscale -xsize 600 | pnmtojpeg > outputfile.jpg

That pipeline accepts a file in almost any format, scales it so that it is 600 pixels wide (preserving the aspect ratio), and converts it to a JPEG without ever loading the entire beast into memory at a single go. It loads just the rows it needs to see as it proceeds through the file. This isn’t suitable for everything, but for scaling, cropping and conversion it’s fan-freakin-tastic.

You can call that from PHP, using the system() function. But if you’re working with the Symfony framework, you might not need to. I’ve wrapped up some common netpbm operations in pkImageConverterPlugin. In fact, you should be able to use that plugin with non-Symfony PHP code, though I haven’t tried that myself.

You won’t be able to conveniently use it on a Windows host, though. The netpbm utilities exist for Windows but the Windows command shell is one of my least favorite things, so you’d have to make some minor changes to get my code working with it.

Macs, on the other hand, are Unix-based and will work just fine with netpbm and pkImageConverterPlugin, once you install it via macports or Fink.

In fairness I should note that ImageMagick supports caching images on disk rather than representing every pixel in memory. That amounts to simulating virtual memory within your program, which might sneak you past the PHP memory limit. But this is not as elegant or as fast as a set of tools designed for row-by-row operation from the get-go.

It’s good to let it all hang out and explore the possibilities of excess. But sometimes, restrictions are good things. And long after restrictions have been lifted, they can return in new forms and new situations. At which point we’re grateful to have the carefully optimized code of an earlier era. Y’know, before everybody had one of these:

I am very thankful that colonial era architecture exists in Philadelphia. The materials, the scale of the rooms, and the original lack of indoor plumbing tell a story. These buildings embody an historical spirit that you can feel when you visit them.

However, I really dislike it when people build facsimile colonial homes today. They lack heart. They tell no story.

Authentic art, design and culture should reflect the time it was created. It should reflect our time. Our situation. Our realities. It should tell the human story of now.

That is why I love the dance company Chunky Move. The video above is of their Mortal Engine piece. I was tipped off to it by a post from Live Arts Fringe and have thought of it frequently since. It is moving, intense, beautiful and it haunts me, but most importantly it is of our time.

It is hard to imagine this piece being made at any other time in our history. Yes, for technical reasons, but also because of it speaks to current issues, our issues. Organic, yet mechanical. Human. Computer. Individual. Swarm. Death, and yet affirmation of life. I don’t know, but it hits me in the gut.