lox

_.md

[ Launch: unit waves ] 8176249 by dvdrtrgn
[ Launch: unit circle ] 6723241 by enjalot
[ Launch: unit circle ] 6723094 by enjalot
[ Launch: unit circle ] 6722845 by enjalot
[ Launch: unit circle ] 5211082 by ptvans
[ Launch: unit circle ] 5210686 by enjalot

config.json

{"description":"lox","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"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/gAzJtlR.gif","controls":{"Amplitude Top":50,"Frequency Top":2,"Function":"sin","Phase":1},"ajax-caching":true}

inlet.js

/*jslint es5:true, white:false */
/*globals d3, tributary */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
(function () {
    //Trigonmetry
    //sin = a * Math.sin( t * freq )
    //cos = a * Math.cos( t * freq )
    tributary.duration = 5000;

    var svg = d3.select('svg');
    svg.append('rect').attr({
        width: '100%',
        height: '100%',
        fill: '#1C6481'
    });

    var cx = tributary.sw / 2;
    var cy = tributary.sh + 200;
    var linewidth = tributary.sh + 300;

    var samples = 150;

    var xoffset = 0;
    var yoffset = 0;

    var lineAttr = {
        fill: 'none',
        stroke: '#FFFFFF',
        'stroke-width': 3,
        'stroke-opacity': 1 / 4,
        'stroke-linecap': 'round'
    };

    var amplitude = tributary.control({
        name: 'Amplitude Top',
        min: 10,
        max: 100,
        step: 1,
    });
    var frequency = Math.round(tributary.control({
        name: 'Frequency Top',
        min: 1,
        max: 3,
        step: 1,
    }));
    var fnTop = tributary.control({
        name: 'Function',
        options: ['sin', 'cos', 'tan']
    });
    var phase = tributary.control({
        name: 'Phase',
        min: 0,
        max: 2,
    });
    var fns = {
        'sin': Math.sin,
        'cos': Math.cos,
        'tan': Math.tan,
    };

    var trigFns = ['sin', 'cos', 'tan'];

    var linescale = d3.scale.linear().domain([0, samples]).range([0, linewidth]);

    // build a trig function from an object
    function trig(eqn) {
        var fn = function (t) {
            return eqn.offset + eqn.a * eqn.fn(t * eqn.freq + eqn.phase);
        };
        return fn;
    }

    function sample(y, opts) {
        if (!opts) {
            opts = {};
        }
        var start = opts.start || 0;
        var end = opts.end || 1;
        var n = opts.n || 50;
        var step = (end - start) / n;
        var data = d3.range(n);
        return data.map(function (i) {
            return y(start + i * step);
        });
    }

    function xSample(fn, t) {
        return sample(trig(fn), {
            start: t + 2 * Math.PI,
            end: t,
            n: samples,
        }).map(function (d, i) {
            return {
                x: d + cx,
                y: - linescale(i) + cy + yoffset - fn.a,
            };
        });
    }

    function ySample(fn, t) {
        return sample(trig(fn), {
            start: t + 2 * Math.PI,
            end: t,
            n: samples,
        }).map(function (d, i) {
            return {
                x: linescale(i),
                //+ cx + xoffset + fn.a,
                y: d + cy / 2,
            };
        });
    }

    //opts = {
    // start: x0, start of x domain
    // end: x1, start of y domain
    // n: number of samples
    //}
    // generate line fn

    function lineFn() {
        var line = d3.svg.line().x(function (d, i) {
            return d.x;
        }).y(function (d, i) {
            return d.y;
        }).interpolate('linear-closed');
        return line;
    }

    var waves = d3.range(20).map(function (i) {
        return {
            a: amplitude + (10 * i) / 10,
            fn: fns[fnTop],
            freq: frequency,
            phase: Math.PI * phase,
            offset: - 300 + i * 30,
        };
    });
    tributary.duration = 10000;

    var waveline = d3.svg.line().x(function (d) {
        return d.x;
    }).y(function (d) {
        return d.y;
    });

    var lines = svg.append('g').selectAll('path.trippy').data(waves);
    lines.enter().append('path').classed('trippy', true);

    var theta = tributary.anim(1, 2 * Math.PI);

    lines.attr('d', function (d, i) {
        return waveline(xSample(d, theta + i * Math.PI * 0.03));
    }).style(lineAttr);

}());
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

style.css

path.line {
  fill: none;
}