Week 4 – Text Waterfall

My inspiration for this project came from the art piece called “Text Rain” made by Camille Utterback in 1999 where on a projected screen, letters from the alphabet were falling randomly. Only, in Camille’s piece, people could stand in front of the projector and “catch” the letters in order to try and make a word.

Below you can find my own project:

and below you can find the code for this project:

let letters = []; // array to store falling letters
let slider; // slider to control letter frequency

function setup() {
  createCanvas(600, 600);
  slider = createSlider(0, 50, 10); // create slider with range from 0 to 50 and default value of 10
  slider.position(10, height + 10); // position slider below canvas
}

function draw() {
  background(220);
  // generate new letters based on slider value
  for (let i = 0; i < slider.value(); i++) {
    letters.push(new Letter(random(width), -20, random(65, 91))); // add new letter with random position and uppercase letter code
  }
  // draw and update all letters
  for (let letter of letters) {
    letter.draw();
    letter.update();
  }
}

class Letter {
  constructor(x, y, code) {
    this.x = x;
    this.y = y;
    this.code = code;
    this.speed = random(1, 5);
  }
  
  draw() {
    text(String.fromCharCode(this.code), this.x, this.y); // draw letter at current position
  }
  
  update() {
    this.y += this.speed; // move letter down based on speed
    if (this.y > height) {
      // remove letter from array when it goes off screen
      let index = letters.indexOf(this);
      letters.splice(index, 1);
    }
  }
}

While obviously I am nowhere near the level to add Camille’s interactivity nor do I have the resources to do so, I took inspiration from this piece and tried to recreate it on my own. While her letters are a bit more scattered in order to make them easier to catch, I wasn’t limited by this feature and so tried to create a waterfall like effect in order to create a bombardment of letters. My reason for this is because one day in class, professor Mang mentioned something interesting about randomness and infinity in where say if letters keep falling randomly and for an infinite amount of time, eventually, they will end up spelling out a word. The thought of such a possibility intrigued hence why I wanted to create a waterfall in order to try and maximize that chance.

I’m especially proud of my implementation with the slider allowing the user to control how many letters should fell if it feels over or underwhelming for them. You can turn the slider to 0 if you are tired of the letters or max it out though I wouldn’t maybe recommend that if you have an especially old laptop.

I could definitely improve on this by adding more color to the background or adding some audio such as maybe a waterfall audio or such. It would add more personality and touch to the project though I guess you could say the simplicity if this project adds to it as well.