Let me click “Yes” and see what’s going on..

Interview with Sinan Ascioglu:
OpenProcessing Architect

By Tim Stutts on Friday, February 26th, 2010 at 1:00 pm.

“Driving through Iceland” sketch by dotlassie. Winner of Rhizome’s Tiny Sketch Competition.
OpenProcessing.org is a site that has built a community around sharing visual coding examples created in Processing. As user number 36, I had the unique privilege of watching the idea take shape, while in a thesis group with Sinan at NYU’s Interactive Telecommunications Program. During it’s first two years of activity, the site has grown to host thousands of user-generated sketches and subsequent conversations between artists / programmers, teachers, and students from around the world. Sinan and I escaped the snow recently at a café outside Washington Square Park to discuss OpenProcessing’s origins, Rhizome’s collaboration with OpenProcessing in the Tiny Sketch competition, and what we can expect for the future. – Tim Stutts

Tim: How did you first come up with the idea for OpenProcessing?

Sinan: I guess the first thing to talk about is OpenVisuals, which was my Master’s thesis project at ITP (Interactive Telecommunications Program, New York University). I was reading Edward Tufte’s books at the time, and I became very interested in data visualization. In the meantime …. read more on Rhizome

50 Free UI and Web Design Wireframing Kits, Resources and Source Files – Smashing Magazine.

In this project, I took it as a challenge to capture the viewers’ eye movement patterns, which differ from movie to movie. I proposed that these patterns were directly the result of movie directors’ unique style of shooting scenes. In the first phase, I built eye tracking glasses and a software to capture the motion of one eye of a person watching a movie scene and the looking position data. In the second phase, I built the visualization which draws the eye movement curves on the wall, and the wooden controller lets users to explore these patterns by browsing different movies using an intuitive interface.

Our focus while watching movies shifts continuously from corner to side, actor to actress, dancer to assassin, making our eyes move continuously on the screen from left to right, top to corner, etc.. What we are not aware is that the smooth/complex patterns of these focus shifts of our eyes are different in each scene/movie and posses the signature and style of the director.

“Eyes on You, Tarantino!” tries to capture and visualize these patterns by projecting the patterns on a column, and gives users the opportunity to explore the movies in reference to these patterns using a physical controller surrounding the column.

Project includes two parts:

1. Tracking the eye movements of the audience with custom build eye capturing glasses, and calibration of the captured data.

At the first stage, I created the eye tracking glasses with a camera attached to one lens and recording one eye. Using Processing, I wrote a code to track the position of where the eye is looking, Using this glasses and the code, I recorded the eye movements of 4 people watching the different scenes from Death Proof (Quentin Tarantino), Rear Window (Alfred Hitchcock) and Hyperballad (music video from Bjork, Michel Gondry).

Early sketches of the installation

2. Creating a physical installation to present the captured patterns, in a meaningful data visualization which allows users to browse the movies in reference to these patterns.

At the second stage, I worked with data to see if I can observe any patterns that would be unique to the scenes and directors. The patterns I ended up focusing on:

• Directors’ shooting style defines how jittery or smooth our eyes follows the screen
• In the scenes where actors stand still, Tarantino prefers providing “eye action” moving camera continuously around the actor. Hitchcock prefers positioning actors on viewport separately to provide “eye action”. In Gondry’s example, he uses a unique technique to oscillate the camera that makes the eyes oscillate left and right.

After observing these various patterns, I designed a physical installation in which these patterns can be projected in accordance to the scenes being displayed. After a set of sketches and cardboard prototypes, I made the project ready to be exhibited at ITP’s Winter Show 2007.

This is where we came, and it makes me smile in the name of today’s great designers:

Now, for yet another second, think about a concept I would call Sustainable Web Design.

Can we make websites that are more sustainable?

This question might not light any bulbs in our minds for now, as an automotive maker in 1960s would look at you blank if you were to ask about CO2 emissions. But let’s think about these numbers:

