I remember getting my TRS-80 when I was about 10. I flipped through the manual that came with it and was entranced at the kaleidoscope program at the end of the book. I was amazed to see that a computer could reproduce these patterns and colors in beautiful synchronization. This is my first real memory of programing and computer generated art.
I decided to revisit that memory and create my own kaleidoscope. It allows you to search Flickr titles and tags to return a set of images. You can then flip through the images and adjust the number of mirrored slices. If you are interested in how I built it please read on.
I have been developing with Processing for a couple of years and wanted to see what could be done to make a Kaleidoscope. The technology stack that I came up with was to using Processing to access a dynamic php page that looked up images on Flickr via a REST call to YQL. So let me explain what that looks like…
Let’s start with the PHP:
<?php
$Limit=10;
$request=”http://query.yahooapis.com/v1/public/yql?q=select%20farm%2C%20server%2C%20id%2C%20secret%2C%20title%20from%20flickr.photos.search(0%2C”.$Limit.”)%20where%20text%3D%22″.$Term.”%22%20&format=xml”;
sleep(1);
$response = file_get_contents($request);
$parsed_xml = simplexml_load_string($response);
foreach($parsed_xml->results->photo as $current){ //stopped here need to start inserting
$farm = $current['farm'];
$id= $current['id'];
$secret=$current['secret'];
$server=$current['server'];
$title=$current['title'];
$imageURL = ”http://farm”.$farm.”.static.flickr.com/”.$server.”/”.$id.”_”.$secret.”.jpg”;
echo $title.”|”.$imageURL.”n”;
}
?>
As you can see it is pretty straight forward. I use YQL (there may be a # of call per day limit on this) to conduct a search based on a term passed to the php page. I then parse the results into variable that are then used to build urls. The generated urls are then output as text.
While the program is running I call this page from processing by:
public void imageLoader(String term){
loading =0;
String[] lines;
lines = loadStrings(“http://www.PerlitaLabs.com/Kaleidoscope/PicturePull.php?term=”+term);
lineCount=lines.length;
for(i=0;i<lineCount;i++){
text(“.”, 50+(3*i), 20);
String[] pieces = split(lines[i], ‘|’);
println(pieces[0]);
println(pieces[1]);
loadedImages[i]= loadImage(pieces[1]);
fileCount++;
a=loadedImages[int(random(0,lineCount))]; }
You can see the code to the entire app at http://www.perlitalabs.com/Kaleidoscope/index.html
And that is pretty much it. Sounds easy, but it did take some time to get it to work right. I want to work to add some features around saving images and possibly a gallery, but since I have a working v1 I had better get it out (perfection is the enemy of good enough).
I have posted some of the created images to flickr. Also worth checking out is the Kaleidoscope Krazy Dad made.
A couple great articles from O’Reilly on using social graphs to visualize data. Andrew Odewahn revisits and older project in Visualizing the Senate social graph, revisited – OReilly Radar. The basic notion is to go through senate voting sessions with each senator as a node. When there is a pattern of frequently having similar votes a node is drawn. He does this over an number of different periods giving insight into the political climate. Definetly watch the video.
As you will notice on each of the pages there are a list of filterable facet list on the left and right side (this is configurable as well).
