sine wave with controls

_.md

[ Launch: white seinfeld ] 6811566 by ptvans
[ Launch: white seinfeld ] 6811545 by ptvans
[ Launch: seinfeld ] 6799084 by ptvans
[ Launch: sin waves ] 6789968 by ptvans

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"description":"sine wave with controls","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},"style.css":{"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/UmzNwbl.png","controls":{"function":"sin","amplitude":70.65,"omega":10,"phase":0,"x":1}}

inlet.js

var trigfunc = tributary.control({name:"function", options: ["sin", "cos", "tan"]})

var sw = tributary.sw;
var sh = tributary.sh;
var n = 2;
var m = 100;
trib.spacing = 0;
trib.opacity = 1.0; trib_options.opacity = {"min":0, "max":1};
trib.stroke_width = 2;

//Sin wave function
//y = amplitude * sin( omega * theta + phase)
trib.amplitude = tributary.control({name:"amplitude", min: 1, max: 200});
trib.omega = tributary.control({name:"omega", min: 1, max: 10});
trib.theta = tributary.control({name:"x", min: 1, max: 10});
trib.phase = tributary.control({name:"phase", min: 0, max: 20});
 

var lines = [ ];
for (i in d3.range(n)) {
    var data = d3.range(m) 
    lines.push({ 
        index: i,
        data: data
    })
}



console.log(data);

var xscale = d3.scale.linear()
    .domain([0, m])
    .range([0, 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, sh/2 + th/2 ] + ")"; 
        })
}

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

  
d3.selectAll("g.line path") 
    .attr("d", function(d,i) {
        return line_maker(d) 
    })
    .attr("stroke", "grey")
    .attr("opacity", trib.opacity);

var equation = svg.append("g")
	.classed("message", true)
	.attr("transform", "translate("+ 39 +", "+ 79 +")");

equation.append("text")
	.text("y = amplitude * sin ( omega * x + phase)");

equation.append("text")
	.text("y = "+ trib.amplitude +" * sin ( "+ trib.omega +" * "+ trib.theta +" + "+ trib.phase +")")
	.attr("transform", "translate("+ 0 +", "+ 30 +")");

style.css

.message{
	font-size: 24px;
  	fill: grey;
}