Processing.js


Processing

Processing Code
After a few iterations, the working code ends up being 18 lines and optimized (to the best of my ability).

void setup()
{
  size(384, 674); //12x21 grid
  background(255);
  noFill();
  stroke(0);
 
  float variability=0; //important to use float over int!
  for(int j=0; j<672 ; j=j+32) {
    for(int i=0; i<384; i=i+32) {
      pushMatrix();
      translate(i+random(-variability, variability), j+random(-variability, variability));
      rotate(radians(random(-variability, variability)));
      rect(0, 0, 32, 32);
      variability+=0.083; //increases per square, this number is 1/12
      popMatrix();
    }
  }
}

openFrameworks

Text Rain

Far from perfect, but it does respond to visual data. This was created in openFrameworks.

Processing

Processing.js

Processing code

background(255);
smooth();
size(420, 724);
fill(0, 0);
 
float entropy = 0;
for (int i = 0; i < 20; i++) {
  for (int j = 0; j < 12; j++) {
    int x = 25 + 30*j + int(random(entropy*-1, entropy));
    int y = 15 + 30*i + int(random(entropy*-1, entropy));
    int angle = 0 + int(random(entropy*-1, entropy));
 
    pushMatrix();
    translate(x,y);
    rotate(radians(angle));
    rect(0,0,30,30);
    popMatrix();
    entropy += 0.08;
  }
 
}

openFrameworks

Gives you a new version each time it runs.

Just Landed is a visualization of airline flights by Jer Thorp using Processing. Twitter is searched for passenger’s Tweets containing the phrase “just landed”. Tweets are parsed for a destination, and an home location is taken from that passenger’s profile. Each data point becomes an arc in the animation.

It is a clever use of social media as a new data set. Information which ten years ago would have been available only to large airlines keeping careful records is now published freely online, and by no conscious decision of anyone involved. However, the animation is a bit misleading; many assumptions are made when interpreting the data. (For example, all passengers are assumed to be coming from their home.) The inaccuracy is a compromise made in order to create impressive visuals from informally-gathered data.

More info available on Thorp’s blog.

Processing

void setup() {
  size(300, 600);
  smooth();
  noFill();
  background(255);
  rectMode(CENTER);
  noLoop();
}
 
void draw() {
  int x, y;
  int offset = 50;
  for (y = 0; y < 24; y++) {
    for (x = 0; x < 12; x++) {
      resetMatrix();
      translate(offset + x*20,offset + y*20);
      float r = random(-y, y);
      rotate((PI * 2) / 360 * r * 2);
      rect(r/2, r/2, 20, 20);
      resetMatrix();
    }
    translate(-x*20,0);
  }
}

Processing.js

Processing.js:

Processing:

Processing Code:

 boolean toChange = true;
 void setup()
 {
   size(400, 760);
   smooth();
   noFill();
   background(248);
 }
 
 void mouseClicked()
 {
   toChange = true;
 }
 
 void draw()
 {
   if(toChange)
   {
     fill(248);
     rect(-1,-1,401,801);
     noFill();
     for(int j = 0;j<24;j++)
     {
       for(int i = 0;i<12;i++)
       {
         pushMatrix();
         translate(20+i*30+random(j*.3+i/30)-(j*.3+i/30)/2,20+j*30+random(j*.3+i/30)-(j*.3+i/30)/2);
         rotate(radians(random((6*j+i/2))-(6*j+i/2)/2));
         rect(0,0,30,30);
         popMatrix();
       }
     }
     toChange = false;
   }
 }

Cinder:

Meischeid is a small animation by French director Matray.

3D primitives are displaced with various noise textures corresponding to different frequencies on the piano. The textures are animated by hand along to the music in After Effects. So, somewhat disappointingly, there is no music-driven procedural generation. But it is a beautiful interpretation of deconstructivist forms, and one which would lend itself naturally to automatic generation. I appreciate the use of simple polygons and particles as a material; ever since Pixar’s sub-pixel subdivision, digital animators have been trying to hide these basic building blocks of computer graphics. I also happen to be a freak about Blender, the 3D software used here.

More info at BlenderNation

The Text Rain project is coded using processing.

Part of the code is borrowed and revised from  Frame Differencing by Golan Levin.

The Main idea is to find the difference between two frames and match the different point with text’s position.

Here is the video:

And the link to the Video:
Video

1. Schotter in js file

2. Schotter in applet

3. The Video for Openframeworks

Or Click Here

4. The Code for Schotter

/**

*/
int length = 20;
float randomseed = 0.0;

void setup() {
background(255);
smooth();
size(200,400);
display();

Processing

Processing.js

OpenFrameworks

Electric Sheep is a distributed computing project by Scott Draves (PhD in Computer Science from Carnegie Mellon) generating a continuous fractal animation. Users anywhere can contribute their computers to the effort, view the results in real-time, and select their favorite patterns to be favored in the genetic evolution of future “sheep”.

The project amazes me aesthetically and technically–the way simple rules, when iterated, produce landscapes too vast and too volatile to ever be quite grasped by human senses.

The project succeeds in all it attempts. The functionality of audience-selected patterns connects users around the world in wordless visual play. By using viewer’s personal computing devices, it reveals the power available to us in consumer technology. However, it stops short of extending into the real world. Once we step away from the computer, the ongoing parade becomes invisible to us; we can only experience it with the help of our digital prosthetics.

Text Rain clone à la openFrameworks:

The significant lines of code for Text Rain are:

void app::createLetter() {
    letter *l;
    // Index in textStr from which to take this letter
    int lPos;

    // Find first open position in text
    for(int i=0; ix = ofRandom(0.0, (float) screenWidth);

            lPos = l->x / ((float) screenWidth) * ((float) textStrLen);
            if(lPos < 0)
                lPos = 0;
            if(lPos >= textStrLen)
                lPos = textStrLen - 1;

            l->c = textStr[lPos];
            l->y = 0;
            l->vel = 0.5;
            text[i] = l;
            break;
        }
    }
}

