<head>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"> </script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<link rel="stylesheet" href="http://mirkwood.cs.edinboro.edu/~bennett/style/hw.css">
<script src="code/polarFuncs.js"></script>
<script src="code/interface.js"></script>
</head>
<body>
<h1> Polar Coordinates.</h1>
<ul>
<table >
<tr><td rowspan = 4>
<canvas id="circles" width="400" height="400" style="border:1px solid #000000;"></canvas>
</td>
<td> <table > <tr><td>x:</td><td><div id="xvalue">0</div></table></td</tr>
<tr><td><table> <tr><td>y:</td><td><div id="yvalue">0</div></table></td</tr>
<tr><td><table> <tr><td>r:</td><td><div id="rvalue">0</div></table></td</tr>
<tr><td><table> <tr>θ:</td><td><div id="tvalue">0</div></table></td</tr>
</table>
<p>
Enter R and θ, θ should be in degrees.
<p>
R <input type="text" id="demo1rForm">
θ <input type="text" id="demo1thetaForm">
<p>
<button type="button" onclick="PlotPolarPoint()"> Plot</button>
<button type="button" onclick="Reset()"> Clear
<script>
Reset();
</script>
</body>
</html>
"use strict"
function Reset() {
document.getElementById("demo1rForm").value = 0;
document.getElementById("demo1thetaForm").value = 0;
Clear("circles")
PolarAxis("circles")
UpdateTable(0, 0);
}
function UpdateTable(r, theta) {
let x,y;
x = Math.round(r * Math.cos(theta*Math.PI/180.0));
y = Math.round(r * Math.sin(theta*Math.PI/180.0));
document.getElementById("xvalue").innerText = x;
document.getElementById("yvalue").innerText = y;
document.getElementById("rvalue").innerText = r;
document.getElementById("tvalue").innerText = theta;
return;
}
function PlotPolarPoint() {
let r = document.getElementById("demo1rForm").value;
let theta = document.getElementById("demo1thetaForm").value;
PlotPoint("circles", r, theta);
UpdateTable(r,theta);
return;
}
"use strict"
function Clear(canvasName) {
let canvas = document.getElementById(canvasName);
let ctx = canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width, canvas.height);
return;
}
function PlotPoint(canvasName, r, theta){
let canvas = document.getElementById(canvasName);
let ctx = canvas.getContext('2d');
let cx = canvas.width/2;
let cy = canvas.height/2;
let t2 = theta * Math.PI/180.0;
let rstep = Math.min(canvas.width, canvas.height)/20;
let r2 = r * rstep;
let x = cx + r2*Math.cos(t2);
// but the y axis of the canvas is upside down, so -r sin(theta)
let y = cy - r2*Math.sin(t2)
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(x,y,3,0, 2*Math.PI);
ctx.fill();
return;
}
function PolarAxis(canvasName){
let canvas = document.getElementById(canvasName);
let ctx = canvas.getContext('2d');
let size = Math.min(canvas.width, canvas.height)/2;
let rstep = size/10;
let cx = canvas.width/2;
let cy = canvas.height/2;
let theta;
let x,y;
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
// draw the circles
ctx.beginPath();
for(let i=0; i <= 10; i++) {
ctx.arc(cx, cy, i*rstep, 0, 2*Math.PI);
}
// draw the lines
for (let i=0; i<8;i++) {
ctx.moveTo(cx,cy);
theta = Math.PI/4 * i;
x = cx + size*Math.cos(theta);
y = cy + size*Math.sin(theta)
ctx.lineTo(x,y);
}
ctx.stroke();
return;
}
|