Info Viz, updates

by Chong Han Chua @ 12:11 am 24 January 2011

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.

Schotter_Foster

by Asa Foster @ 3:29 pm 16 January 2011

<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”>

Meg Richards – Schotter

by Meg Richards @ 8:02 am 12 January 2011

Processing.js:

Processing Applet:

Source Code:

void setup() {
 // define the window size &amp; 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 &lt; 24; k++ ) { // iterate through y-axis
   for (int j = 0; j &lt; 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); // &amp; 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:

SamiaAhmed-Schotter

by Samia @ 7:48 am

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 &lt; rows; row++){
    for (int col = 0; col &lt; 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 &gt; (rows*cols)/4 || random(rows*cols) &lt; 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 &gt; (rows*cols)/4 || random(row*col) &lt; count)
     if (int(random(3)) == 1)
       return (side/2*(rand/(rows*cols)));
     else
       return -(side/2*(count/(rows*cols)));
  return 0;
}

Susan Lin – Text Rain

by susanlin @ 7:38 am

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

Alex Wolfe | Text Rain

by Alex Wolfe @ 7:25 am

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

Caitlin Boyle :: Text Rain

by Caitlin Boyle @ 6:22 am


apologies for the lagginess.

Ward Penney – Text Rain

by Ward Penney @ 6:15 am

Completed in Processing with openCV.

Meg Richards – Text Rain

by Meg Richards @ 6:11 am

Reproducing Text Rain using OpenFrameworks:


I love when they get caught on the whiteboard ledge.

Alex Wolfe | Schotter

by Alex Wolfe @ 5:07 am

Reproducing Schotter | 1965 |  George Nees

using processing.js ::

as a processing applet ::


alexwolfe_shotter

/*
* 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:

Eric Brockmeyer – Text Rain

by eric.brockmeyer @ 4:54 am

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.

shawn sims-textRain

by Shawn Sims @ 4:37 am

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

Chong Han Chua – Text Rain

by Chong Han Chua @ 4:33 am

TextRain

by honray @ 4:21 am

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.

Timothy Sherman – Text Rain

by Timothy Sherman @ 3:59 am

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.

Marynel Vázquez – TextRain

by Marynel Vázquez @ 3:40 am

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.

Marynel Vázquez – Schotter

by Marynel Vázquez @ 3:23 am

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):

Caitlin Boyle:: Schotter

by Caitlin Boyle @ 3:23 am

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++; } } }

Schotter

by honray @ 3:06 am

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(); } } }

SamiaAhmed-TextRain

by Samia @ 2:49 am

 
//Samia Ahmed, samiaa@andrew.cmu.edu
//A reproduction of Text Rain by Camille Utterback
//Carnegie Mellon University: 51-482
//January 2011
 
import processing.video.*;
Capture capture;
char poem[][] = {{'I', ' ', 'l', 'i', 'k', 'e', ' ', 't', 'a', 'l', 'k', 'i', 'n', 'g', ' ', 'w', 'i', 't', 'h', ' ', 'y', 'o', 'u', ',' },
                 {'s', 'i', 'm', 'p', 'l', 'y', ' ', 't', 'h', 'a', 't', ':', ' ', 'c', 'o', 'n', 'v', 'e', 'r', 's', 'i', 'n', 'g', ',' }};
int poemLength = 24;
int position[][] = new int[2][poemLength];
int speed[][] = new int[2][poemLength];
color captureColor;
 
 
 
void setup() {
 
  size(640, 480);
  background(0, 0, 0);
  capture = new Capture(this, width, height, 30);
 
  //sets the speed at which the letters drop, and initial position
   for (int i = 0; i < 2; i++){
    for (int k = 0; k < poemLength; k++){
    speed[i][k] = int(random(4, 10));
    }
  }
 
}
 
void draw() {
 
  pushMatrix();
  scale(-1.0, 1.0);
  image(capture, -capture.width, 0);
  filter(GRAY);
  popMatrix();
 
  for (int i = 0; i < 2; i++){
    for (int k = 0; k < poemLength; k++){
      //these set when the red and blue texts are predominant
      if (i == 0 && (second() > 0 && second() < 35)){
      if(millis()%100 == 0)
        position[i][k] = -1000;
      }
      if (i == 1 && (second() > 30 || second() < 5)){
        if (millis()%100 == 0)
        position[i][k] = -1000;
      }
 
 
      captureColor = get(width/poemLength*k+(width/poemLength), position[i][k]+speed[i][k]);
      //moving the letters
      if (position[i][k] > height || random(1000) > 990) //out of bounds, and random deletion
        position[i][k] = -30;
      else if (position[i][k]+speed[i][k] >= height || position[i][k] < speed[i][k] || red(captureColor) > 100) //legal moves
        position[i][k] = position[i][k]+speed[i][k];
      else {
       while(red(get(width/poemLength*k+(width/poemLength), position[i][k]-speed[i][k])) < 100 && position[i][k] > 0) //jumping out of black
        position[i][k] = position[i][k]-speed[i][k];  
        }
 
 
      if (i == 0){
        fill(255, 0, 0);  
        text(poem[i][k], width/(poemLength+2)*k+width/poemLength*2.5, position[i][k]);
      }
      else if (i == 1){
        fill(0, 0, 255);
        text(poem[i][k], width/(poemLength+2)*k+width/poemLength, position[i][k]);
      }
    }
  }
 
}
 
void captureEvent(Capture capture) {
  capture.read();
}
Next Page »
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2023 Interactive Art & Computational Design / Spring 2011 | powered by WordPress with Barecity