October 25, 2010

Clock

int sec = second();
int minutes = minute();
int hours = hour();
int radius = 35;
int n;
int o;
int p;


void setup(){
size(750,750);
background(0);
noFill();
smooth();
cursor(CROSS);
int sec = second();
int minutes = minute();
int hours = hour();
 
}

void draw(){
    background(0);
    hours = hour();
    sec = second();
    minutes = minute();
 
  for (int i = 0; i < sec; i++){

   stroke(#ff0000);
   ellipse(0,height,i * radius,i * radius);
       n = i*radius;
  }
 
  for (int j = 0; j < minutes; j++){

   stroke(#00ff00);
   ellipse(width,height, j * radius, j * radius);
    o = j*radius;
    
  }
 
   for (int k = 0; k < hours; k++){

    stroke(#0000ff);
   ellipse(width,0, k * radius, k * radius);
   p = k * radius;
    
  }
  if (sec==0){

  background(0);

 
   for (int l = 0; l < minutes; l++){

   stroke(#00ff00);
   ellipse(width,height, l * radius, l * radius);
    
  }
 
   for (int m = 0; m < hours; m++){

    stroke(#0000ff);
   ellipse(width,0,m * radius,m * radius);

  }
 
    
    
  }
  stroke(#ffffff);
  //seconds
 
  line(mouseX,mouseY, 0 , height - n/2);
  line(mouseX,mouseY, 0 + n/2, height);
 
  //minutes

  //line(mouseX,mouseY,width,height - o/2);
  //line(mouseX,mouseY,width - o/2,height);
 
  //hours

  //line(mouseX,mouseY,width - p/2,0);
  //line(mouseX,mouseY, width,p/2);
 

  println(sec);
  println(minutes);
  println(hours);

}

February 3, 2010

Program Flow

I’ve worked out how the pieces fit together - REST request to the server, process the XML and display the results. However, my first attempt at putting it together in Processing was pretty disastrous. I ran into all the usual Java based errors - type mismatches, variable scoping problems, etc. Honest confession time - I’m not a very good programmer. I can hack some stuff together and debug it, but I’m pretty shitty at planning. So, since my first attempt didn’t work, I took a step backwards. I made a (admittedly shitty) flowchart to diagram how the program should run.

A little Processing background - Processing is based on Java, which is a programming language. Processing uses some, but not all, of the Java language, simplifies it, and converts it back into Java to run. Typically, when you run a Processing app, or sketch, it runs two functions - setup(), which runs once, and draw(), which runs at your default framerate, which is usually 30 fps. So setup() contains code that you want to happen one time, like setting background color, window size, and changing any default values. Draw() contains code that you want to constantly update, like animation, mouse interaction, etc. There are also handler functions built in, like mouseClicked(), which will run when the mouse is clicked. Obviously.

So where do I put everything? In my first attempt, I created a function called returnPhotoID(), which was called from the mouseClicked function. It was supposed to request the XML from Flickr, strip out the photo id numbers, and build an array, pick a random item of the array (which contains the photo IDs) and return it to the mouseClicked() function. The mouseClicked() function would then build a URL from the photoID and display the image at that URL.

Two problems.

One, I was totally overloading the function. Functions should be smaller pieces of code that do one thing. A better way to organize this would be to create a function that returns the XML data, one that finds the photoID numbers, one that picks a random one, etc. This way, if I need to reuse them in the future, they are broken up into smaller, more useful chunks.

Two, the URL that was returned would have been useless anyway. When you look at a photo on Flickr, the URL looks like this - www.flickr.com/photos/user_id/photo_id . However, to load it into Processing, you need it to look like this - http://farm3.static.flickr.com/2511/4133190046_98cc482a7f.jpg

The first link goes to the generated page, in which Flickr goes to great lengths to obscure the image source. But, the XML data contains the information I need to create a valid URL which will work in Processing. Next time, I’ll update how that works out.

February 3, 2010

XML

In my last post I talked about REST, or Representational State Transfer. It’s a way of requesting data from a server through a URL query. The other half of the equation is XML, which is the format that the server returns to your application. XML, or eXtensible Markup Language is an interesting, and a little confusing format. It’s structured like HTML, in the sense that it’s a series of nested tags, with attributes and content, but instead of having a predetermined list of usable tags, the tags can be called whatever the author decides. It’s a way to describe the information, instead of instructions on how to display it.

An HTML tag, like <h1> or <p> are an instruction to your browser on how the information between the tags should look. An <h1>, or header 1, is, by default, bold, large, and with certain width and height. A <p>, or paragraph, will be indented, use a certain font, be a certain size, etc. An XML tag is just data. Your browser doesn’t know what to do with it, but you can write a program that will use the information.

An XML document consists of a root and children. For example, querying the Flickr API might return a document like this -

<?xml version=”1.0”?>

<photoset>

<photo>A photo URL</photo>

<photo>Another URL</photo>

<photo>Another URL</photo>

<photo>Another URL</photo>

</photoset>

Unfortunately, a typical Flick response is a lot more complex than that, but that’s the idea. What I’m working on now is using Processing’s XMLElement class to go through the response, get the content, and turn it into an PImage, or Processing Image object, and load each of the photo URLs. Then, when the user clicks, it will display a random image. Small steps, for sure, but steps are better than nothing.

February 2, 2010

REST

Web services like the Flickr API use a method called REST, which stands for RepresEntational State Transfer. My understanding of it is that it’s a way of getting information from a site by passing it a URL containing an embedded query. For example, you can search Google by entering the URL “http://www.google.com/search?q=rest”. Try it, I’ll wait.

See, it works. A REST URL is just pairs of attributes and values, with a question mark between the two. The attribute q is the query, and the value is rest (or whatever you want to search for). Searching through the main Google page will result in the URL http://www.google.com/webhp?hl=en#hl=en&source=hp&q=rest&aq=f&aqi=g4g-s1g5&oq=&fp=64df356c6a3f8304. Basically a bunch of other information about the language preference, where the search is coming from, and a lot of other stuff. So the server gets the request, returns the results, and Google formats and displays it.

The Flickr API, which is the next piece of my project, uses REST to return information in XML format to the program. I would format a string to a URL query, which would include my Flickr key. An example is a simple echo call. This will request an echo, or simple confirmation from Flickr. The URL would be formatted as -

http://api.flickr.com/services/rest/?method=flickr.test.echo&api_key=’your_api_key’.

The return value is some sweet, sweet XML information-

<rsp stat=”ok”>
<method>flickr.test.echo</method>
<api_key>’your_api_key’</api_key>
</rsp>

So -

rsp = Response

stat = state (whether or not the call was succesfull, I believe)

api_key = Your API key

Success!

January 21, 2010

Getting Started

I recently bought a book by Ben Fry, who is one of the creators of the Processing programming environment. I’ll be using this book as well as websites like openprocessing.org to fill in the gaps in my knowledge (of which there are many) about the process of turning data into graphical information.

I read the introductory chapter, and worked through the first example in the book. The process if pretty straightforward -

In my next post, I’ll talk about the first example from the book, and some observations.

January 21, 2010

Creating data visualizations with Processing

This blog is a tool to keep track of, and share my attempt at visualizing data with the Processing programming environment. As the project continues over the coming weeks, this blog will document the steps, as well as the trials and tribulations of learning a new and emerging technology.

Data visualization is the process of pulling data (numbers, statistics, photos, or even tweets) from the internet in a number of different formats, and turning it into a graphical representation. Some good examples can be found here.

Turning data into graphics is not a new idea, but the more recent innovation is the availability of data to the enduser. Sites like Twitter, Flickr, Google, and hundreds more have released Application Programming Interfaces (APIs) that allow users access to many datasets that previously were unavailable. With an API key and a program like Processing, data can be manipulated and displayed in creative ways.

January 18, 2010

Test Post

Test test test