sin waves

_.md

[ Launch: sin waves ] 2aa3a305354ddbfdb4bf by DeBraid

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"description":"sin waves","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/SKuNVhI.png","ajax-caching":true}

inlet.js

//Layout properties
var n = 30;
var m = 10;

trib.spacing = 0.84;
trib.opacity = 0.7;
trib.stroke_width = 6;

//Sin wave function
//y = amplitude * sin( omega * theta + phase)
trib.amplitude = 139;
trib.theta = 1.44;
trib.omega = 0.5;
trib.phase = 0.5;

var colors = [ '#381700' , '#1a3e50' , '#008e00' , '#8e0000' ];

//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(['#629300', '#752b14'])
  
*/  
var color = color_scale;

var sw = tributary.sw * 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([-2, 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", "#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, 10+sh/1.76 + th / -2.4 - 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);