I made this on my desktop mac mini, it doesn’t have a camera, so I used Kinect instead. The idea is the same. You can adjust the tilt using the arrow keys, and the threshold using “a” , “s” , “z” and “x” keys.

//TEXT RAIN KINECT//
//IACD ASSIGNMENT//
//CAN (JOHN) OZBAY//
//2013//

import org.openkinect.*;
import org.openkinect.processing.*;

Kinect kinect; //kinect settings
int kWidth = 640;
int kHeight = 480;
int kAngle = 0;

PImage depthImg; //depth settings
int minDepth = 60;
int maxDepth = 660;

String alphabet = "abcdefghijklmnopqrstuvqxyz";
String [] letters = new String [100];
float [] x = new float [100];
float [] y = new float [100];
boolean [] falling = new boolean[100];
int savedTime; //when the function was last called
int interval = 300; //how often we want to call the function(milis)
int bThreshold = 70;

void setup () {
smooth();
noStroke();
size(640, 480);
fill(0);
savedTime = millis();

size(kWidth, kHeight);
kinect = new Kinect(this);
kinect.start();
kinect.enableDepth(true);
kinect.tilt(kAngle);
depthImg = new PImage(kWidth, kHeight);
}

void draw () {
//depth threshold
int[] rawDepth = kinect.getRawDepth();
for (int i=0; i < kWidth*kHeight; i++) {
if (rawDepth[i] >= minDepth && rawDepth[i] <= maxDepth) { 
depthImg.pixels[i] = 0xFFFFFFFF;
} 
else { 
depthImg.pixels[i] = 0;
}
}
// draw threshold image
depthImg.updatePixels();
image(depthImg, 0, 0);
stroke(255,0,0);
line(10,434,160,434);
fill(255, 0, 0);
text("Tilt: " + kAngle, 10, 450);
text("Depth Thresh: [" + minDepth + ", " + maxDepth + "]", 10, 466);
for (int i=0; i savedTime+interval) { 
makeLetter(); 
savedTime = millis();
}
}

//name speaks for itself
void moveLetter (int tempI) {
y[tempI]++;
if (y[tempI] > height) { 
falling[tempI] = false;
}
}
//self explanatory 
void drawLetter (String tempS, float tempX, float tempY, int tempI) {
fill(0,200,255); 
text(tempS, tempX, tempY);
}

//Making of "The Letter"
void makeLetter () {
boolean madeLetter = false;
int randomNumber = int(random(alphabet.length()));
String tempChar = alphabet.substring(randomNumber, randomNumber+1);
for (int i=0; i 0 && loc <pixels.length) {
//get its brightness
float b = brightness(pixels[loc]);
if (b > bThreshold) {
isPixelDark = true;
}
}
return isPixelDark;
}

void keyPressed() {
if (key == CODED) {
//UP & DOWN ARROW KEYS, FOR KINECT TILT
if (keyCode == UP) {
kAngle++;
} 
else if (keyCode == DOWN) {
kAngle--;
}
kAngle = constrain(kAngle, 0, 30);
kinect.tilt(kAngle);
}

//A, S, Z, X - SET min Depth and max Depth
else if (key == 'a') {
minDepth = constrain(minDepth+20, 0, maxDepth);
} 
else if (key == 's') {
minDepth = constrain(minDepth-20, 0, maxDepth);
}

else if (key == 'z') {
maxDepth = constrain(maxDepth+20, minDepth, 2047);
} 
else if (key =='x') {
maxDepth = constrain(maxDepth-20, minDepth, 2047);
}
}

//don't forget to stop
void stop() {
kinect.quit();
super.stop();
}

Firstly, I use the camera to capture the users’ video. And use the code to capture people’s outline and fill it with black shadow.

Then, I write a randomly falling down letters generator. It produces randomly letters in the random position in the top. The letters will fall down if it doesn’t meet the black shadow.

Here’s code link:https://github.com/doukooo/textrain

