Skip to content

Instantly share code, notes, and snippets.

@eidmanna

eidmanna/Readme.md

Last active December 12, 2015 18:54
Show Gist options
  • Save eidmanna/3d73c43f57f8ad9b12d4 to your computer and use it in GitHub Desktop.
Save eidmanna/3d73c43f57f8ad9b12d4 to your computer and use it in GitHub Desktop.
Download ZIP
Parametric oscillator
Raw
Readme.md

Parametric oscillator

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Parametric oscillator</title>
<script src="//d3js.org/d3.v3.min.js"></script>
</script>
<style>
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis .y.axis path {
display: none;
}
</style>
</head>
<body>
<svg>
</svg>
<script src="pendel1.js" charset="utf-8" >
</script>
</body>
</html>
Raw
pendel1.js
(function() {
// initial parameter
var timeFactor = 1000;
var v0 = 0.3;
var w0 = 0;
var alfa = 0.9;
var beta = 2.0;
var domainMin = -2
var domainMax = 2;
var range = 500;
var margin = {
top: 30,
right: 30,
bottom: 30,
left: 30
};
var width = range - margin.left - margin.right;
var height = range - margin.top - margin.bottom;
var alfa1 = alfa / (beta * beta);
var t0 = Date.now() / timeFactor;
// grafic stuff
var svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var circle0 = svg.append("circle").attr("r", 5);
var circle1 = svg.append("circle").attr("r", 5);
var line = svg.append("line").attr("stroke-width", 2)
.attr("stroke", "black");
// scale function
var scale = d3.scale.linear()
.domain([domainMin, domainMax])
.range([0, height]);
// axis
axis(svg, scale, width, height);
// main loop
d3.timer(function() {
var t = Date.now() / timeFactor;
var dt = (t - t0);
// check timer idle
if (dt > 0.5) {
t0 = t;
return;
}
var v = v0 - (alfa * Math.cos(beta * t) + 1.0) * Math.sin(w0) * dt;
var w = w0 + v0 * dt;
var x = Math.sin(w);
var ya = alfa1 * Math.cos(beta * t);
var y = Math.cos(w) + ya;
var xa = 0.0;
// store for next loop
v0 = v;
w0 = w;
t0 = t;
// shift and zoom
xa = scale(xa);
ya = scale(ya);
x = scale(x);
y = scale(y);
// grafic stuff
// set x and y
line.attr("x1", xa).attr("y1", ya).attr("x2", x).attr("y2", y);
circle0.attr("cx", x).attr("cy", y);
circle1.attr("cx", xa).attr("cy", ya);
}
);
function axis(svg, scale, width, height) {
// axis
var xAxis = d3.svg.axis()
.scale(scale)
.orient("top");
var yAxis = d3.svg.axis()
.scale(scale)
.orient("left");
var x1Axis = d3.svg.axis()
.scale(scale)
.orient("bottom");
var y1Axis = d3.svg.axis()
.scale(scale)
.orient("right");
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.call(x1Axis)
.attr("transform", "translate(0," + height +")");
svg.append("g")
.attr("class", "y axis")
.call(y1Axis)
.attr("transform", "translate("+width+",0)");
}
}
)();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment