Lissijous Curves

by dchudz

HTML

<script src="http://d3js.org/d3.v2.js"></script>
  x-frequency:
<input id="xFrequency" type="number" name="quantity" min=".1" max="10" step=.1 value="1">y-frequency:
<input id="yFrequency" type="number" name="quantity" min=".1" max="10" step=.1 value="2">adjust phase:
<input id="phaseDifference" type="number" name="quantity" min="-100" max="100" step=.1 value="0">

CSS

.chart {
          font-family: Arial, sans-serif;
          font-size: 10px;
      }
      .axis path, .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
      }
      .bar {
          fill: steelblue;
      }

JavaScript

var lineFunction = d3.svg.line()
    .x(function (d) {
    return x(d.x);
})
    .y(function (d) {
    return y(d.y);
})
    .interpolate("linear");

var width = 600;
var height = 600;

var x = d3.scale.linear()
    .domain([-1, 1])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([-1, 1])
    .range([height, 0]);

var t = 0;
var point = {
    x: 0,
    y: 0
};

//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var epsilon = 0.1;

function drawNewPoint(tx, ty, point) {
    oldpoint = {
        x: point.x,
        y: point.y
    }; // need copy of old point for drawing line
    var xfreq = 1 * $("#xFrequency").val();
    var yfreq = 1 * $("#yFrequency").val();
    point.x = Math.sin(tx);
    point.y = Math.sin(ty + yfreq * $("#phaseDifference").val());

    setTimeout(function () {
        drawNewPoint(tx += epsilon * xfreq, ty += epsilon * yfreq, point);
    }, 0.1);

    svg.append("path")
        .attr("d", lineFunction([oldpoint, point]))

    .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none")
        .transition().duration(8000).style("opacity", 0).remove();

    svg.append("circle")
        .attr("cx", x(point.x))
        .attr("cy", y(point.y))
        .attr("r", 2)
        .transition().duration(8000).style("opacity", 0).remove();



}

drawNewPoint(0, 0, point);