just another inlet to tributary

inlet.js

//rectangle area parameters

var xT = 20;
var yT = 20;
var W = 500;
var H = 500;

//graphic parameters

var backgroundColor = "#F1F1F1";

//logistic map parameters

var r = 4;
var x0 = 0.15339;


tributary.init = function(ctx) {
};

tributary.run = function(ctx,t) {
  tributary.clear(); //helper function to clear the canvas 
  
  this.axisAndBackground(ctx);
  this.drawLogistic(ctx);
  this.drawIterations(ctx);
};

//math

tributary.logisticMap = function(x){
  return x*r*(1-x);
}

//drawing functions

tributary.drawIterations = function(ctx){
  var xN = x0;
  var xN1;
  
  ctx.strokeStyle = "#FF0000";
  ctx.beginPath();
  
  this.moveToT(ctx, xN, 0);
 	
  for(var i=0;i<100;i++){
    xN1 = this.logisticMap(xN);
    
    this.lineToT(ctx, xN, xN1);
    this.lineToT(ctx, xN1, xN1);
    
    xN = xN1;
  }
  
  ctx.stroke();
}

tributary.drawLogistic = function(ctx){
  ctx.strokeStyle = '#000000';
  ctx.beginPath();
  
  this.moveToT(ctx, 0, this.logisticMap(0));
  for(var x=0;x<=1;x+=0.01){
    	this.lineToT(ctx, x, this.logisticMap(x));
  }
  
  ctx.stroke();
}


tributary.axisAndBackground = function(ctx){
  	//background
  	ctx.fillStyle = backgroundColor;
  	this.drawRectT(ctx, 0, 0, 1, 1);
  	//axis
  	ctx.strokeStyle = '#000000';
  	ctx.beginPath();
  	this.moveToT(ctx, 0,1);
  	this.lineToT(ctx, 0,0);
  	this.lineToT(ctx, 1,0);
  	ctx.stroke();
  	//diagonal
  	ctx.strokeStyle = '#AAAAAA';
  	ctx.beginPath();
  	this.moveToT(ctx, 0,0);
  	this.lineToT(ctx, 1,1);
  	ctx.stroke();
}



//drawing primitves

tributary.drawRectT = function(ctx, x, y, w, h){
  ctx.fillRect(x*W+xT, y*H+yT, w*W, h*H);
}
tributary.lineT = function(ctx, x0, y0, x1, y1){
  ctx.beginPath();
  this.moveToT(x0, y0);
  this.lineToT(x1, y1);
  ctx.stroke();
}
tributary.moveToT = function(ctx, x, y){
  ctx.moveTo(x*W+xT, (1-y)*H+yT);
}
tributary.lineToT = function(ctx, x, y){
  ctx.lineTo(x*W+xT, (1-y)*H+yT);
}