Random Etc. Notes to self. Work, play, and the rest.
Processing implemented in Javascript
John Resig, of JQuery fame, has ported the Processing language and API to javascript. Not just the API, the language too!
W(e are )here: Mapping The Human Experience
Eric is in Minneapolis at the moment talking about our work at the University of Minnesota. The talk has been in the works for a while but nicely coincides with W(e are )here, and exhibition we're participating in organised by Solutions Twin Cities.
We've prepared a special version of Trulia Hindsight for the show, using the experimental version of Modest Maps I made for Processing in February and animating data for around 1 million homes using OpenGL. We're not ready to distribute the data to a wider audience yet, but here's an example animation from the application:
Trulia Hindsight - Twin Cities Edition from Stamen on Vimeo.
Thanks to Jamie from Trulia for getting us the data we needed to present Trulia Hindsight in this way.
Modest Maps vs Processing
Since Mike simultaneously outed me and out-did me and linked to the Processing folder of the Modest Maps source at the same time, I thought I'd better post a version of the library I've been working on so that I can stop thinking about it for a while.
So:
Modest Maps is a BSD-licensed display and interaction library for tile-based maps in Flash (ActionScript 2.0 and ActionScript 3.0) and Python...
...And Processing
New Processing Hack: Line Caps and Joins in OpenGL
One of the sad things about using the OpenGL rendering option in Processing is the lack of control over line weights, caps and joins. This week I allowed myself to get distracted by this issue for a little bit too long, but I did succeed in solving it, at last:
I've put some code about line caps and joins in Processing & OpenGL up on Processing Hacks in case it's something that bothers you too. I've not tested it extensively so I'd welcome bug fixes and suggestions there, or in the comments here. One thing I'm interested in doing next is extending (or reimplementing) BasicStroke to generate shapes for thick polylines with varying line thickness. If that's something you've done before, please let me know.
I'm using Java's BasicStroke to generate the path outlines, and GLU's tesselators to generate a mesh that will fill correctly in OpenGL. I "borrowed" the code for the latter from Ben Fry's PGraphicsOpenGL font rendering – thanks Ben!
ArtNano (notes on Processing for design elements)
As I mentioned in my previous post, we were working with Geraldine Sarmiento on the ArtNano site, and she came up with the pixellised imagery you see throughout.
Towards the end of the project, I needed a few more of the pixelly images at short notice, to illustrate the essays and about pages on the site. Rather than bother Geraldine, I reached for Processing to see if I could match the look of the homepage imagery that she had created.
I came up with an applet that used a bit of blurring, a bit of distance fall-off, and a bit of perlin noise to create the effect that we were looking for (decorative, obscured, but related to the overall site). Here's an example of the imagery created from a picture of Scott Snibbe's Three Drops that we used on the page for Jennifer Frazier's essay:
You can see the full applet and source code here, and I think it's a good example of how a generative solution to design elements can keep a project flexible right up until launch (and beyond).
Step 1: Can We Show It All?
I've been thinking recently about data visualisation approaches. One that I'm very fond of in the early stage of a project is to figure out a way to arrange the whole thing on screen – or a representative sample of it – and figure out what meaningful segments you can mark on top of it.
That was the rationale behind our Trulia Hindsight movies (show something about everything) and our charts of a day of activity on Digg. It's definitely an approach I've found easiest in Processing, although using it recently I've missed the instant mouse-driven interactivity of Flash or HTML.
My colleague Shawn just posted a visualisation he made to help debug a visualisation he's working on at the moment:
Shawn's chart is basically a simple scatter plot of cabspotting data points (by cab ID and time), except that he's also overlaid some of the connections between the data to show how far back and forward he has to look to accurately predict a cab's location. And the whole thing moves beautifully, showing up bad data and highlighting good data as it goes. Hopefully we'll get a video up soon.
In the meantime, be sure to read Shawn's description and keep an eye out for the final debugged visualization in the MOMA soon!
Accidental Visual Resonance
In my post about the good people at Yahoo's design research group in September I suggested that some of their visualisations remind me of the movie War Games. I love the movie, but I continue to think that certain kinds of accidental visual resonance should be avoided. The 'incoming' visualisations by the good people at Dopplr have this problem too.
Today, Mike sent me the above image that Gem ffffound showing the devastation caused by the Oakland Hills firestorm in 1991. It's shocking, stunning and scary all at once to see so many homes ablaze like that. Mike pointed out that it looks like some of the work from our Trulia Hindsight project at Stamen.
Thankfully I think Mike was referring to the early prototypes I made in Processing using additive blending and a red-through-blue colour range. I've uploaded a movie of one of these prototypes to Vimeo so you can get an idea of what we're talking about:
San Francisco Property Prices, Animated from Stamen on Vimeo.
The fact that certain parts of the movie looked like San Francisco was burning, or being bombed, was definitely a problem we had to avoid for the final piece. It's something I wouldn't want to be thinking about addicentally if I was trying to find out about real-estate in the area. What we want is to make something that can illustrate the effects of real devastation if we want it to, without emotionally swindling you if you just want to think about urban growth. That's why we knocked out the red and orange hues in the colour range, added a drop shadow and ditched the additive blending. Ultimately, it was more appropriate to show data on the map than in the map.
So, if you want to you can look up some of the areas of Oakland affected by the fires in 1991, such as this example, and spot the clear rebuilding activity in 1992. With luck, the animation will illustrate some of the devastation caused by the fires, without looking like a simulated disaster.
Processing Blogs: The Internet Hates Me
Sorry for the recent outage on Processing Blogs. For some reason all the wordpress plugins deactivated themselves. I hate the internet, and the internet hates me.
Processing Blogs Fixed II: Electric Boogaloo
Let's try this again. If you're reading this on Processing Blogs or via its feed, then everything should be working.
Instead of Feedwordpress and Planet Planet put together with sticky tape and glue, I'm using the better documented Planet Venus and WP-Venus so our archives are maintained.
If you ever need to run a site similar to Processing Blogs and your web host can run python then I definitely recommend Planet or Planet Venus as the solution. WP-Venus complained a little bit when I converted from Feedwordpress, but it looks good so far: hopefully the archives will be worth the effort.
Processing Blogs Fixed
If you're reading this on Processing Blogs, or via its feed, then everything should be fixed. For some reason, Feedwordpress just stopped working and wouldn't re-subscribe to lots of the feeds that were previously fine.
Feeds are now being grabbed robustly by Planet and merely massaged by Feedwordpress. Here's the current list:
- Grow Up!
- abstractmachine
- all manner of distractions
- blog.blprnt.com - Processing
- Code & Form
- Create Digital Motion
- daniel shiffman
- Digital Tools
- eskimoblood
- fladdict.net
- i.document
- Ivan Safrin's Code Sketchbook
- Lightcycle
- m a n i a x | m e m o r i
- marumushi.com works
- Metaphorical.net - powered by FeedBurner
- nuthinking
- Pixelsumo » Processing
- Random Etc.
- RobotAcid
- Scrapbook
- Setpixel
- steve cooley presents » processing.org
- Software over the rainbow
- The Sound of Crickets Chirping
- thinking
- toxi.in.process
- v3ga
- YouTube :: Tag // processing.org
- Processing.org Updates
- Processing.org Happenings
- generative.grfx / Generative Graphics
Please do let me know if I'm syndicating too much or too little, and especially if I'm missing people or if I'm syndicating your blog and you don't want me to. Otherwise, the site should run itself for a while.
← Back to Home
© Random Etc.. Powered by WordPress using the DePo Skinny Theme.