-
-
Save davo/4041328 to your computer and use it in GitHub Desktop.
Another Inlet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Try changing all these parameters | |
//Layout properties | |
var n = 35; | |
var m = 30; | |
trib.spacing = 19.69231; | |
trib.opacity = 0.8; trib_options.opacity = {"min":0, "max":1}; | |
trib.stroke_width = 10; | |
//Sin wave function | |
//y = amplitude * sin( omega * theta + phase) | |
trib.amplitude = 21; | |
trib.theta = 11; | |
trib.omega = 0.1; | |
trib.phase = 0.5; | |
var colors = [ | |
'#D40067' | |
, '#4DA9DF' | |
, '#00ff00' | |
, '#ff0000' | |
] | |
//interpolate over multiple colors | |
var color_scale = function(i) { | |
var num_interps = colors.length -1 | |
var ord = d3.scale.linear() | |
.domain([0, n]) | |
.range([0, num_interps]) | |
var section = parseInt(ord(i)) | |
//console.log("section", section) | |
var section_size = n / num_interps | |
//get the two colors we want to interpolate between | |
var col_range = [colors[section], colors[section+1]] | |
var col_scale = d3.scale.linear() | |
.domain([section * section_size, (section+1) * section_size]) | |
//.interpolate(d3.interpolateRgb) | |
.interpolate(d3.interpolateHsl) | |
.range(col_range) | |
return col_scale(i) | |
} | |
/* | |
var color = d3.scale.linear() | |
.domain([0, n]) | |
//.interpolate(d3.interpolateRgb) | |
.interpolate(d3.interpolateHsl) | |
.range(['#D40067', '#4DA9DF']) | |
*/ | |
var color = color_scale | |
var sw = tributary.sw * 1.1;//parseInt(d3.select("svg").style("width")) | |
//make the sin waves extend past the width a little | |
//sw += .1 * sw | |
var sh = tributary.sh;//parseInt(d3.select("svg").style("height")) | |
var lines = [ ]; | |
for (i in d3.range(n)) { | |
var data = d3.range(m) | |
lines.push({ | |
index: i, | |
data: data | |
}) | |
} | |
var xscale = d3.scale.linear() | |
.domain([0, m]) | |
.range([-.1*sw, sw]) | |
function line_maker( data ) { | |
var freq = trib.omega * data.index | |
var svgline = d3.svg.line() | |
.x(function(d,i) { | |
return xscale(d); | |
}) | |
.y(function(d,i) { | |
var th = d/m * trib.theta | |
var ph = (n-data.index) * trib.phase | |
var y = trib.amplitude * Math.sin(freq * th + ph ); | |
return y | |
}) | |
.interpolate("basis") | |
//.interpolate("linear") | |
return svgline(data.data); | |
} | |
function lineenter(d, i) { | |
d3.select(this).selectAll("path.path") | |
.data([d]) | |
.enter() | |
.append("svg:path") | |
.attr("class", "path") | |
.attr("stroke-width", trib.stroke_width) | |
//.attr("stroke-width", function(e,i) { return e.width;}) | |
.attr("stroke", "#fff") | |
.attr("fill", "none") | |
update_spacing() | |
} | |
function update_spacing() | |
{ | |
var th = trib.spacing * n; | |
var hscale = d3.scale.linear() | |
.domain([0, n]) | |
.range([0, sh]) | |
d3.selectAll("g.line path") | |
.attr("transform", function(d, i) { | |
//return "translate(" + [0, th - spacing * d.index] + ")"; | |
return "translate(" + [0, 10+sh/2 + th / 2 - trib.spacing * d.index] + ")"; | |
}) | |
} | |
var svg = d3.select("svg") | |
.append("svg:g") | |
var line = svg.selectAll("g.line") | |
.data(lines) | |
.enter().append("svg:g") | |
.attr("class", "line") | |
.each(lineenter); | |
/* | |
var opacity = d3.scale.linear() | |
.domain([0, n]) | |
.range([1, .4]) | |
*/ | |
d3.selectAll("g.line path") | |
.attr("d", function(d,i) { | |
return line_maker(d) | |
}) | |
.attr("stroke", function(d,i) { return color(d.index);}) | |
.attr("opacity", trib.opacity); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment