float initx = 0.1, x; 
float r = 0;
int time = 100;
 
float[] graphData = new float[time];
 
//we want a line from the first to the second point, second the third point etc
//so we need to remember the position of the last point
//Here's our vars for that
float gx,gy,lastx,lasty;
 
void setup() {
 
  size(800,500, P3D);
  noFill();
  stroke(255);
 
}
 
 
 
void draw() {
 
  if (r >=0 && r<=1) {
 
    fill(0,40);
    rect(0,0,width, height);
    //background(0);
 
    //add the new x to the array we're using to draw - we already have the first value from setup
    //give it 5 values for x
    //graphData =  getData();
    setData();  
 
    //Draw the next map based on our point in time
    for (int n = 0; n < time; n++) {
 
      lastx = gx; 
      lasty = gy;
 
      gx = float(n)*(width/float(time));
      //height - : so that 0 appears at the bottom of the graph
      gy = height- (graphData[n]*height);
 
      stroke(255);
      ellipse(gx, gy, 5,5);
      //if n > 0, draw lines between this point and the last one
 
      if (n > 0) {
 
        stroke(100);
        line(lastx, lasty, gx, gy);
 
      }
 
 
 
    }// end for n loop
 
  }//end if...
 
 
}
 
void setData() {
 
  x = initx;
 
  //set the first value of the graph...
  graphData[0] = initx;
 
  for (int t = 1; t < time; t++) {
 
    //update x
    x = 4 * r * x * (1 - x); 
 
    //stick into array
    graphData[t] = x;
 
  }//end for loop
 
  //if (initx > 1) {
 
  //initx = 0.6;
  r = r + 0.0003;
  println(r);
 
  //} else initx = initx + 0.125;
 
}