Computers today are using around 70 watts of electricity. Use that for an hour, that is 0.07 kwh for your electric bill. Use it just for a second, that is 0.00001944 kwh on your bill. Well, that is the smallest number you will see for the rest of this post.

The average cost of residential electricity was 12¢/kWh (DOE) in the US in April 2009, and let’s assume this is true for the rest of the world (although it is much more expensive). So, that one second will cost you 0.000233 cents. Still looks small. Probably you already figured you wouldn’t make much difference in your bill if your computer turns off one second faster everyday.

Google.com has a very simple design, and doesn't use any extra elements that would result with more loading time.

Bing.com is using background images to create a better looking search page.

Now, let’s change some perspective, and look at these numbers from the perspective of web designers. According to Wolframalpha, Google has a daily page views of 6.8 billion. If Google was a image-heavy website, like its fresh-blood competitor Bing.com, and the loading time would take one second more for all these people visiting the site, it would result

6.8 billion * 0.00001944 kwh = 132′222 kwh per day,

not spent waiting for a background image to load. An average 1 megawatt wind turbine produces 24000 kwh a day. So, 5-6 wind turbines in the world would be working just to meet the need for that very second of loading a background image.

A farm of 5-6 turbines would be working just for that Google background image!

To make more sense of that number, we can say it is making 550′925 miles a day with a 240 watt hour/mile electric car. And if you realized, I tried to keep the numbers on the minimal side: I only included the electricity used by the computers for that second, not any of the modems, routers, ISP servers and Google’s massive servers that would carry all that background image to your computer screen. Then, maybe we should thank to Google for not heaving great but unnecessary examples of scene photography as its background image. But how about bing.com and the rest?

Here, we are possible in the early stages of a new “designing green” paradigm. Being sustainable as an individual through recycling and using less electricity etc. are efforts that we put knowing that we are making a difference. However, as in the example above, there things out of our control and we wouldn’t even worry since our individual input to such waste is very very minimal, probably way smaller than the waste of an un-recycled batteries. But with the introduction of internet to the individuals of the world, as web designers, our designs on the web start reaching to millions of uses a day, hence the massive access oto our products require a new thinking about designing sustainable. And especially, designing sustainable is becoming an issue to the web industry that newer had to deal with such an issue before. More pageviews our websites get, more the responsibility we should have for thinking the potential waste our designs would produce.

So do you think we’ll see a day that most websites would have “Green Website” badge, and users would prefer to use site A instead of site B, just because it is a ‘green’ site. Will a Firefox plugin alert us before opening up a page:

“The website you are currently trying to view doesn’t meet the Kyoto 2.0 protocols. [Continue] [Get me out of here!]“

Then until Google puts a background image to its website, enjoy your 550′925 miles a day with your Electric Car.

Analytics, that’s a big deal.

In the design of such large scale websites, the use of analytics should have a very important role in the design process. Working with analytics partners such as Omniture, I am working on analyzing the analytics data to provide us initial design directions, find the potential flaws in the user experience, and success of launched projects.
Analytics information is especially important when it comes to user flows: In the recent redesign of the registration process in BMWUSA, I used the analytics information effectively to provide valuable insight, including dropouts, success rates and conversion. Providing a visual representation of this data, we worked with the client to reduce the number of steps and simplify the registration process.

It’s a thought process, after all.

Dotglu has a very good design approach to make sure what we produce is a result of an established process of thought and design. I am working with other designers and producers to have the workflow of design-to-product with its brainstorming, ideation, sketching and concepting. As an interaction designer, my wireframes are going through phases of client presentations, comping, and they are the key in working with developers on functionality specifications and quality assurance.

The roots of OpenProcessing is linked to my thesis project at ITP, NYU. When I developed OpenVisuals, open source visualization framework, it allowed Processing users to easily upload and share their sketches that have visualization focus. In its beta stage, I realized a strong need for ‘flickr’ish place in the Processing community, and OpenVisuals was technically supporting such a structure within its functionality.

