Tweet A Processing Sketch

If you check out my Twitter account (http://twitter.com/digitalart), you will note that in the past I created a limerick that fit within the 140 character limit Twitter imposes.

A while back there was a Processing Tiny Sketch Competition in which the Processing community was challenged to create a complete Processing sketch with a 200 character limit for the Processing program. That contest was hosted by Rhizome (you can visit my Rhizome account).

This got me to thinking: what about creating a Processing sketch that could be tweeted. If you haven't heard of Processing, it is an open source programming language and environment for people who want to create images, animations, and interactions. Processing is built on Java and the Java programming language is available to Processing users. It's a wonderful programming environment for artists and programmers alike. You can see what many folks have done with Processing at the OpenProcessing web site.

So my challenge to myself was to write an entire Processing program using less than 140 characters and I wanted the resulting image to be dynamic rather than a static. Fortunately Processing is quite flexible and there are a number of ways to shrink a program. Before explaining my methodology, here is the full unshortened version of the Processing program source code:

// declare integer variables
int x;    // x for horizontal pixel coordinate
int y;    // y for vertical pixel coordinate
int r=100;// r holds default screen size

// Setup() function is executed once at program start
void setup() {
  size(100,100); // Set the screen size
  background(0); // Set background color to black
}

// The draw() function executes continuously
void draw() {
  // Cycle through every value of x
  for(x=0;x<r;x++) {
   // For each x, cycle through every value of y
   for(y=0;y<r;y++) {
     // Set the pixel at x,y to the specified color
     set(x,y,color(frameCount*r*sin(frameCount*x),
             20*r*cos(frameCount*y),
             r*frameCount*cos(x)));
   }
 }
}

And here is the Twitter optimized version:


int x,y,r=100,t=1;void draw(){for(x=0;x<r;x++)for(y=0;y<r;y++)set(x,y,color(t*r*sin(t*x),20*r*cos(t*y),
r*t*cos(x)));t++;}


The program is just 121 characters long. I've named this program Scottish Tartan as the output resembles a tartan. There's a nice tie in as I am part-Scottish via the Campbell clan. Other than omitting the comments and crlfs (carriage return line feeds), there are functionally only two differences in the two programs.

1. I deleted the setup() function because it is optional. It is used to initialize various parameters and options and is executed just once. By removing it:
   * the canvas will default to a size that is 100 pixels wide (the x dimension) by 100 pixels tall (the y dimension).
   * the background color will default to gray.
   * the colorMode will default to RGB with 256 possible values for each color.
2. I replaced the system variable frameCount with my own variable t. The frameCount variable is incremented each time the draw() function is executed. Substituting my own variable t saves characters.

Other strategies to shorten the program were to:

• Keep variable names to one character (x,y,r,t)
• Use the increment operator t++; instead of t=t+1;
• Eliminate unnecessary for statement brackets

See the Processing program as a Twitter tweet

If you want to see what the program actually does you will need to download and install Processing. Installation is straight forward and best of all it's free. Why not give it a try. Visit http://processing.org/ for more information and to download Processing.

Processing Books

There are a number of books that have been written about how to use Processing to create images, animations, etc. Following are books that I recommend – based on the fact that I've bought and used them.

• Processing: A Programming Handbook for Visual Designers and Artists
• Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction (Morgan Kaufmann Series in Computer Graphics)
• Processing: Creative Coding and Computational Art (Foundation)
• Visualizing Data: Exploring and Explaining Data with the Processing Environment
• Algorithms for Visual Design Using the Processing Language

In addition to the books listed above, there is a new book out on Processing that was released in August 2010. I do not have this book so can not comment on it. You may want to investigate for yourself. The book is Processing for Visual Artists: How to Create Expressive Images and Interactive Art

Merry Christmas everyone, Jim

| Return to the Blog Index | This entry was posted on Thursday, December 9th, 2010 at 6:53 pm and is filed under Algorithmic Art, computer art, Computing, Digital Art, Graphics Software.