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





Discovering Processing.js and All the Amazing New Possibilities

25 05 2009

 

Screen shot of HasCanvas

Screen shot of HasCanvas

So from some of my earlier post it is clear that I am a fan of the Processing IDE for create artistic programs and applets.  I have also been struggling with finding the right language (Javascript, Actionscript, ?!?!) to build out some new ideas with for the web.  I think my prays have been answered.  John Risig has ported Processing over to Javascript, call his creation Processing.js.  This means that “most” of the cool things that you could do in Processing, you can now do on the web without a java applet and much better integration with html. 

 

The biggest down side  I see at this point is limited and inconsistent browser support for the javascript canvas required for Processing.js to work.  So if your project is for commercial use it may not meet compatibility standards.  Of course Internet Explore is the least compatible.  Firefox is great and Chrome seems to work pretty good.

Processing.js has been around for a little over a year… it came out in May of 2008, but it really seems to be getting some traction.  And I just discovered it this month, so it is new to me.  Below are some resouces that I have found helpful:

The site from the John Resig: http://ejohn.org/blog/processingjs/

A blog entry from John with some ideas on how to get started and some reflecting: http://ejohn.org/blog/processingjs-aftermath/

A blog post with some good examples: http://felipe.wordpress.com/2008/05/09/processingjs/

An online Processing.JS IDE:  http://obsessing.org

An online Processing.JS game by Casey Reas: http://reas.com/twitch/

A good post on getting started with Processing.JS: http://lethain.com/entry/2008/may/10/getting-started-with-processing-js/

This is an online Processing.JS IDE and Gallery… super slick: http://www.hascanvas.com/

Using Processing.JS for sparklines: http://willarson.com/code/sparklines/sparklines.html#simple7

A lot of great examples: http://www.hyper-metrix.com/processing-js/docs/index.php

I am sure there is going to be a ton of cool stuff that can be made with this…

  • The I think some charts and graphs would be great (again no text rendering for now).  Have you seen Ben Fry’s book on data visualization:  Data Visualization by Ben Fry . A lot of the examples in this book should be portable.
  • Of course there is the art of processing
  • Games anyone?

Processing tool for creation and enabling it with Javascript would seem to open up possibilities to new audiences and new uses (I particularly like the sketch in the background of Robert O’Rourke Blog).

As you can tell I am super excited by this… my enthusiasm is only tempered by the fact that IE does not support the JavaScript Canvas object that is required to render.  😦