Skip to content

test

April 5, 2015

x-frequency:

y-frequency:

adjust phase:

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(“#lissijous”)
.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”, “red”)
.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);

Advertisements

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: