Skip to content

Instantly share code, notes, and snippets.

@mojowen
Forked from enjalot/index.html
Last active August 29, 2015 14:04
Show Gist options
  • Save mojowen/353e2379d29a97a48143 to your computer and use it in GitHub Desktop.
Save mojowen/353e2379d29a97a48143 to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment