Data scraping is going well.. I have at the time of writing about 65k+ images scrapped of the iTunes App Store.

I forgot to mention, I’m changing my idea to try to visualize something interesting from the abundance of (mostly bad) icons on the App Store. I don’t think I will have sufficient time to scrape the entire app store, I’ll just have to work with what I have.

I’m not too sure what kind of visualization I can get out of all these data. On the fundamental level, I’m going to try to generate a colour chart of all the icons in the app store. I’m also thinking of experimenting with data averaging or various other techniques to see what I can get.

<pre lang=”java”>

void setup(){

size(310, 560);

noFill();

noLoop();

}

// rows/columns

void draw(){

rectMode(CENTER);

int n = 0;

for (int y=0; y<24; y++){

for (int x=0; x<12; x++) {

// square transformations (n gets progressively higher by row)

pushMatrix();

translate(20*x + random(n++)/70+30, 20*y + random(n)/70+30);

rotate(PI*random(-n, n)/1000);

rect(15, 15, 20, 20);

popMatrix();

}

}

}

</pre lang=”java”>

Processing.js:

Processing Applet:

Source Code:

void setup() {
 // define the window size & enable anti-aliasing
 size(550, 800);
 background(255);
 smooth();
 noFill(); // not solid squares
 noLoop(); // only draw() once
}
 
void draw() {
 // allow for some padding around the edge
 translate(30,10);
 
 int x = 0, y = 0, side = 30;
 int i = 0;    // increment just like the original
 float j1, j2; // random numbers for translation and rotation
 
 for (int k = 0; k < 24; k++ ) { // iterate through y-axis
   for (int j = 0; j < 16; j++ ) { // iterate through x-axis
     i++;
     translate(x, y); // re-define coordinate axis to square
 
     // pick increasingly variable random numbers for
     j1 = random(-15*i/244,15*i/244); // translation
     j2 = random(-15*i/244,15*i/244); // & rotation
 
     // rotation should only affect one square at a time,
     //   so push and then pop that alteration to the coordinate axis
     pushMatrix();
     rotate(radians(j2));  // rotate the axis
     rect(j1, j1, 30, 30); // plot the square
     popMatrix(); // return the axis to its original state
 
     x=30; // x-position advances for each square drawn in row
     y=0;  // y-position shouldn't change in the middle of a row
   }
   x=-450; // return x to beginning of row position
   y=30;   // adjust y to next row
 }
}

OpenFrameworks:

Schotter, processing.js

Schotter, processing

Schotter, openFrameworks

Schotter, code

//Samia Ahmed, samiaa@andrew.cmu.edu
//A reproduction of Schotter by Georg Nees
//Carnegie Mellon University: 51-482
//January 2011
 
  int rows = 23;
  int cols = 12;
  int side;
 
void setup(){
  size(392, 700);
  side = width/(cols+2);
  background(248, 244, 236);
  noLoop();
}
 
void draw(){
  for (int row = 0; row < rows; row++){
    for (int col = 0; col < cols; col++){
      pushMatrix();
      translate((side*col)+side/2+side, (side*row)+side/2+side); //resets the origin
      rotate(setRotation(row, col));
      noFill();
      rect(-(side/2)+setShift(row, col), -(side/2)+setShift(row, col), side, side);
      popMatrix();
    }
  }
 
}
 
float setRotation(int row, int col){
  float count = (row*cols+col);
  float rand = random(count);
  if (count > (rows*cols)/4 || random(rows*cols) < count)
    if (int(random(3)) == 1)
      return radians(90*(rand/(rows*cols)));
    else
     return -radians(90*(rand/(rows*cols)));
  return 0;
}
 
float setShift(int row, int col){
  float count = (row*cols+col);
  float rand = random(count);
  if(count > (rows*cols)/4 || random(row*col) < count)
     if (int(random(3)) == 1)
       return (side/2*(rand/(rows*cols)));
     else
       return -(side/2*(count/(rows*cols)));
  return 0;
}

An attempt in Flash / ActionScript 3.0
On second thought, I should have take a stab at it in Processing… It was hard to find directly applicable code. Alternatively, I also may just to be better at getting into the coding mindset.

The textrain is *supposed to* get caught on the whitest thresholds (worked better for the mediocre video quality and harsh desk lamp lighting).

In brighter news: The text is inspired by one of my favorite quotes:
“You know you’re in love when you can’t fall asleep because reality is finally better than your dreams.” -Dr. Seuss

Text Rain coded in processing. References background subtraction at Processing.org.

Completed in Processing with openCV.

Reproducing Text Rain using OpenFrameworks:

Here’s an exercise in re-creating Camille Utterback’s Text-Rain project:

Reproducing Schotter | 1965 |  George Nees

using processing.js ::

as a processing applet ::

/*
* Alex Wolfe - Spring 2011
* Interactive Art and Computational Design
* Reproducing Schotter(1965) by Georg Nees
*/
 
int rectSize = 20;
int rows = 23;
int col = 12;
int xOffset = 30;
int yOffset = 10;
int r = 8;
 
