Here’s a link to the full screen version (works best with chrome or safari).

Here’s an example gadgets mining all Twitter posts from the past 3 days that mention the term ‘NYTimes’:

About

Twitter, ‘the pulse of the world,’ is an incredibly rich data source used by millions across the globe. People post their thoughts, ideas and whereabouts via text-based status updates. Visually displaying trending topics can help readers better understand content and its context. By using any one of the four SocialGadgets, data flowing through the Twitter fire hose is indexed and semantically analyzed in real-time. Within minutes, major entities are identified and their relationships are displayed. The gadgets are easily configured, allowing users to choose a keyword and a template type, then copy and paste an embed code to be displayed on a website of their choice.

Give it a try!

Here’s a link to the full screen version (works best with chrome or safari).

The particle system generates particles every 10 ms from an origin point which follows the mouse location within the canvas. Each released particles is born with a given lifespan, acceleration and velocity. As the user’s mouse moves on the canvas, the particle follows along. As its lifespan ends, the particle fades and dies.

Here’s the crux of the code:

1. Create a canvas elementInsert a canvas element into the body of your html page.
 
2. Instantiate the visualization class
   I use a variable called ‘viz’ to hold the visualization class, which I later use to define the particle system.
var viz = new Visualization();
3. Pointers to canvas attributes
   When rendering to the canvas we constantly need to use its context. By getting a handle to the canvas div element, we can access three super important attributes: (a) the canvas width (b) the canvas height (c) a pointer to its context
var el = document.getElementById("viz");
this.canvasWidth = el.width;
this.canvasHeight = el.height;
window.ctx = el.getContext("2d");
4. The particle system
   The particle system class is effectively an array of particles and an origin point. There are 2 main methods: (a) add a new particle (b) run the system
   Here’s the run function for the particle system:
// running the particle system
this.run = function(){
// iterate through particles
for (var i=viz.ps.particles.length - 1;i>=0;i--){
var p = viz.ps.particles[i];
p.run();
if (p.dead()){
viz.ps.particles.splice(i,1);
}
}
}
5. A particle
   Each particle has a location (x,y coordinates), acceleration, velocity and size attributes. Additionally, every particle has a lifespan (this.timer) which defines how many iterations the particle will display, before it fades and dies. The main particle loop is comprised of two important functions:

(a) update the particle movement and remaining life span

this.update = function(){
// particle loop: acceleration, velocity, location update
this.vel.add(this.acc);
this.loc.add(this.vel);
this.timer -= 1;
}

(b) render the particle to the canvas. Here I’m making it fade by setting it’s alpha value to decline as its remaining lifespan (this.timer) diminishes.

this.fill = "rgba(255,255,255,"+this.timer/300+")";
this.drawCircle(ctx,this.loc.x,this.loc.y,this.r/2,this.fill);