import processing.video.*;

Capture video;
PImage show;
float threshold=50;
PFont f;

void setup(){
f=createFont("Arial",16,true);
size(320,240);
video=new Capture(this,width,height,50);
video.start();
}
int i=0,j=0;
int count=1;
FallLetter[] fallLet=new FallLetter[1];
FallLetter[] newFallLet;
void draw(){
if(video.available()){
video.read();
}
loadPixels();
video.loadPixels();
for(int x=0;x<video.width;x++)
{
for(int y=0;y<video.height;y++)
{
int loc=x+y*video.width;
color cur=video.pixels[loc];
float num=brightness(cur);
if(num>threshold)
{
pixels[loc]=color(255);
}
else
{
pixels[loc]=color(0);
}
}
}
updatePixels();
delay(50);
textFont(f,14);
fill(150,123,0);
int randI=int(random(640));
int randCh=int(random(65,90));
newFallLet=new FallLetter[count];
//deal with every letter
for(int n=0;n<count;n++)
{
if(n==count-1)
newFallLet[n]=new FallLetter(randI,randCh);
else
newFallLet[n]=fallLet[n];
char show=newFallLet[n].GetCh();
int xLoc=newFallLet[n].GetxLoc();
int yLoc=newFallLet[n].GetyLoc();
if(yLoc!=240)
{
text(show,xLoc,yLoc);
//if(red(pixels[xLoc+yLoc*width])==0&&green(pixels[xLoc+yLoc*width])==0&&blue(pixels[xLoc+yLoc*width])==0)
if(yLoc>0)
{
if(brightness(pixels[xLoc+yLoc*width])<100)
newFallLet[n].UpdateY(-1);
else
{
newFallLet[n].UpdateY(1);
}
}
}
}
fallLet=new FallLetter[count];
fallLet=newFallLet;
count++;

}
class FallLetter{

int xLocation,yLocation=10,ch;
char chShow;
FallLetter(int xLoc,int word)
{
xLocation=xLoc;
chShow=char(word);
}
//falling y position update
void UpdateY(int yLoc)
{
yLocation+=yLoc;
}
//get the position and char of the instance
int GetxLoc()
{
return xLocation;
}
int GetyLoc()
{
return yLocation;
}
char GetCh()
{
return chShow;
}
}

I look pretty pissed in this video – its probably due to inclement weather.

My implementation of Text Rain is fairly straightforward. The code is probably longer than needed for the simple effect, but I added some things, and wrote it because I thought this was something that could be made better in the future. One thing I really want to do is add awesome lightning effects that I can control with my hands.

Each droplet is an object with position variables and it’s derivatives. Every run through the draw loop, these are updated according to the preset numbers. Since I have acceleration in my droplets, it was important for me to limit the droplet speed using a terminal velocity. Finding these numbers was done by trial and error, and no doubt there is still room for improvement.

/* Droplets fall from the top of the screen and stop when they reach a certain threshold */
class Droplet{
//The character we are drawing
char c;
//The font size the droplet is being drawn
int size;
//The current position, velocity, and acceleration of the drop
float x, y, x_v, y_v, x_a, y_a;
//The starting position, velocity, and acceleration of the drop
int init_x, init_y, init_x_v, init_y_v, init_x_a, init_y_a;
//The width and height of the
int width, height;
//Terminal velocity for the droplet
//Change this value if you want it to snow instead
int terminal_v = 12;
//Whether this droplet is now snow
boolean isSnow;


By default droplets have an alpha value, and so, drops get darker when they are stacked. This made sense to me, since I think of the droplets as combining like they would in real life.

Aside from what Camille Utterback and Romy Achituv made, my implementation allows you to control the direction of the wind (using left and right keyboard) so that droplets move horizontally as well. Since it is winter, I also added a snow toggle (press shift), which can slow down the droplets. All of this is possible by simply setting the properties of all Droplet objects.

GitHub: https://github.com/dgurjar/Text-Rain

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