Design Process

So, I took OpenVisuals as a template, but took the data visualization concept out. I did couple of user testings to see if it serves well for the group of Processing enthusiasts, and defined my production strategy to enable this tool for the community first, and design further solutions incrementally following the user feedback and observing user behavior.

At the first phase, having set the first priority to providing this sharing tool with its adequate functionality, I kept things minimal: By the time of the launch, website included only 4 sections (homepage, browse, visual page, register/upload), and 1 image (for the homepage). After testing the functionality with couple of recruited users, the number of hits made its first spike when Daniel Shiffman blogged the project on his website.

Since then, the design of the website had been continously improved and updated by observing the user behavior through analytics, feedback and overall website usage.

Recently

Through 2+ years since it’s been live, OpenProcessing.org became the second most-visited site of resource for Processing community, following Processing.org. It became a great library of amazing sketches, source code and communication within the community. With its increasing traffic, the site is currently serving more than 2000 visitors a day, accounting for half a million pageviews a month. It had been named and linked by thousands of websites, including Wired.com.

Read what Bruce Sterling says about OpenProcessing here, here and here.

The Killer Feature: Classrooms

I will soon update here with some info.

Afterthoughts

Since then, OpenProcessing had one major redesign, and additional functionalities such as comments, source code view, rss feeds, tags and tag subscriptions, user profiles. In the long run, I am exploring the options to make OpenProcessing more functional for teaching purposes: Processing is used in many platforms to teach programming within visual context, visualization, dfx, etc… OpenProcessing can be a great tool to gather students together to improve their learning experience and collaboration.

Having raised a lot of attention in the recent years, data visualization proved itself to be an important subject to provide better understanding of data and information which cover a wide spectrum from data-intense scientific researches to election results. Most of the times, and except pie charts and bar graphs, good data visualizations are designed and tailored for a specific data set, and are not necessarily available publicly to be used with different data sets. This limits the potential of visualizations to be used in different purposes.

A simple user scenerio is:

>> A person interested in visualizing a data uploads the data set to the website. She browses the website and picks a visualization to visualize his/her data. In the meantime, She allows her data set to be used by anyone under Creative Commons License.

>> A visualization artist finds this data very interesting. He copy/pastes the given piece of library code to Processing and starts building his own visualization using that data set. The library allows him to access the data set that is in the cloud. Once he is done, he uploads his visualization to the website to share with others. In the mean time, the library he used makes his visualization possible to work with other data sets on the website with this visualization through the website.

This framework includes two assets:

• The website, OpenVisuals.org, which supports the framework as the place for people to upload, browse data and visualizations, to explore by mapping the data sets to visualization, and to communicate with each other using commenting, messaging, etc…

OpenVisuals Thesis Presentation from
Sinan Ascioglu on Vimeo.

• OpenVisuals Java Library, which is an API for Processing to make building visualizations easier by providing common functions. Also, this library functions as the bridge to map any uploaded visualization to any data set on the website.

This project can be considered as the ‘visualization counterpart’ of many data websites (eg. Swivel, Many Eyes, Gapminder), making it possible for users to develop and collaborate on the visualizations end.

The Fail Part

While working on this website, I preferred to design and develop while it was live on the web: anybody could see the website being developed on the fly. This gave me a great opportunity to get early feedback on the features, design and bugs. The most significant feedback that I had was to make the website open to any Processing sketch, and be less specific rather then focusing on the visualization theme. Before any visualization-sharing website, Processing users needed a place to share any of their sketches.

Upon this observation, I copy/pasted the whole website under a new domain, OpenProcessing.org, and stripped out the visualization&dataset focus by redesigning couple of pages. Since then, OpenProcessing has welcomed by the community with great interest and appreciation, and this led me to discontinue my efforts on OpenVisuals.org and put all my energy on OpenProcessing. Well, the rest of the OpenProcessing story is here.