Ricard wrote on Apr 18^th, 2005, 10:47am:

hi ricard! i can't thank you enough.
the code works awesome!
thank you!!!


two questions i had were:
- is there anyway to incorporate an actual <keyboard return> to generate a line break?

and

- concerning the actual length of space vs. line break. as is, if i type word and wait a few seconds the largest space is only specific to that line. is there any way to tweak it so that if i wait say 2 mins. the next letter i type will appear 5-6 line breaks below? taking into account the line break?


-----
as for the variations - that would be awesome (the more the better - feel free to post). will be great to see where we can get.

i myself have two in mind:
1. the first was to effect the percentages of black in a letter based on the elapsed time. (i've attached this code at the bottom - you can see what limited program knowledge i have). this is very similar to what you suggested as a variation and i'd love to see the effects of the whole word incorporating the space bar.

2. the second more difficult idea was to incorporate the 'blinking' of the curser. what i mean by this is: the length in which the words are visible (flashing and holding on and off the screen) depends again on the elpased time before being type. words that are typed rapidly 'flash' quickly while words that took time to consider hold there positions much longer. i think the effect could really be interesting in providing a quick, revealing overview of a document - something of a no bullshit summary.

3. i have a additional thought on tracking the use of the delete key. what i propose is that everytime the a letterform is deleted, when the user resumes typing the color changes while still incorporating the the percentage of that color based on the pauses. etc...
-----

agian, i appreciate any time you can give and would love to see what you come up with.

dylan



0-100% BLACK/WHITE CODE:
------------------------
BFont f;
TypeTracker tf;
int leftmargin = 20;
int rightmargin = 20;
int topmargin = 40;
int bottommargin = 20;

float now;
float horizPos=0, vertPos=0;
float coeffSpace=0.05;
float coeffScale=0.005;
float coeffColor=0.05;

void setup()
{
 size(600, 800);
 framerate(20);

 translate(0,0);

 // load the font. fonts are located within the
 // main Processing directory/folder and they
 // must be placed within the data directory
 // of your sketch for them to load
 f = loadFont("Univers65.vlw.gz");
 textFont(f, 27);

 // Store the cursor rectangle's position
 horizPos = leftmargin;
 vertPos = topmargin;
 rect(horizPos, vertPos, 10, 21);

 // create the class TypeTracker
 tf = new TypeTracker();

 // white type, black background
 fill(0);
}

void loop()
{
 background(255);
 tf.draw();
}

void keyPressed()
{
 if ((key >= 0x20 && key <= 0x7e)||(key ==8 )||(key==10))
 {
   float dt=millis()-now;
   now+=dt;
   tf.addChar(char(key),dt);
 }
}

class TypeTracker{
 String texts="";
 float delays[];
 int index=0;

 TypeTracker(){
   delays = new float;
 }

 void draw(){
   push();
   translate(horizPos,vertPos);  // place the cursor at the beginning of the text display field
   //scale(25.0f);       // scale the text

   char k;
   float horizAdv=0,vertAdv=0,scaling=1.0;
   float horizNoSpcAdv=0;

   boolean beginLine=true;

   for(int i=0;i<texts.length();i++){
     k = texts.charAt(i);

     horizAdv+=delays*coeffSpace;
     horizNoSpcAdv+=1*coeffSpace;
     //scaling=delays*coeffScale;
     //println(horizAdv);
     //if(horizAdv>=(width-leftmargin-rightmargin-f.width(k))){
       if(horizNoSpcAdv>=(width-leftmargin-rightmargin-f.width(k))){
         horizAdv=0;
         vertAdv+=30;
         horizNoSpcAdv=0;
       }
       push();

       // THIS IS THE CHANGING VALUE OF DELAY!
       // delays
       // println(delays);

       // CHANGE THE FILL CONTINUOUSLY
       fill(255-(delays/5));
       translate(horizNoSpcAdv,vertAdv);

       // CHANGE LETTERSPACING
       //translate(horizAdv,vertAdv);
       //scale(scaling);
       text(k,0,0);
       pop();

       horizNoSpcAdv+=f.width(k);
       horizAdv+=f.width(k);

     }
     pop();
   }

   void addChar(char k,float dt){
     if(k == char(8)) // special case for Backspace
     {
       if(texts.length()>0){
         texts=texts.substring(0,texts.length() - 1);
         index--;
       }
     }
     else
     {
       texts=texts + k;
       delays=dt;
     }
   }
 }

Hi there again,

The code is still quite messy.  But as soon as I get some free time I will try to work on it and simplify it.

This version allows to visualize:
- delay per letter -> spacing of letters
- word break -> space + change in color
- line break -> line break

I will soon get it to change the alpha of letters and words, depending on the delay per letter and/or per word.

NOTE 1: this version will only work on version Processing BETA v85.  we must get on board!!  

NOTE 2: your programming knowledge isn't that bad, you understood pretty well where the changes had to be made (and my code is bad, with no comments at all)!!

Code:

PFont f;
TypeTracker tf;
int leftmargin = 20;
int rightmargin = 20;
int topmargin = 40;
int bottommargin = 20;
 
float now;
float horizPos=0, vertPos=0;

float coeffAdv = 0.05;
float coeffScl = 0.005;
float coeffCol = 255;
float coeffAlp = 0.002;

boolean flagAdv = false;
boolean flagCol = false;
boolean flagAlp = false;

float fontSize=24;
 
void setup()
{
  size(500, 500);
  framerate(30);
 
  // load the font. fonts are located within the  
  // main Processing directory/folder and they
  // must be placed within the data directory
  // of your sketch for them to load
  f = loadFont("Univers66.vlw.gz");
  textFont(f, fontSize);
 
  // Store the cursor rectangle's position
  horizPos = leftmargin;
  vertPos = topmargin;
  rect(horizPos, vertPos, 10, 21);
  
  
  // create the class TypeTracker
  tf = new TypeTracker();
 
  // white type, black background
  fill(0);
}
 
void draw()
{
  background(255);
  tf.draw();
}
 
 
void keyPressed()
{
  if((keyCode==CONTROL)){
    flagAdv=!flagAdv;
    flagCol=!flagCol;
    flagAlp=!flagAlp;
  }
  if ((key >= 0x20 && key <= 0x7e)||(key ==8 )||(key==10))
  {
    float dt=millis()-now;
    now+=dt;
    tf.addChar(char(key),dt);
  }
}
 
 
class TypeTracker{
  String texts="";
  float delays[];
  float delaysWords[];
  int index=0;
  int indexOfLastSpace=0;
  int indexOfSecondLastSpace=0;
  
  color[] colors={color(120,0,0),color(0,120,0)};
  
  
  TypeTracker(){
    delays = new float[1000];
    delaysWords = new float[1000];
  }
  
  void draw(){
    pushMatrix();
	translate(horizPos,vertPos);  // place the cursor at the beginning of the text display field
	//scale(25.0f);		   // scale the text
	
	char k;
	float horizMax=0,horizAdv=0,vertAdv=0,scaling=1.0,adv=0;
	int wordbreaks=0,linebreaks=0;
	color letterColor=0;
	float wordAlpha=0;
	
	for(int i=0;i<texts.length();i++){
	  k = texts.charAt(i);
	  
	  float coefficient;
	  
	  switch(k){
	    case 10:
		adv+=horizMax-horizAdv;
		linebreaks++;
		letterColor=colors[(wordbreaks+linebreaks)%2];
		
		coefficient=(flagAlp)?coeffAlp:0;
		wordAlpha=constrain(delaysWords[i+1]*coefficient,0,255);
		wordAlpha=255-wordAlpha;
		
		break;
	    case 32:
		wordbreaks++;
		
		coefficient=(flagAlp)?coeffAlp:0;
		wordAlpha=constrain(delaysWords[i+1]*coefficient,0,255);
		wordAlpha=255-wordAlpha;
		
	    default:
		coefficient=(flagAdv)?coeffAdv:0;
		adv+=delays[i]*coefficient;
		
		letterColor=colors[(wordbreaks+linebreaks)%2];
		break;
	  }
	  
	  //letterColor=color(red(letterColor),green(letterColor),blue(letterColor),wordAlpha);
	  
	  if(!flagCol){
	    letterColor=0;
	  }
	  
	  horizMax=width-leftmargin-rightmargin-20;
	  horizAdv=adv%horizMax;
	  vertAdv=fontSize*(floor(adv/horizMax));
	  
	  pushMatrix();
	    fill(letterColor);
	    translate(horizAdv,vertAdv);
	    text(k,0,0);
	  popMatrix();
 
	  adv+=fontSize*f.width(k);
	}
    popMatrix();
  }
  
  void addChar(char k,float dt){
    if(k == char(8)) // special case for Backspace
    {
	if(texts.length()>0){
	  texts=texts.substring(0,texts.length() - 1);
	  index--;
	}
    }
    else
    {
	delays[index]=dt;
	if((k == char(32))||(k == char(10))){	// special case for Space (Calculate the word delay)
	  float avgDelay=0.0;
	  int indexOfLastLinebreak=texts.lastIndexOf(10);
	  int indexOfLastSpace=texts.lastIndexOf(32);
	  
	  // calculate the average delay per word
	  int indexOfLastCut=max(indexOfLastSpace,indexOfLastLinebreak);
	  for(int i=indexOfLastCut+1;i<=index;i++){
	    avgDelay+=delays[i];
	  }
	  avgDelay=avgDelay/(index-indexOfLastCut);
	  delaysWords[indexOfLastCut+1]=avgDelay;
	}
	
	index++;
	texts=texts + k;
    }
  }
}