just another inlet to tributary

inlet.js

//laser math 
//http://spot.colorado.edu/~lessley/pdf%20stuff/lasermath2.pdf

//d3.select("#header").style("background-color","#000000")

 
var div = d3.select("#header").select('.check')
//console.log(div,div.length,div.node(),div.node() == null)
  
    if(div.node() == null){
      console.log('start')
      var dd = d3.select("#header").append('span')
      .attr('class','check')
      .style("background-color","#A82424")
      .style("width",573)
      .style("height",67)
       .style('position','absolute')
        .style("top",20)
  		.style("left",20)
    .style("z-index",2000)
                
	var svg2  = dd.append('svg')
    .style("width",72)
    .style("height",50)
    .style('fill','green')

    
        }else{

     var dd = d3.select(".check")
      .attr('class','check')
       .style("background-color","#A82424")
        .style("width",627)
       .style("height",67)
       .style('position','absolute')
        .style("top",20)
  		.style("left",20)
        .style("z-index",2000) 
          console.log('hello',dd.node()) 
            
	var svg2  = dd.select('svg')
    .style("width",72)
    .style("height",50)
    .style('fill','green')            
            
            
        }
    
  
var x0 = 616;
var y0 = 334;

var a = 1034;
var b = 760;
//var b = (n-1)/(n+10);

var hx = 0;
var hy = 17;

var fbase = 3.4656;
var omega0 = 80 * Math.PI * fbase;

var om = omega0 * 0.54536;

var trigf = 2.2 / 10;
var tempo = 0.84;
var radius = 6;
var erasing = 0.3;
var linen = 0;
var cs = d3.interpolateHsl("#EC3F3F", "#E9D70C");
var sopacity = 0.728;
var cf = d3.interpolateHsl("#BC00F8", "#ADFF00");
var fopacity = 0.7;


var nt = 1600;
var to = 10;

function x(t, o) {
  //return (a - b) * Math.cos(omega0*t) + h * Math.cos(omega0*t*(a/b-1));
  return (a - b) * Math.tan(trigf*o*t) + hx * Math.cos(o*t*(a-b)/b);
  //return h * Math.cos(t*Math.PI);
}
function y(t, o) {
  //return (a - b) * Math.sin(omega0*t) - h * Math.sin(omega0*t*(a/b-1));
  return (a - b) * Math.cos(o*t) - hy * Math.sin(o*t*(a-b)/b);
  //return h * Math.sin(t*Math.PI);
}

function circle(ctx, p) {
    //ctx.fillStyle = 'hsla(0,0%,' + 70 +'%,' + 1 + ')';
    ctx.beginPath();
    ctx.arc(p[0],p[1],radius,0,2*Math.PI);
    ctx.fill();
}
function line(ctx) {  
  ctx.beginPath();
  var i;
  for(i=0;i<linen;i++) {
      //ctx.strokeStyle = c(i/linen);
	  ctx.lineTo(x0 + x(i/linen, omega0), y0 + y(i/linen, omega0));
  }
  ctx.stroke();
  
}

tributary.init = function(ctx) {
  d3.select("#display").style("background-color", "#000000")
	ctx.globalCompositeOperation = 'source-over';
  
};
tributary.run = function(ctx,t) {
    //tributary.clear(); //helper function to clear the canvas 
    ctx.fillStyle = "rgba(9,9,9," + erasing +  ")";
    ctx.fillRect(0,0,tributary.sw,tributary.sh);
    var tt = (t % 10)/tempo;
    
    var p;
    


    ctx.strokeStyle = cs(tt);
	line(ctx);
    
  	p = [x0 + x(tt, om), y0 + y(tt, om)]; 
    ctx.fillStyle = cf(tt);
  	circle(ctx, p);
  
  	
  	var i = 0;
    for(i = 0; i < nt; i++) {
      //p = [x0 + x(tt+i*tt/2, om), y0 + y(tt+i*tt/2, om)]; 
      p = [x0 + x(tt+i*to, om), y0 + y(tt+i*to, om)]; 
      ctx.fillStyle = cf(tt);
  	  circle(ctx, p);
    }
    
  
};