Originally by Camille Utterback and Romy Achituv, I was able to run “Text Rain” in Processing. It was my first time back to Processing in a while, but I was able to figure it out after some help and practice. I simple indexed the camera’s pixels and went about it the brightness() way. Fairly reliable and quite a lot of fun getting it going. I think a performance of my lip-singing my favorite song is in order for a finished piece.

Text Rain – Re Do from Nathan Trevino on Vimeo.

My code is here.

//Nathan Trevino 2013
//Text Rain re-do. Original by Camille Utterback and Romy Achituv 1999
//Processing 2.0b7 by Nathan Trevino
//Special thanks to the processing example codes (website) as well as Golan Levin

//=============================================
import processing.video.*;
Capture camera;

float fallGravity = 1;
float fallStart = 0;

int threshold = 100;
Rain WordLetters[];
int myLetters;


//==============================================

void setup() {

  //going with a larger size but am giving up speed.
  size(640, 480);



  camera = new Capture(this, width, height);
  camera.start();     



  String wordString = "For all the things he could lose he lost them all";

  myLetters = wordString.length();
  WordLetters = new Rain[myLetters];
  for (int i = 0; i < myLetters; i++) {
    char a = wordString.charAt(i);
    float x = width * ((float)(i+1)/(myLetters+1));
    float y = fallStart;
    WordLetters[i] = new Rain(a, x, y);
  }

}

//==============================================


void draw() {
  if (camera.available() == true) {
    camera.read();
    camera.loadPixels();

    //Puts the video where it should be... top left corner beginning.
    image(camera, 0, 0);

    for (int i = 0; i < myLetters; i++) {
      WordLetters[i].update();
      WordLetters[i].draw();
    }
  }
}

//===================================
//simple key pressed fuction to start over the Rain

void keyPressed()
{
  if (key == CODED) {
    if (keyCode == ' ') {
      for (int i=0; i < myLetters; i++) {
        WordLetters[i].reset();
      }
    }
  }
}


//=============================================
class Rain {
  // This conains a single letter of the words of the entire string poem
  // They fall as "individuals" and have their own position (x,y) and character (char)

  char a;
  float x;
  float y;

  Rain (char aa, float xx, float yy)
  {
    a = aa;
    x = xx;
    y = yy;
  }

  //=============================================
  void update() {
    
    //IMPORTANT NOTE!
    // THE TEXT RAIN WORKS WITH A WHITE BACKGROUND AND THE DARK AREAS 
    // MOVE THE TEXT

    // Updates the paramaters of Rain
    // had some problems here for the pixel index, but a peek at Golan's code helped

    int index = width*(int)y;
    index = constrain (index, 0, width*height-1);

    // Grayscale starts here. Range is defined here.
    int thresholdGive = 4;
    int thresholdUpper = threshold + thresholdGive;
    int thresholdBottom = threshold - thresholdGive;


    //find pixel colors and make it into brighness (much like alpha channeling video
    // or images in Adobe photoshop or AE)

    float pBright = brightness(camera.pixels[index]);

    if (pBright > thresholdUpper) {
      y += fallGravity;
    } 
    else {
      while ( (y > fallStart) && (pBright < thresholdBottom)) {
        y -= fallGravity;
        index = width*(int)y + (int)x;
        index = constrain (index, 0, width*height-1);
        pBright = brightness(camera.pixels[index]);
      }
    }

    if ((y >= height) || (y < fallStart)) {
      y = fallStart;
    }
  }

  //============================
  void reset() {
    y = fallStart;
  }

  //=======================================

  void draw() {

    // Here I also couldn't really see my letters that well so I
    // used Golan's "drop shadow" idea and some crazy random colors for funzies

    fill (random(255), random(255), random(255));
    text (""+a, x+1, y+1);
    text (""+a, x-1, y+1); 
    text (""+a, x+1, y-1); 
    text (""+a, x-1, y-1); 
    fill(255, 255, 255);
    text (""+a, x, y);
  }
}

For this implementation of Textrain I made a Letter class and kept track of an array of Letter objects. Each character from the string is stored in this array and updated via for loop in the draw function. They detect the brightness of the pixel immediately beneath them and only drop if the pixel is bright. There is also a function that fades the letters from teal to navy blue over time. The string is the first line of the e.e. cummings poem ‘anyone lived in a pretty how town,’ which really doesn’t have any significance other than the fact that it’s great.

GitHub -> soon, having trouble with it currently…

Code!

import processing.video.*;
Capture cam;

int height = 480;
int width = 640;

int g = 0;
int b = 100;
boolean flipG = false;
boolean flipB = true;

class Letter {
  int y;
  int x;
  int speed;
  char c;

  Letter(char character, int xPos, int yPos) {
    c = character;
    x = xPos;
    y = yPos;
    speed = (int) random(1, 2);
  }
}

ArrayList currentLetters;
Letter testLetter = new Letter('a', 50, 50);

void setup() {
  size(width, height);
  background(255);
  frameRate(10);

  textSize(18);

  cam = new Capture(this, width, height);
  cam.start();

  smooth();

  currentLetters = new ArrayList();
  String poem = "anyone lived in a pretty how town (with up so floating many bells down)";

  int xInit = 0;
  int yInit = 0;

  for (int i=0; i < 71; i++) {
    if (i<33) yInit = (int)random(-10, 10);
    else yInit = (int)random(-15, -25);
    currentLetters.add(new Letter(poem.charAt(i), xInit, yInit));
    xInit += (9 + (int)random(-3, 3));
    if (xInit > width) xInit = 9;
  }
}

void draw() {
  cam.read();
  cam.loadPixels();

  pushMatrix();
  translate (width, 0); 
  scale(-1, 1);
  image (cam, 0, 0, width, height);
  popMatrix();

  fill(0, g, 100);

  for (int i=0; i < 71; i++) {
    Letter curr = currentLetters.get(i);

    int index = width*curr.y + (width-curr.x-1);
    index = constrain (index, 0, width*height-1);

    if ((brightness(cam.pixels[index])) > 105) curr.y += curr.speed;
    else {
      while ((curr.y > 0.0) && ((brightness(cam.pixels[index])) < 95)) {
        curr.y -= .025;
        index = width*curr.y + (width-curr.x-1);
        index = constrain (index, 0, width*height-1);
      }
    }
    text(curr.c, curr.x, curr.y);

    if (curr.y >= height) {
      curr.y = (int)random(-15, 15);
      curr.speed = (int)random(1, 2);
    }
  }

  if(!flipG) {
    if (g<100) g++;
    else flipG=true;
  }
  else if(flipG) {
    if (g>0) g--;
    else flipG=false;
  }

  if(!flipB) {   
    if (b<150) b++;
    else flipB=true;
  }
  else if(flipB) {
    if (b>0) b--;
    else flipB=false;
  }
}