Breakdown of Samples in Girl Talk Tracks.

A refreshingly simple (read: achievable for one of my limited resources) visualization that shows exactly which samples are playing when in Girltalk tracks, based on data gathered from Wikipedia. A decidedly simple application, but useful for people like me who often have trouble keeping track of the tracks… on… these… tracks? The creator is definitely taking the most obvious approach to this visualization and though it’s undoubtedly effective, it could certainly be polished a bit more. I can envision a guitar-hero-like glow on the various tracks as they begin to play in unison, for example.

Wikipedia Edits on a Random Day

A multi-format visualization of Wikipedia edits on a random day. By far the most interesting of the various available formats is the animated setting, showing edits in real-time as they pop up over the 24-hour period, color-coded by language. My primary motivation in posting this particular video is utter rage that someone took the best idea I managed to scrape together for our visualization project. GRRR. That said, the graphical fidelity of this piece could definitely be improved, as could its speed, presumably by limiting the available number of days.

Dungeons and Dragons Visual Resume

An animator / artist presents his resume in the form of that time-honored pen and paper standby, the Dungeons and Dragons Character sheet. For the uninitiated, during a game of D&D, each player has a sheet very similar to this that essential provides all of the relevant game information about a character, from how smart they are to how well they can open a lock or use a bow. Though the analogue is sound and the premise is one I’ve often contemplated pursuing myself, this particular example could benefit from a few fundamental changes. It sticks to the actual sheet’s layout a bit too slavishly, lacking general information hierarchy and failing to emphasize data that would be relevant to any legitimate reader. Though given the format, legitimacy might not be the creator’s main concern.

GE: A Slice of Life

Cartagram

Evolution of Web

http://mbostock.github.com/protovis/ex/cars.html

I am a big fan of visualizations that condense a massive amount of data into a beautiful, interactive form. The above is a visualization of cars using 8 variables such as engine cylinders, weight, year, mpg, etc. This multivariate information tool was created at the HCI institute at Stanford. I think that this visualization is very informative and also aesthetically beautiful. By dragging the parallel columns you can create ranges in every variable, highlighting only the cars that fall within every range specified. This is endlessly entertaining and I found myself losing track of time as I interacted with it.

