Find file
Fetching contributors…
Cannot retrieve contributors at this time
268 lines (215 sloc) 5.74 KB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Claire-Euler "Coiler"</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
var TF = 10,
dt = 1 / Math.pow(10, 3),
T = [],
i = -TF,
velocity = 1,
theta = [0],
delta_t,
x1 = [0],
x2 = [0],
clxpo,
cloff,
hideAxes = true;
function RenderClaire() {
T = [];
i = -TF;
theta = [0];
x1 = [0];
x2 = [0];
while (i <= TF * 2) {
T.push(i);
i += dt;
}
for (i = 1, l = T.length; i < l; i++) {
theta[i] = theta[i - 1] - Math.PI / (cloff * Math.pow(T[i], clxpo) + Math.pow(10,-12));
}
for (i = 1, l = T.length; i < l; i++) {
delta_t = T[i] - T[i - 1];
x1[i] = x1[i - 1] + velocity * delta_t * Math.cos(theta[i - 1]);
x2[i] = x2[i - 1] + velocity * delta_t * Math.sin(theta[i - 1]);
}
var first = true,
x,
y;
Ctx.beginPath();
for (i = 0, l = T.length; i < l; i++) {
x = XC(x1[i]);
y = YC(x2[i]);
if (first) {
Ctx.moveTo(x, y);
first = false;
} else {
Ctx.lineTo(x, y);
}
//console.log(i, x, y);
}
Ctx.stroke();
}
/* Initialization */
// To be called when the page finishes loading:
window.init = function () {
var variables = [
'minX',
'maxX',
'minY',
'maxY',
'TF',
'dt',
'clxpo',
'cloff'
];
for (i = 0, l = variables.length; i < l; i++) {
window[variables[i]] = eval( $('input[name="' + variables[i] + '"]').val() );
}
Draw();
}
/* Canvas and context objects */
var Canvas,
Ctx,
Width,
Height;
/*
The origin (0,0) of the canvas is the upper left:
(0,0)
--------- +X
|
|
|
|
+Y
Positive x coordinates go to the right, and positive y coordinates go down.
The origin in mathematics is the "center," and positive y goes *up*.
We'll refer to the mathematics coordinate system as the "logical"
coordinate system, and the coordinate system for the canvas as the
"physical" coordinate system.
The functions just below set up a mapping between the two coordinate
systems.
They're defined as functions, so that one wanted to, they could read
ther values from a from instead of having them hard-coded.
*/
var maxX; // right boundary of the logical viewport
var minX; // left boundary of the logical viewport
var maxY; // top boundary of the logical viewport
var minY; // bottom boundary of the logical viewport
// Returns the physical x-coordinate of a logical x-coordinate:
function XC(x) {
return (x - minX) / (maxX - minX) * Width;
}
// Returns the physical y-coordinate of a logical y-coordinate:
function YC(y) {
return Height - (y - minY) / (maxY - minY) * Height;
}
/* Rendering functions */
// Clears the canvas, draws the axes and graphs the function F.
function Draw() {
if (Canvas.getContext) {
// Set up the canvas:
Ctx = Canvas.getContext('2d');
//Ctx.clearRect(0, 0, Width, Height);
// Draw:
DrawAxes();
RenderClaire();
} else {
// Do nothing.
console.log('Do nothing.');
}
}
// Returns the distance between ticks on the X axis:
function XTickDelta() {
return 1;
}
// Returns the distance between ticks on the Y axis:
function YTickDelta() {
return 1;
}
// DrawAxes draws the X ad Y axes, with tick marks.
function DrawAxes() {
if (window.hideAxes === true) return;
Ctx.save();
Ctx.lineWidth = 2;
// +Y axis
Ctx.beginPath();
Ctx.moveTo(XC(0),YC(0));
Ctx.lineTo(XC(0),YC(maxY));
Ctx.stroke();
// -Y axis
Ctx.beginPath();
Ctx.moveTo(XC(0),YC(0));
Ctx.lineTo(XC(0),YC(minY));
Ctx.stroke();
// Y axis tick marks
var delta = YTickDelta();
for (var i = 1; (i * delta) < maxY; ++i) {
Ctx.beginPath();
Ctx.moveTo(XC(0) - 5,YC(i * delta));
Ctx.lineTo(XC(0) + 5,YC(i * delta));
Ctx.stroke();
}
var delta = YTickDelta();
for (var i = 1; (i * delta) > minY; --i) {
Ctx.beginPath();
Ctx.moveTo(XC(0) - 5,YC(i * delta));
Ctx.lineTo(XC(0) + 5,YC(i * delta));
Ctx.stroke();
}
// +X axis
Ctx.beginPath();
Ctx.moveTo(XC(0),YC(0));
Ctx.lineTo(XC(maxX),YC(0));
Ctx.stroke();
// -X axis
Ctx.beginPath();
Ctx.moveTo(XC(0),YC(0));
Ctx.lineTo(XC(minX),YC(0));
Ctx.stroke();
// X tick marks
var delta = XTickDelta();
for (var i = 1; (i * delta) < maxX; ++i) {
Ctx.beginPath();
Ctx.moveTo(XC(i * delta),YC(0)-5);
Ctx.lineTo(XC(i * delta),YC(0)+5);
Ctx.stroke();
}
var delta = XTickDelta();
for (var i = 1; (i * delta) > minX; --i) {
Ctx.beginPath();
Ctx.moveTo(XC(i * delta),YC(0)-5);
Ctx.lineTo(XC(i * delta),YC(0)+5);
Ctx.stroke();
}
Ctx.restore();
}
// When rendering, XSTEP determines the horizontal distance between points:
var XSTEP = (maxX-minX)/Width;
$(document).ready(function(){
Canvas = document.getElementById('xy-graph');
Ctx = null;
Width = Canvas.width;
Height = Canvas.height;
init();
});
</script>
</head>
<body>
<form onsubmit="init(); return false;" style="position: absolute; right: 10px; top: 5px; opacity: 0.333;">
<label>minX</label> <input type="text" name="minX" value="-0.1">
<label>maxX</label> <input type="text" name="maxX" value="0.1">
<label>minY</label> <input type="text" name="minY" value="-0.15">
<label>maxY</label> <input type="text" name="maxY" value="0.05">
<label>TF:</label> <input type="text" name="TF" value="10">
<label>dt:</label> <input type="text" name="dt" value="1 / Math.pow(10, 3)">
<label>clxpo:</label> <input type="text" name="clxpo" value="1">
<label>cloff:</label> <input type="text" name="cloff" value="0.01"><br>
<input class="btn-primary" type="submit" value="Draw" style="float: right;">
</form>
<canvas id="xy-graph" width="1440" height="1440"></canvas>
</body>
</html>