mojowen · August 29, 2015 14:04
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">

 body {
  background: #333;
 }

 rect {
  stroke-width: 2.5px;
 }

 /*
 .square:nth-child(2n + 1) rect {
 }
 */

    </style>
  </head>
  <body>
      <svg></svg>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script>
    <script type="text/javascript">

 var w = 960,
    h = 500,
    start = Date.now();

 var rings = [ ];
 var lines = [ ];

 var n = 25;
 var m = 70;

 for (i in d3.range(n))
 {
    if(i < 3)
        var speed = (i-3) * 1e-2;
    else
        var speed = (i-2) * 1e-2;
    //var speed = 50e-2 / (i + 1)
    //var speed = .001 *  n / (.5*i+1)
    var speed = .001 * i * 4;

    var data = d3.range(m) 
    lines.push({ 
        //radius: 65*i, 
        width: 5, 
        height: 15,
        speed: speed,
        //speed: speed_scale(i),
        index: i,
        data: data
    })

 }

 var xscale = d3.scale.linear()
    .domain([0,m])
    .range([0, w])

 var omega = -.22
 function line_maker( data, speed )
 {
    var freq = Math.PI*.4 + 3 * omega * data.index // * 3000
    var svgline = d3.svg.line()
    .x(function(d,i)
    {
        return xscale(d);
    })
    .y(function(d,i)
    {
        var theta = freq * d/m * Math.PI * 4 
        //console.log("sin", Math.sin(theta), d)
        var y = data.height * (Math.sin(theta + (n-data.index) * .1 * speed * .18 ));
        //console.log ("y", y)
        return y
    })
    .interpolate("basis")
    return svgline(data.data);
 }

 var spacing = 26;
 function lineEnter(d, i) {

    //console.log("line enter", d)
  d3.select(this).selectAll("path.path")
      .data([d])
      .enter()
    .append("svg:path")
      .attr("class", "path")
      //.attr("transform", function(_, i) { return "translate(" + [0, h - spacing * d.index] + ")"; })
    .attr("d", function(d,i) {
              return line_maker( d, 0 ) 
            }
        )
      .attr("stroke-width", function(e,i) { return e.width;})
      .attr("stroke", "#fff")
      .attr("fill", "none")

    update_spacing()
 }

 var svg = d3.select("svg")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    //.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.6)");

 var line = svg.selectAll("g.line")
    .data(lines)
  .enter().append("svg:g")
    .attr("class", "line")
    .each(lineEnter);


 var pause = false;
 var sm = .39 
 function update_spacing()
 {
    var th = spacing * n;
    var hscale = d3.scale.linear()
        .domain([0, n])
        .range([0, h])

    //console.log("th", th, hscale(99))
    console.log("spacing", spacing)
    d3.selectAll("g.line path")
        .attr("transform", function(d, i) { 
            //console.log("h",h, spacing, d.index);
            //return "translate(" + [0, th - spacing * d.index] + ")"; 
            return "translate(" + [0, h/2 + th / 2 - spacing * d.index] + ")"; 
        })
 }


 var color = d3.scale.linear()
    .domain([-1, 1])
    .interpolate(d3.interpolateRgb)
    .range(['#fff', '#000'])

 var opacity = d3.scale.linear()
    .domain([0, n])
    .range([1, .4])


 b = 1;

 d3.timer(function() {
  if( pause ) return false;
  var elapsed = Date.now() - start
  var damp = .3

  rotate = function(d,i) { 
  var speed = sm * d.speed * elapsed * .1
    return "rotate(" + speed + ")"; 
  };

  line = d3.selectAll("g.line path")
      .attr("d", function(d,i) {
             //var speed = a * d.speed * elapsed + .01 * d.index
             var speed = sm * .08 * elapsed + d.index * 4 
             return line_maker( d, speed ) 
        })
      .attr("stroke-opacity", function(d,i) { return opacity(d.index);})
        

 });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">

	body {
	background: #333;
	}

	rect {
	stroke-width: 2.5px;
	}

	/*
	.square:nth-child(2n + 1) rect {
	}
	*/

	</style>
	</head>
	<body>
	<svg></svg>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script>
	<script type="text/javascript">

	var w = 960,
	h = 500,
	start = Date.now();

	var rings = [ ];
	var lines = [ ];

	var n = 25;
	var m = 70;

	for (i in d3.range(n))
	{
	if(i < 3)
	var speed = (i-3) * 1e-2;
	else
	var speed = (i-2) * 1e-2;
	//var speed = 50e-2 / (i + 1)
	//var speed = .001 * n / (.5*i+1)
	var speed = .001 * i * 4;

	var data = d3.range(m)
	lines.push({
	//radius: 65*i,
	width: 5,
	height: 15,
	speed: speed,
	//speed: speed_scale(i),
	index: i,
	data: data
	})

	}

	var xscale = d3.scale.linear()
	.domain([0,m])
	.range([0, w])

	var omega = -.22
	function line_maker( data, speed )
	{
	var freq = Math.PI.4 + 3 omega * data.index // * 3000
	var svgline = d3.svg.line()
	.x(function(d,i)
	{
	return xscale(d);
	})
	.y(function(d,i)
	{
	var theta = freq * d/m * Math.PI * 4
	//console.log("sin", Math.sin(theta), d)
	var y = data.height * (Math.sin(theta + (n-data.index) * .1 * speed * .18 ));
	//console.log ("y", y)
	return y
	})
	.interpolate("basis")
	return svgline(data.data);
	}

	var spacing = 26;
	function lineEnter(d, i) {

	//console.log("line enter", d)
	d3.select(this).selectAll("path.path")
	.data([d])
	.enter()
	.append("svg:path")
	.attr("class", "path")
	//.attr("transform", function(_, i) { return "translate(" + [0, h - spacing * d.index] + ")"; })
	.attr("d", function(d,i) {
	return line_maker( d, 0 )
	}
	)
	.attr("stroke-width", function(e,i) { return e.width;})
	.attr("stroke", "#fff")
	.attr("fill", "none")

	update_spacing()
	}

	var svg = d3.select("svg")
	.attr("width", w)
	.attr("height", h)
	.append("svg:g")
	//.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.6)");

	var line = svg.selectAll("g.line")
	.data(lines)
	.enter().append("svg:g")
	.attr("class", "line")
	.each(lineEnter);


	var pause = false;
	var sm = .39
	function update_spacing()
	{
	var th = spacing * n;
	var hscale = d3.scale.linear()
	.domain([0, n])
	.range([0, h])

	//console.log("th", th, hscale(99))
	console.log("spacing", spacing)
	d3.selectAll("g.line path")
	.attr("transform", function(d, i) {
	//console.log("h",h, spacing, d.index);
	//return "translate(" + [0, th - spacing * d.index] + ")";
	return "translate(" + [0, h/2 + th / 2 - spacing * d.index] + ")";
	})
	}


	var color = d3.scale.linear()
	.domain([-1, 1])
	.interpolate(d3.interpolateRgb)
	.range(['#fff', '#000'])

	var opacity = d3.scale.linear()
	.domain([0, n])
	.range([1, .4])


	b = 1;

	d3.timer(function() {
	if( pause ) return false;
	var elapsed = Date.now() - start
	var damp = .3

	rotate = function(d,i) {
	var speed = sm * d.speed * elapsed * .1
	return "rotate(" + speed + ")";
	};

	line = d3.selectAll("g.line path")
	.attr("d", function(d,i) {
	//var speed = a * d.speed * elapsed + .01 * d.index
	var speed = sm * .08 * elapsed + d.index * 4
	return line_maker( d, speed )
	})
	.attr("stroke-opacity", function(d,i) { return opacity(d.index);})


	});
	</script>
	</body>
	</html>