Flickr Kaleidoscope built with Processing

17 11 2009

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.

Flickr Kaleidoscope Examples

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.
colorful
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.

Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to StumbleUponAdd to TechnoratiAdd to Twitter

Advertisements

Actions

Information

3 responses

13 01 2010
robert

Thanks for the great processing sketch Kaleidoscope! Since I am a beginner, I found it really useful to boost up my processing skills. I want to modify some things of your sketch, but I don’t really know what I have to change to make it work. What I want to do is to make a copy of the kaleidoscope circle that display’s the 2nd picture in row. So I want to build a sketch where there are 2 kaleidoscopes, next to eachother, reacting on the mousemovement.

I hope you can give me a push in the right direction.

Thanks a lot!

Cheers,

Robbert

13 01 2010
perlitalabs

If you haven’t already check out:
Devon Eckstein’s Hexagon Stitchery – His sketch can be found at http://www.openprocessing.org/visuals/?visualID=1288 It makes use of a large number of mini kaleidoscopes.

Generally what you would want to do is make a function out of this section of the program:
background(0,0,0);
//the width and height parameters for the mask
int w =int(width/3.2);
int h = int(height/3.2);
//create a mask of a slice of the original image.
PGraphics selection_mask;
selection_mask = createGraphics(w, h, JAVA2D);
selection_mask.beginDraw();
selection_mask.smooth();
selection_mask.arc(0,0, 2*w, 2*h, 0, radians(360/totalSlices+.1)); //using 369 to reduce lines on arc edges
selection_mask.endDraw();

float wRatio = float(a.width-w)/float(width);
float hRatio = float(a.height-h)/float(height);
//println(“ratio: “+hRatio+”x”+wRatio);
PImage slice = createImage(w, h, RGB);
slice = a.get(int((mouseX)*wRatio), int((mouseY)*hRatio), w, h);
slice.mask(selection_mask);
translate(width/2,height/2);
float scaleAmt =1.5;
scale(scaleAmt);

for(int k = 0; k<=totalSlices ;k++){
rotate(k*radians(360/(totalSlices/2)));
image(slice, 0, 0);
scale(-1.0, 1.0);
image(slice,0,0);
}
}
resetMatrix();

}
}

The function is the right way to do it, because you should call it twice with two different coordinates. For example if you want them side by side they would have the same y coordinate, but the x coordinates would be .25*width and .75*width. These parameters would need to be passed to the translate function.
I hope this gets you started. I would love to see what you come up with.
Gary

17 02 2010
Importing Google Spreadsheet Data into Processing « The Pearl

[…] file to bring the external sites data to your server.  This is the approach I took in building my Flickr Kaleidoscope.  To create the same result as above, but without the signing the app I created a small php file […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: