Polar Coordinates.

Radians
- We have seen these as early as csci 130
- But a quick review might be in order.
- We can measure angles in degrees.
  - Values between 0° and 360°
  - This is the angle between the x axis and a line.
  - Rember the y axis is upside down.
- This is not as useful as radians
  - Values between 0 and 2π
- Conversion is simple
  - Remember $360°= 2π$ radians
  - So just divide.
  - $ degrees * π/180 $ converts to radians
  - $ radians * 180/π $ converts to degrees
- All trig functions take radians.
Where cartesian coordinates are two distances (x,y), polar coordinates are a distance (r) and an angle (θ).
Polar coordinates are frequently useful when you are dealing with angles, or circular motion.

x:
0

y:
0

r:
0

θ:
0

Enter R and θ, θ should be in degrees.
R θ
Conversion between polar and cartesian coordinates
- $ x = r \times cos(θ);$
- $ y = r \times sin(θ);$
Discussion of code:
- I moved my functions to two files
  - polarFuncs.js
  - interface.js
- These need to be included before the buttons are declared, as the buttons need to use functions from interface.js
- I included them in the header section.
We will explore input in HTML slowly, but I needed two things
- A text input area
  - HTML code (not in < script> tags)
  - ```
  Enter R and &theta;, &theta; should be in degrees.
  R <input type="text" id="demo1rForm">
  &theta; <input type="text" id="demo1thetaForm"> 
```
- I wrote a reset function to clear everything, including setting these values to be 0.
- ```
function Reset() {
   document.getElementById("demo1rForm").value = 0;
   document.getElementById("demo1thetaForm").value = 0;

   Clear("circles");
   PolarAxis("circles");
   UpdateTable(0, 0);

   return;
} 
```
    - This is part of interface since it is tied to the form.
    - We will discuss Clear and PolarAxis later.
    - Importantly, this is called as part of the "main" javascrip function
    - So the input areas will have the proper intial value.
  - Later I will get the values from these
  - ```
  function PlotPolarPoint() {
     let r = document.getElementById("demo1rForm").value;
     let theta = document.getElementById("demo1thetaForm").value;
  
     PlotPoint("circles", r, theta);
     UpdateTable(r,theta);
  
     return;
  } 
```
  - I rely on the fact that javascript will cast strings to number
  - Perhaps we should validate the input, but I don't
  - We will discuss PlotPoint and UpdateTable later.
- Som buttons
  - I don't want to take an action until the user is ready so I provded a Plot button
  - It is always nice to clear so you can start over, so I provided a clear button as well
  - ```
  <p>
  <button type="button" onclick="PlotPolarPoint()"> Plot</button>
  <button type="button" onclick="Reset()"> Clear  </button>
```
- This code immediately follows the text input code.
- Notice it has a onclick field
  - This is the javascript function that is called when the button is pressed
  - Notice Clear calls Reset()
    - We saw this above.
    - It resets the value in the input boxes
    - It clears the canvas
    - It redraws the axis
    - It resets the table.
  - The Plot button calls PlotPolarPoint()
    - function PlotPolarPoint() { let r = document.getElementById("demo1rForm").value; let theta = document.getElementById("demo1thetaForm").value; PlotPoint("circles", r, theta); UpdateTable(r,theta); return; }
    - This gets the r and θ values from the form
    - Plots the point
    - And updates the table.

The last function in the interface

The canvas has a table next to it that displays the values of the last point plotted in both cartesian and polar coordinates.
This probably should be cleaned up, but that is just interface.

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;
}

Math.round is used.
Nothing else is particulary tricky.

The PolarCoordinate functions

These are dealing with drawing and polar coordinates so they are in their own file.

function Clear(canvasName) {
    let canvas = document.getElementById(canvasName);
    let ctx = canvas.getContext('2d');

    ctx.clearRect(0,0,canvas.width, canvas.height);

    return;
}

Grab the canvas and clear the entire thing.
ctx.clearRect() is probably the only new thing here.
This way I can clear the canvas.

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;
}

Convert theta to radians
- let t2 = theta * Math.PI/180.0;
let rstep = Math.min(canvas.width, canvas.height)/20;
- The minimum keeps everything square
- Each ring has a radius of 1/20 of the min
  - I want 10 rings, and we need to have room to draw the ufll ring. (diameter vs radius)
Convert r to the correct scale
- let r2 = r * rstep;
Calculate x and y, the point to plot.
- This is just the center + the conversion to carteasian
- But remember, y is upside down, so subtract it from the center.
- ```
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) 
```

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;
}

Nothing really major here.
Find the center of the canvas.
Find the "unit size" as above (rstep)
Draw circles
Draw the rays