this.drawCircle = function (ctx, x, y, r, fill) {
ctx.fillStyle = fill;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, r, Math.PI * 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
6. Run the draw loop
   This is the most important piece of the puzzle. By using the setInterval function, the draw function will be called every 25ms. This is very similar to what you do in processing (draw loop function). The loop is enabled by ‘setInterval’, while the draw function first clears the screen and then calls the particle system run function. There’s a neat effect when clearing the screen with such small alpha value. It creates a smearing effect which makes the circles have less defined borders. It is also computationally intensive, so beware…
// draw loop
this.timeUpdateInterval = setInterval(draw, 25);

function draw(){
clear();
viz.ps.run();
}

function clear(){
ctx.fillStyle = "rgba(0,0,0,0.1)";
ctx.fillRect(0, 0, viz.canvasWidth, viz.canvasHeight);
}

That’s it. Put it all together, add the jquery library, and you have yourself a simple particle system.

See the full size version here.

And download the full code here.

Give it a try!

About

It is still unclear if and how Twitter made an actual difference for people on the ground in Iran. There is not enough information to claim that Iranians had been using Twitter as a means to organize the protests. However, it is unquestionable that Twitter’s unique characteristics prompted distributed reactions on a scale never seen before, engaging people all around the world. By far, the messages with imminently important information, received an overwhelming amount of retweets: from posting proxy IP addresses to passing on a plea to wear green. However, as the events played out, users learned to post messages without linking to the origin as a means of protecting the Iranian sources. It is clear that retweeting is revolutionizing the way people connect to news and newsworthy events.

The ReTweet Revolution applet displays 372 of the most popular threads extracted from a pool of over 230,000 messages posted on Twitter between June 14th and June 24th. It is important to remember that this is only a sampling of the Twitter data polled from the public timeline at regular intervals. Nevertheless, the content is substantial enough to identify trends and get a sense for people’s practices.

The visualization begins on the 14th of June, displaying twitter messages as they come in throughout the night after election day in Iran. Each tweet is analyzed and placed within its corresponding thread, which then grows taller. As the time moves forwards, it is possible to see the different threads appear from the right. By clicking on one of the threads, the applet enters a focus screen that displays the chosen thread’s network structure. The yellow node in the middle represents the earliest published tweet, corresponding to this thread, that was found by the ReTweet Revolution script. Many times it serves as the central node – the starting point of the conversation. When focusing on a thread, it is possible to see how a message was ReTweeted from one user to another, along with how the message content was changed as it was passed.

About

The earliest writings were carved in stone or scratched in clay and tree-bark. By 2400 BCE people had begun rolling papyrus sheets into scrolls. These remained the most popular written form for the next three thousand years, until the Chinese invented paper and European scholars began to bind parchments sheets into codices. It would take thirteen more centuries for these two technologies to come together to form the book, and another hundred years, until around 1440, for the printing press to be invented and the modern industrial book object to be born. Since then, for over 500 years, the book has been the dominant form for written communication.

The printed book has transformed modern society, helping to bring about the Protestant Reformation, the scientific revolutions of the Renaissance, widespread literacy, etc. Today books are ubiquitous. We read them on subways, build shelves for them into our houses, and sell them in bookshops, cafes, and on the banks of the Seine.

But, after six centuries of world-changing influence, is the printed book about to join the clay table, the scroll, and the parchment codex as a historic, but obsolete, writing technology?

Electronic books make it possible to carry an entire library in one device. They can be annotated and animated. Today’s devices are still clunky and primitive — but they will revolutionize reading and writing. Today’s books are still written for paper – tomorrow’s will be written for a networked computational device, changing how we think about linearity, permanance and the soon to be archaic idea of reading as a solitary and private experience.

The Future of the Book is an installation marking this turning point in the history of the written word.

Exhibitions

• Commissioned by the Boston Book Festival, 2009
• Berkeley Center for New Media, April 2010

Created in collaboration with Judith Donath and Martin Wattenberg.

About

As you enter the room a large clock can be seen and at the same time various voices are heard. As you explore the space, you immediately realize that each of the circles representing the hours of the clock are different sizes and different distances away. At some point the you notice a glowing light that says “talk to me” on it. When you bend over to talk to it, a microphone senses the movement and records your voice. The recording is then heard out of one of the speakers. After a few more seconds, it is heard from a different speaker. It may still be heard a few minutes, hours, days or even months later. The room is filled with sounds from different time periods – the older they are, the more stretched the voices sound, much like light gets distorted the older it is.

When we look at the stars, we do not see them as they are at this moment, but as they were in the past. Stars are vastly different distances away, and therefore different times away. The light from the closest stars can take four years to get here, while other stars can take millions and even billions of years to reach us. So we really see a sky that is a patchwork of history.

Exhibitions

• Observe – Art Center College of Design, Pasadena CA

In collaboration with Dan Goods

This piece has been presented multiple times with slight variations for the interactions. At Technorama Museum installation, users control projected colors by moving their hands in front of the display, while in both TED and the Summit Series installations, the aerogel pieces showed data coming in through the conference Twitter #hashtag feed.

Exhibitions

• The Swiss Technorama Museum
• TED Active 2010, Palm Springs
• The DC10 Summit Series, Washington DC

In collaboration with Dan Goods

Background

Technology today has become more than disruptive to us users with pagers, cell phones, instant messaging, and different alerts on our computers. These “helpful means of technology” have slowly become more than intruding to the primary task at hand. This breaks our concentration and hence, interrupts our work-flow.

Ubi.ach brings that extra layer of information to the user, but by a means of peripheral, sensory awareness. In search of using calm technology, we have come up with a friendly-looking stuffed-doll that connects to the owner’s personal email account. Using text analysis algorithms, text-to-speech technology alongside with radio frequency communications and LED’s, we’ve built an alternative first interface for email connectivity.

Ubi.ach reacts to new emails in various manners: from blinking LEDs, to small motor movements, to reading text from the email out loud. Therefore it is possible for anyone, anywhere in the world, to send personal recorded messages to the doll, which can be heard by the doll’s owner.

Technology

We have implemented Ubi.ach using Bluetooth as a method for both the data and voice channels between the doll and the web. After an initial hardware configuration, the doll is set to go. However, there must be a bluetooth enabled computer in the vicinity of the doll for it to work properly, connect and react to online content.

Exhibitions

• ITP fall 2006 show
• Ubicomp 2006, Orange County

Background

I am intrigued by the immense amounts of information available online, and am interested in enhancing existing boundaries for interaction with this data. The touch sensitive interface allows users to navigate through different niches created in 3D space, viewing images from several live webcams from the Kotel. The internet allows us to feel a sense of connection between two or more remote locations. By posting photographs online, we are sharing memories of a moment with anyone who has online access. In search of enhancing a frozen still moment, I long to recreate a presence of a place, a moving image that can transport to a viewer the essence of a faraway location. People travel thousands of miles to come and touch the wall. It is an extremely haptic experience, feeling stones which are thousands of years old. By using rocks as a viewing interface for this installation, I strive to maintain some of the important essence when visiting this location.

In this project, I explore the creation of an intimate connection to the Kotel itself, and not the people who are there. Most people at the site in Jerusalem don’t realize that these cameras exist and broadcast footage online. For this reason, there is no moral problem nor or any surveilance issue. Through the images, it is not possible to see faces, yet a general sense of activity in the location is felt. Over a while, one can start noticing the different patterns occuring at the Kotel: sunrise over the wall, the changing densities of prayer times, religious holidays, a heightened police presence upon security problems, and more.

By placing a folded piece of conductive sheet between a real rock and a foamboard base and connecting it a qprox touch sensor, it is possible to create a display that reacts according to its’ viewers touch. The qprox sensor circuit is connected to a PIC chip, which then communicates with the computer. The latter runs virtools 3d software, and communicates to the PIC chip through a custom building block I wrote. The building block is written in C, using the virtools SDK, and creates a ‘Serial Read’ function which can then be used from within the Virtools program to manage serial communications with any external hardware object. Every time a user places their hands on the rock, the qprox sensor receives a signal, passes it on to the PIC, which then passes it on to the PC (via serial communications), and finally into the Virtools program, which then changes the display accordingly. In the ITP spring show, the 3D live webcam display started rotating, and revealing other live views from the wall upon receiving a touch. As the viewer let go of the rock, the display would slowly settle back to its original position – front view of the Kotel.

Demo

Exhibitions

• Bronfman Center Artist Fellow Exhibit, New York, April 2007
• Young Investigator’s Forum for Culture Technology, KAIST – Korea, October 2006
• ITP hallway Gallery, New York University, fall 2006
• ITP 2006 Spring Show

A grant for this project was generously provided by the Bronfman Center, as part of the artist fellowship program, 2006-2007.