void setup(){
  size(300,500);
  background(255);
  rectMode(CORNER);
  smooth();
  noFill();
  stroke(0);
 
  for( int x=xOffset; x

openFrameworks:

This is an example of my Open Frameworks “Text Rain” interpretation. I used the openCVExample including the various ofxCv classes (particularly ofxCvContourFinder.cpp).

OF “Text Rain” Interpretation from eric brockmeyer on Vimeo.

wu tang forever
a tribute to Text Rain (1999) by Camille Utterback in Processing

TextRain:

Created by running a filter, changing colors beyond the average pixel brightness to white, and the rest to black. When a letter hits a “black” pixel, it is moved upwards, otherwise it moves downwards.

This is a video of my Text Rain reproduction. I coded it in Processing, but had trouble embedding the applet (It couldn’t find the Capture class when it tried to run it on the blog), so I made a video instead. This uses code from the background subtraction example from processing.org. There are a few small bugs, but they are mostly based on lighting and the color of my walls. My screen capture software was acting up as well, which explains the video stuttering.

This is my version of TextRain in OpenFrameworks:

The idea is very simple. A background image is used to estimate the regions in the video that are being occupied by active observers. The difference image between the current frame captured by the camera and the background is smoothed, thresholded and dilated. These operations generate a foreground map that allows to determine when to change the position of the text.

Schotter in Processing.js:

Schotter in Processing (now with a little of color):

(using the following code:)

// Constants
int MAX_DISPLACEMENT = 15;
int MAX_ROTATION = 45;
int MARGIN = 30;
 
// Processing Setup
void setup(){  
    smooth();
 
    size(240 + 2*MARGIN,440 + 2*MARGIN);
    background(255);
    noLoop();
    randomSeed(millis());
}
 
// Main drawing function
void draw(){     
    float rand_rot = 0.0;
    int rand_dis = 0;
    int r = 0, g = 0, b = 0;
 
    for (int j=0; j<22; j++){
 
	for (int i=0; i<12; i++){
 
	    // set up rotation and displacement
	    rand_rot = (random(-MAX_ROTATION,MAX_ROTATION))*j/22;
	    rand_dis = floor((random(-MAX_DISPLACEMENT,MAX_DISPLACEMENT))*j/22); 
 	    if ((i == 0 && rand_dis < 0) || (i == 11 && rand_dis > 0)){
		    rand_dis = -rand_dis;
	    }
 
	    // draw rectangle (col=i, row=j)
	    pushMatrix();
	    translate(MARGIN + 20*i + 10 + rand_dis, MARGIN + 20*j + 10 + rand_dis);
	    rotate(rand_rot*PI/180.0);
	    noFill();
            r = floor(random(50,255)*2/(22-j+1));
            g = floor(random(50,255)*2/(22-j+1));
            b = floor(random(50,255)*2/(22-j+1));
            stroke(r,g,b);
	    rect(-10, -10, 20, 20);
	    popMatrix();
 
	}
    }
}

Schotter in OpenFrameworks (with some mouse interaction this time):

Schotter w/Processing.js

Processing w/plain old Processing

//Caitlin Rose Boyle
// January 10
// intart compdesign
//Schotter Reproduction
int squareSize = 30;

void setup()
{
size(((squareSize * 12) +60), ((squareSize * 24) + 60));
background (255, 255, 255);
noLoop();
noFill();
}

void draw()
{
drawSchotter();

}

void drawSchotter()
{

rectMode(CENTER);
int Counter = 0;
//loop rows
for (int y = 0; y < 24; y++){ //draw one row for (int x = 0; x < 12; x++) { //draw one square pushMatrix(); translate(squareSize*x + random(Counter++)/100 + 30 , squareSize*y + random(Counter)/100 + 30); rotate(PI*random(-Counter, Counter) / 1000); rect(15, 15, squareSize, squareSize); popMatrix(); } } } Schotter in openFrameworks [youtube clip_id="5WgBodZN8Qo" width=”635" height="501"] //Caitlin Rose Boyle // January 11 // intart compdesign //Schotter Reproduction OF int squareSize; int square_counter; int translatex; int translatey; int rot; //-------------------------------------------------------------- void testApp::setup(){ square_counter = 0; squareSize = 30; ofBackground(255,255,255); ofSetWindowTitle("Schotter Boyle"); ofNoFill(); ofSetColor(0x000000); ofSetRectMode(OF_RECTMODE_CENTER); ofEnableSmoothing(); ofSetFrameRate(60); } //-------------------------------------------------------------- void testApp::update(){ ofSeedRandom(1347); square_counter = 0; } //-------------------------------------------------------------- void testApp::draw(){ // Loop over all columns for (int y = 0; y < 24; y++) { // Loop over all rows for (int x = 0; x < 12; x++) { ofPushMatrix(); // translate: offset random jitter border ofTranslate(squareSize*x + ofRandom(0, square_counter)/10 + 30 , squareSize*y + ofRandom(0, square_counter)/10 + 30); ofRotate(PI * ofRandom(-square_counter, square_counter)/30); // Draw the square ofRect(squareSize/2, squareSize/2, squareSize, squareSize); ofPopMatrix(); square_counter++; } } }

The .JS version:

the Jar version:

the OpenFrameworks version:

code:

public final int width = 20;
public final int height = 20;

public void setup() {
size(400,500);
background(0xffffff);
noFill();
noLoop();
}
public void draw() {
for(int x = 0; x < 12; x++) { for(int y = 0; y < 20; y++) { translate(x*width,y*height); float random = random((float)y/5); rotate((random(2f)-1f)*random*random); rect(0,0,width,height); resetMatrix(); } } }