Skip to content

Instantly share code, notes, and snippets.

@mtodd

mtodd/_.md

Created April 19, 2013 00:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mtodd/5417194 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mtodd/5417194 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mtodd revised this gist Apr 19, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    [ <a href="http://tributary.io/inlet/5417194">Launch: sin waves</a> ] 5417194 by mtodd<br>
  2. mtodd created this gist Apr 19, 2013.
    1 change: 1 addition & 0 deletions config.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"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}
    146 changes: 146 additions & 0 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,146 @@

    //Try changing all these parameters
    //Layout properties
    var n = 43;
    var m = 143;
    trib.spacing = 20.769230769230802;
    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 = 102;
    trib.theta = 5;
    trib.omega = 0.085494528;
    trib.phase = 0.4;


    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);