void app::destLetter(int i) {
    free(text[i]);
    text[i] = (letter *) 0;
}

void app::setup(){
	camWidth  = 320;
	camHeight = 240;
	pixelMax = 3*camWidth*camHeight;

	vidGrabber.setVerbose(true);
	vidGrabber.initGrabber(camWidth,camHeight);

	textStrLen = strlen(textStr);

	// Create text
    textMax = 1000;
	text = new letter* [textMax];
    for(int i=0; iy > yMax) {
                destLetter(i);
            } else {
                // Move this letter down at its own speed
                l->y += l->vel;

                // Move this letter up as long as it is on an obstacle
                for(;;) {
                    pixel = 3 * ( ((int)l->y)*camWidth + ((int)l->x) );
                    if(pixel >= 0 && pixel < pixelMax &&
                       img[pixel] + img[pixel+1] + img[pixel+2] < obShade) {
                        l->y -= 1.0;
                    } else {
                        break;
                    }
                }
            }
        }
    }

    // Create a new letter every 60 frames
    if( !(ofGetFrameNum()%60) ) {
        createLetter();
    }
}

void app::draw(){
    letter *l;
    char str[2] = "a";

	ofSetColor(0xffffff);
	vidGrabber.draw(0,0);

	ofSetColor(255,255,255);

	// Draw all letters
    for(int i=0; ic;
            ofDrawBitmapString(str, (int) l->x, (int) l->y);
        }
    }
}

Schotter clone à la Processing:

à la Processing.js:

and à la openFrameworks:

The openFrameworks version takes the random seed from the mouse position. Otherwise, the code is nearly identical for all three. The significant lines of code are:

float rot;
float tran;

translate(10, 10);

for(int col=0; col<12; col++) {
  rot = 0.0;
  tran = 0.0;
  translate(20, 0);

  pushMatrix();

  for(int row=0; row<24; row++) {
    translate(0, 20);
    pushMatrix();

    translate(random(-tran, tran), random(-tran, tran));
    rotate(random(-rot, rot));
    rect(-20, -20, 20, 20);

    popMatrix();

    rot += 0.03;
    tran += 0.03;
  }

  popMatrix();
}

In Processing.js:

As a Java applet:

As code:

size(404,730);

for (int ii = 0; ii < count; ii ++){ int origin_x = (ii%cols) * rect_width; int origin_y = floor(ii / cols) * rect_height; float randomness = ((float)ii / (float)count); float rand_rad = (random(2f) - 1f) * randomness * randomness; float rand_x = (random(8f) - 4f) * randomness * randomness; float rand_y = (random(8f) - 4f) * randomness * randomness; translate(origin_x, origin_y); rotate(rand_rad); rect(rand_x, rand_y, rect_width, rect_height); rotate(-rand_rad); translate(-origin_x, -origin_y); }

A video demonstrating it done in OpenFrameworks as well:

This is a processing.js file uploaded to my lab’s site. The wordpress processing.js plug-in had a problem with my class, however the code works fine when run with the processing.1.0.0.min.js file.

Press ENTER to pause.

This is the processing code for the Schotter project.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

//Eric Brockmeyer
//Interactive Art and Computational Design 
//January 11, 2011
//Reproduction of "Schotter" by Georg Nees
//press ENTER to pause!
Square[][] squares = new Square[12][24];
int keyValue = 0;
void setup(){
  size(241, 481);
  frameRate(24);
  background(#000000);
  for (int i = 0; i < 12; i++){
   for (int j = 0; j < 24; j++){
    squares[i][j] = new Square(i,j);
   }    
  }
}
void draw(){
  background(#000000);
  drawSquares();
}
void drawSquares(){
  for (int i = 0; i < 12; i++){
   for (int j = 0; j < 24; j++){
    squares[i][j].move();
    squares[i][j].draw();
   }    
  }
}
void keyPressed(){
  if (key == ENTER){
   if (keyValue == 0){
    keyValue = 1;
    noLoop();
   } 
   else {
    keyValue = 0; 
    loop();
   }  
  } 
}
class Square {
  int x, y, dim;
  float rotation;
  float xRandom, yRandom;
  Square(int xTemp, int yTemp) {
    x = xTemp;
    y = yTemp;
    dim = 20;
    rotation = 0;
  }
  void move() {
    rotation = y * random(0.05);
    xRandom = x + Y * random(-0.05,0.05);
    yRandom = y + y * random(-0.05,0.05);
  }
  void draw() {
    pushMatrix(); 
    translate(xRandom*dim+(dim/2), yRandom*dim+(dim/2)); 
    rotate(rotation);
    translate(-dim/2, -dim/2);
    noFill();
    strokeWeight(1);
    stroke(#ffffff);
    rect(0, 0, dim, dim);
    popMatrix(); 
  }
}

This is the Schotter processing applet.

Press ENTER to pause.

This is my Open Frameworks Schotter example.

OF “Schotter” Interpretation from eric brockmeyer on Vimeo.