String urlSource;  // A String to hold the information from a URL

String[] data;

String[] vals;

int count = 0;     // Current character from URL

int x = 0;         // Current x location

int textx;

// PFont f;           // Variable to hold onto a font

float theta;  

float delay = 20.0;

float mx;

PImage cam2;

int timer = 0;


void setup() {
  



  size(600,225);
  


  
  smooth();

   
   
   
  
     cam2  = loadImage("http://ftp.bote.taipei.gov.tw/liveimg/livecam27.jpg");
   data = loadStrings("http://cats.gcc.ntu.edu.tw/HUNTER/today013.dat");  // load URL as an array of Strings
     urlSource = join(data," ");                           // join array together as one long String
    vals = split(urlSource); 
  

 
  
 // f = loadFont("GillSans-12.vlw");                      // load Font
 

}

void draw() {

 if(timer < 1000){
  timer ++;

} else {

  
  cam2  = loadImage("http://ftp.bote.taipei.gov.tw/liveimg/livecam27.jpg");

   
    if(cam2 != null){
   image(cam2,0,0, 300, 225);
}


     data = loadStrings("http://cats.gcc.ntu.edu.tw/HUNTER/today013.dat");  // load URL as an array of Strings
     urlSource = join(data," ");                           // join array together as one long String
    vals = split(urlSource); 
    
   
    
  
  timer = 0;
}

  if(cam2 != null){
   image(cam2,0,0, 300, 225);
 } 


  fill(255, 255, 200, 10);  // change these variables - rgb and opacity
  noStroke();
  rect(0, 0, width, height);
 

  frameRate(60);
  
    
   // Grab one character from html source
 
    String c = vals[count];
  
 
 

     
count = (count + 1) % vals.length;
  
  // Display character
  //  textFont(f);
//  fill(255);
//  text(urlSource,textx,height/10);
// textx -= 5;

 
float d = float(c);
 
  if(d > 0 && d <= 1.5) {  //co values
   d = 25/d;

  float dx = d - mx;
     stroke(70, 100 + dx, 50);
  if(abs(dx) > 1) {
   mx = mx + dx/delay;
    

  
   // Let's pick an angle 0 to 90 degrees based on the value
  float a = (d / (float) width) * 45f;
  // Convert it to radians
  theta = radians(a);
  // Start the tree from the bottom of the screen
  translate(width - width/4,height);
float r = random(-2, 2);
        // Draw a line
  line(0,0,  r,-mx);
  // Move to the end of that line
  translate(r,-mx);
  // Start the recursive branching!
  branch(mx); 
  }
  }
  else{
    d = random(2, 10);
    stroke(70, 100 + d, 50);
      // Let's pick an angle 0 to 90 degrees based on the value
  float a = (d / (float) width) * 45f;
  // Convert it to radians
  theta = radians(a);
  // Start the tree from the bottom of the screen
  translate(width - width/4,height);
float r = random(-6, 6);
        // Draw a line
  line(0,0,  r,-d);
  // Move to the end of that line
  translate(r,-d);
  // Start the recursive branching!
    branch(d);
  }

  
}
  


void branch(float h) {
  // Each branch will be 2/3rds the size of the previous one
  h *= 0.7f;
  float r = random(0, 1.0);
  float r2 = random(0, 1.5);

  
  // All recursive functions must have an exit condition!!!!
  // Here, ours is when the length of the branch is 2 pixels or less
  if (h > 3) {

    pushMatrix();    // Save the current state of transformation (i.e. where are we now)
    
  
    rotate(theta + r2);   // Rotate by theta
    line(0,0,0,-h);  // Draw the branch
    translate(0,-h); // Move to the end of the branch
    branch(h);       // Ok, now call myself to draw two new branches!!
    popMatrix();     // Whenever we get back here, we "pop" in order to restore the previous matrix state
    
    // Repeat the same thing, only branch off to the "left" this time!
    pushMatrix();
    rotate(-theta - r);
    line(0,0,0,-h);
    translate(0,-h);
    branch(h);
    popMatrix();
  }
}