[youtube https://www.youtube.com/watch?v=WIbRqAM7QNM]

http://www.connect2congress.com/blog/

Connect2Congress is a project by Peter Kinaird, a Phd student at the HCII at CMU. While this is not a polished visualization (he is working on an improved interface), it is very successful in presenting a lot of information graphically and in a short amount of time. Similar to the baby names graphic, this interactive visualization is appealing because the user can manipulate and explore the data to learn more about what they are interested in. It is very easy to ask Connect2Congress specific questions about the voting habits of our elected officials. I hope that visualizations such as this gain popularity during this year’s election cycle.

2 HOURS, 2 MINUTES, 2 SECONDS (WIND AT WALDEN POND, MARCH 12, 2007)

by: Spencer Finch

“This piece re-creates the changing breeze experienced on Walden Pond’s shore. The duration of the wind cycle is a reference to Thoreau’s stay at the pond, which lasted two years, two months, and two days…”

This is hands down one of my favorite data visualizations. I became aware of Spencer Finch this past summer. His work is often simple both visually and conceptually, yet secretly complex. He does a great job of hiding the technology of the work and keeping the viewers focused on the romantics of the work.

Alot of his work has some sense of input– either strict data, collected data, personal data, or sensory data. All his work is worth seeing though.

This is another piece of his. Ice cream in the color of the sunset taking place outside the gallery:

////////////////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\////////////////////////////////////////////

Arctic Sun – Solar Exploration Device for the Arctic
by: Nathalie Miebach

“Using a base of 48 hours, this piece converts various layers of data (July 06 – June 07) related to the gravitational influence of both Sun and Moon on the Arctic environment. ”

Nathalie creates insane work. I’m not sure really how I feel about it aesthetically mainly because I haven’t seen her work in person. But I think this is incredible as a form of ‘data visualization’. Her work is just throwing up massive amount of data–I like that aspect of it.

////////////////////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\////////////////////////////////////////////

Kepler Exoplanet Candidates
Jer Thorp

Everyone knows the work of Jer Thorp, but I feel like this piece goes unnoticed. Jer actually showed me how he programmed this piece and it is actually really simple!! With that said… it is still a really satisfying interaction. The interaction is both intriguing AND necessary. It helps get a clearer picture of the information presented.

This was my first taste of the power of imaging software to visualize data and that power no doubt inspired me to check out computation as an augmentation or entity in art and design.  This is a brief clip of Hans Rosling from TED 2006.

[youtube https://www.youtube.com/watch?v=GeXJnOE-1gw]

It’s difficult to critique what Rosling does here but if I were to, I would say that where this falls short is that it begins to tap into the power of computation and yet remains in the format of static graphic design visualizations.  It’s like Tufte in motion.  The power of computation in visualization is, at least, to present information in a more exciting dimensions than x and y.

For my project I wrote a monster mash face generator. It substitutes different images in quick succession to create a not so subtle animation that corresponds with the users facial movements. Images to fuel the animation can be nicely scraped using Face OSC to parse out different facial features from any image that even remotely vaguely resembles a face. For this particular incarnation, I gathered the images by hand from old sketches of mine and deviantart.

import processing.opengl.*;

/*Alex Wolfe | Gauntlet*/

//Globals, adjust to edit nitpicky params
//Circles
int numCirc = 4;
int circMax = 100;
int circMin = 10;
//GridLines
int minRowSpace = 50;
int maxRowSpace = 100;
int minColSpace = 30;
int maxColSpace;
int minCols = 8;
int maxCols = 20;
int numrows, numcols;
int linewaver = 8;
int[] colSpace;
boolean[][] gridCheck;

//Lines
int minLines = 10;
int maxLines = 20;

RowLine[] grid;

void setup() {
  size(600, 600, P2D);
  background(255);
  smooth();
  strokeWeight(0.5);
  strokeCap(ROUND);
  noFill();
  stroke(0);

  //init colSpace grid
  int j =0;
  numcols = int(random(minCols, maxCols));
  maxColSpace = width/numcols;
  colSpace = new int[numcols];
  for (int i=0; i<numcols-1; i++) {
    colSpace[i] = j;
    if (j<width) {
      j = j+int(random(minColSpace, maxColSpace));
    }
    else {
      j = j+int(random(min(minColSpace, width-j), max(minColSpace, width-j)));
    }
  }
  colSpace[numcols-1] = width;

  /*********init***************/
  initGrid(); 
  drawCircles();

  for (int i=0; i<grid.length; i++) {
    grid[i].drawLine();
  }

  gridCheck = new boolean[numrows][numcols];
  drawLines();
  /************DeBug************/
  println("numrows = " + numrows + " numcols =" + numcols);
  println("colSpace array");
  for (int k = 0; k<colSpace.length; k++)
    print(colSpace[k] + " ");
  println();
  println();
  /* for(int i=0; i<grid.length; i++){
   for( j=0; j<numcols; j++){
   print("(" + grid[i].segPoints[j].x + ", " + grid[i].segPoints[j].y + " ), ");
   }
   println(" /" + i);*/
  /****************************/
}

void mouseClicked() {
  background(255);
  initGrid(); 
  numCirc = int(random(3, 7));
  drawCircles();

  for (int i=0; i<grid.length; i++) {
    grid[i].drawLine();
  }
  drawLines();
}

void draw() {
}

void initGrid() {
  int y = int(random(minRowSpace, maxRowSpace));
  numrows = int(random(8, 12));
  grid = new RowLine[numrows];

  grid[0] = new RowLine(0);
  for (int i=1; i<numrows-1; i++) {
    grid[i] = new RowLine(y);
    if (y<height) {
      y = y+int(random(minRowSpace, maxRowSpace));
    }
    else {
      y = y+int(random(min(minRowSpace, height-y), max(maxColSpace, height-y)));
    }
  }
  grid[numrows-1] = new RowLine(height);
}

void drawLines() {
  float flip;
  for (int col=0; col<numcols-1; col++) {
    for (int row=0; row<numrows-1; row++) {
      flip = random(14);
      if (flip <4)
        drawVertLines(row, col);
      else if (flip <8)
        drawCrazyLines(row, col);
        }
      }
    }

    void drawCrazyLines(int row, int col)
    {
      int numLines = int(random(minLines, maxLines));
      float p1x = grid[row].segPoints[col].x;
      float p1y = grid[row].segPoints[col].y;
      float p2x = grid[row].segPoints[col+1].x;
      float p2y = grid[row].segPoints[col+1].y;
      float p3x = grid[row+1].segPoints[col].x;
      float p3y = grid[row+1].segPoints[col].y;
      float p4x = grid[row+1].segPoints[col+1].x;
      float p4y = grid[row+1].segPoints[col+1].y;

      float slope1 = (p2y-p1y)/(p2x-p1x);
      float slope2 = (p3y-p4y)/(p3x-p4x);

      for (int i=0; i<numLines; i++) {
        float x1= random(p1x, p2x);
        float x2= random(p1x, p2x);
        stroke(0);
        line(x1, (slope1*(x1-p1x)+p1y), x2, slope2*(x2-p3x)+p3y);
      }
    }
void drawVertLines(int row, int col) {
  int numLines = int(random(minLines, maxLines));

  float p1x = grid[row].segPoints[col].x;
  float p1y = grid[row].segPoints[col].y;
  float p2x = grid[row].segPoints[col+1].x;
  float p2y = grid[row].segPoints[col+1].y;
  float p3x = grid[row+1].segPoints[col].x;
  float p3y = grid[row+1].segPoints[col].y;
  float p4x = grid[row+1].segPoints[col+1].x;
  float p4y = grid[row+1].segPoints[col+1].y;

  float slope1 = (p2y-p1y)/(p2x-p1x);
  float slope2 = (p3y-p4y)/(p3x-p4x);

  for (int i=0; i<numLines; i++) {
    float x= random(p1x, p2x);
    stroke(0);
    line(x, (slope1*(x-p1x)+p1y), x, slope2*(x-p3x)+p3y);
  }
}

Circle[] circles;
boolean good = false;

void drawCircles() {
  circles = new Circle[numCirc];
  for (int i=0; i< numCirc; i++) {
    good = false;
    while (circles[i] == null) {
      circles[i] = createCircle(i);
    }
  }    
  for (int j=0; j<circles.length; j++)
    ellipse(circles[j].x, circles[j].y, circles[j].rad, circles[j].rad);
}
Circle createCircle(int i) {
  boolean fail = false;
  float dim = random(circMin, circMax);
  Circle test = new Circle(random(circMax, width-circMax), random(circMax, height-circMax), dim);
  //circles[i] = test;
  for (int j=0; j<i; j++) {
    if (circleHitTest(test, circles[j])) {
      return null;
    }
  }
  return test;
}

boolean circleHitTest(Circle c1, Circle c2) {
  float hitRad = c1.rad + c2.rad;
  if ( dist(c1.x, c1.y, c2.x, c2.y) < hitRad)
    return true;
  else
    return false;
}

class RowLine{
  PVector[] segPoints;
  int rowStart;
 // RowLine prev, next;
  
  public RowLine(int rowStart1){
    segPoints = new PVector[numcols];
    rowStart=rowStart1;
    
    if( (rowStart == 0) || (rowStart == height))
      initEdgeLine();
    else
      initLine();
  }
  
  void initLine(){
    int x,y;
    y= rowStart;
    for(int i=0; i<numcols; i++){
      segPoints[i] = new PVector(colSpace[i], y);
      y= y + int(random(-linewaver, linewaver));
    }
  }
  
  void initEdgeLine(){
    int x,y;
    y= rowStart;
    for(int i=0; i<numcols; i++){
      segPoints[i] = new PVector(colSpace[i], y);
    }
  }
  
  void drawLine(){
    stroke(0);
    //smooth();
    strokeWeight(0.5);
    strokeJoin(MITER);
    beginShape();
    for(int i=0; i<segPoints.length; i++)
      vertex(segPoints[i].x, segPoints[i].y);
    endShape();
   // for(int i=0; i<segPoints.length-1; i++){
      //line(segPoints[i].x, segPoints[i].y, segPoints[i+1].x, segPoints[i+1].y);
   // }
  }
}

Doggleganger

Doggleganger  is an app  developed by the Pedigree Adoption Drive and NEC. It uses a simple face recognition system to match dogs in need of a home to the humans that use it, building on the idea that people tend to look like their dogs. Its a ridiculously fun/clever way to aid these dogs who would otherwise die in the shelters. Unfortunately, you currently have to take a quick jaunt to New Zealand to pick up your new soul mate, but hey that’s kind of a win win.

The Artist is Present

Developed by pippinbar games, The Artist is Present is an old school Sierra-style recreation of the famous performance piece of the same name by Marina Abramovic. The user can relieve the experience including the incredibly long and frustrating line into the museum.

“Have the experience only a lucky few have ever had! Stare into Marina Abramovic’s eyes! Make of it what you will! Just like art!”

Andreas Schlegel | Procedural Drawings

Andreas uses a CNC to produce these very simplistic drawings that are quite beautiful.

3 Dreams of Black

3 Dreams of Black is an interactive music video that uses WebGL to dynamically change the scenery and visuals of the video. As the viewer moves the mouse around the screen and points at the walls of an abstract cityscape, flora and fauna grow and stream out from where the viewer is pointing, creating a mesmerizing set of animations. In an opposing scene, the viewer draws dark pools into a green landscape, from which disfigured animals spawn and follow the camera. But perhaps the most interesting scene is where the viewer guides a flock of birds around a desert, which contains user-submitted voxel art to view and explore.

The most interesting aspect about the project for me is the manner in which the scenes seem to organically grow and morph in reaction to the mouse, and everything seems deliberately beautiful despite being completely dynamic. Although the user-submitted content is nice to see, it only seems to distract from the artistic vision of the project, since it didn’t seem to be (or need to be) the main focus.

The visuals throughout the project all seemed to be digital, but their appearance ranged from hand-painted to N64-esque low-poly graphics. I think the project did a great job demonstrating the power of WebGL in an interactive context, but I think they could have made a better artistic point with being more selective about what they showed off. The organic generation/corruption of the different scenes could have made a stronger thematic point, especially if it had been more strongly tied to the music.

Because it’s interactive (and short), you should take a look at the full website. But if you’re short on time or graphical processing power, here’s the YouTube demo:

[youtube=https://www.youtube.com/watch?v=ReH7zzj5GPc&rel=0&w=550]

Still Life

Still Life is an interactive art piece by Scott Garner that teases the saturated genre of typical still life paintings containing fruits and vases. What looks at first like a painting is actually an LCD display with a wooden frame, displaying a scene being rendered and simulated in Unity3D. As the viewer tilts the frame, held by a rotating wall mount, the direction of gravity in the scene adjusts accordingly, giving the illusion that the scene is physically contained in the art display.

The work is relatively simple, and it achieves its purpose perfectly well: to add a new dimension to traditional still life painting. What I enjoy is how simply it subverts the viewer’s expectation for a framed painting with an entertaining twist. The first things that come to mind are other classical paintings that could have been given interesting spins. For example, a “painting” of Mona Lisa with facial tracking, where she subtly rotated her head to face the viewer, or a view of The Persistence of Memory where the melting clocks are actually simulated fluids that very slowly melt across the scene.

Unfortunately the work does come across as a little gimmicky, but I think for what it tried to do it worked very well. I’m curious if there are other materials that could have given an even better illusion, such as an OLED screen to remove the typical LCD screen glare, or better textures for the fruit so they look more realistic.

You can check out the Vimeo video here:

[vimeo 35109750 w=550]

Machines

Machines is a project to collaborate between engineers and musicians to create unique instrumentations and pieces of music. The machines are made mostly from recycled and surplus parts, and they have a very steampunk aesthetic that makes them look far more abstract than traditional instruments. The project would involve collaborating with traditional musicians who would try to create new kinds of music while learning from and influencing the engineers.

The types of machines in the project looked very compelling to me, because I’ve always been a fan of both experimental music and rube goldberg machines, and their inventions so far seem to be a great mix of both worlds. Inviting talented musicians to play with these instruments and see what they can come up with seems like a great way to join two worlds and fully realize the potential of this type of project; it makes it much more interesting than if they had simply built fun-sounding machines with no feedback from artists who could fully utilize them.

Although I am a fan of the visuals of the machines they’ve built, it seems like they’re focusing a lot on the presentation rather than the musicality, which has a lot of untapped potential. Musical instruments seem to be a relatively untapped genre of experimentation, since we’ve been refining the same ones for hundreds of years, so I hope they create machines that produce a large spectrum of types of music and sounds, and investigate other world music cultures for more inspiration.

The project is currently in funding via Kickstarter; click on the image to view the project’s page:

https://www.youtube.com/watch?v=IULdfQbzxKQ

This project is somewhat tech driven, but I really like how much the creators of the project freak out over it. It is a really well made robot obviously– but I’m more interested by the passion of the creators. It is also interesting that they created a robot with such culture relevance to the incredibly passionate soccer world.

http://www.thisiscolossal.com/2011/12/carved-book-landscapes-by-guy-laramee/?src=footer

These book carvings are done Guy Laramee. The books are somewhat TYPT (typical public taste). But as a person with a digital fabrication background this work inspired me by the potential of re-fabricating existing material. I can imagine making work more meaningful by carving out of existing ‘books’ or generally any found object.

http://www.thisiscolossal.com/2011/04/one-man-100000-toothpicks-and-35-years-scott-weavers-rolling-through-the-bay/?src=footer

http://www.daito.ws/en/work/particles.html#3

I like these two works. They are both incredible and highly similar–they both revolve around moving balls and rail systems. Daito’s is more advanced technologically while Scott Weaver’s is more passionate. The contrast between these two works is somewhere I want to fall. Weaver’s incredibly weird passion and fanatic nature is so unique and seems very old fashion, whereas Daito is obviously one of the best coder’s and inventors currently in the art world.