Javascript  

  

 

 

 

 

Plot math expression in Polar coordinate

 

this code is created first by chatGPT on Jan 7 2023 (meaning using chatGPT 3.5) and then modified a little bit my me. The initial request that I put into chatGPT is as follows :

 

Write a javascript with the following requirement

1. create a table at the center of the page

2. the table has two rows and one column, make grid visible in thin line

3. put a textbox that can take in a math expression. the default value of the text box is '100*abs(cos(t))' and put a button with 'plot'

4. put a canvas that plot the data in polar coordinate in the lower row. Do not put any background in the canvas. the background should be all white.

5. make the edge of the canvas visible

6. plot axis lines at (0,0) in the plot in black

7. plot a grid lines in the plot in gray in polar coordinate.

8. javascript for the plot should be stored in a separate file

9. if you want to use style, create a separate css file.

10. Create an html file that combines all of these components

NOTE : It is not guaranteed that you would have the same code as I got since chatGPT produce the answers differently depending on the context. And it may produce the different answers everytime you ask even with the exact the same question.

NOTE : If you don't have any of your own idea for the request, copy my request and paste it into the chatGPT and put additional requests based on the output for the previous request. I would suggest to create a new thread in the chatGPT and put my request and then continue to add your own request.

 

 

 

PlotPolar.html

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style_plotpolar.css">

  <script src="plotPolar.js"></script>

</head>

<body>

  <center>

  <table align="center" cellspacing="0" cellpadding="0" border="1">

    <tr>

      <td>

        <input type="text" id="expression" value="100*abs(cos(t))">

        <button onclick="plot()">Plot</button>

      </td>

    </tr>

    <tr>

      <td>

        <canvas id="plot" width="400" height="400"></canvas>

      </td>

    </tr>

  </table>

  </center>

</body>

</html>

 

 

style_plotpolar.css

canvas {

  border: 1px solid black;

}

 

 

PlotPolar.js

// eval() function in java script does not recognize many math fuctions. so I redefine some of those math functions

// using Math object.

function sin(x) { return Math.sin(x); }

function cos(x) { return Math.cos(x); }

function tan(x) { return Math.tan(x); }

function abs(x) { return Math.abs(x); }

 

function plot() {

  var expression = document.getElementById('expression').value;

  var canvas = document.getElementById('plot');

  var ctx = canvas.getContext('2d');

 

  // Clear the canvas

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

 

  // Plot the axis lines

  ctx.beginPath();

  ctx.moveTo(canvas.width / 2, 0);

  ctx.lineTo(canvas.width / 2, canvas.height);

  ctx.moveTo(0, canvas.height / 2);

  ctx.lineTo(canvas.width, canvas.height / 2);

  ctx.strokeStyle = 'black';

  ctx.stroke();

 

  // Plot the grid lines

  ctx.beginPath();

  for (var t = 0; t < 2 * Math.PI; t += Math.PI / 6) {

    ctx.moveTo(canvas.width / 2, canvas.height / 2);

    ctx.lineTo(canvas.width / 2 + canvas.width / 2 * Math.cos(t), canvas.height / 2 - canvas.height / 2 * Math.sin(t));

  }

  for (var r = 10; r < canvas.width / 2; r += 10) {

    ctx.moveTo(canvas.width / 2, canvas.height / 2);

    ctx.arc(canvas.width / 2, canvas.height / 2, r, 0, 2 * Math.PI);

  }

  ctx.strokeStyle = 'gray';

  ctx.stroke();

 

  // Plot the function

  ctx.beginPath();

  for (var t = 0; t < 2 * Math.PI; t += 0.01) {

    // Evaluate the expression

    var r = eval(expression);

    var x = r * Math.cos(t);

    var y = r * Math.sin(t);

    if (t == 0) {

      ctx.moveTo(x + canvas.width / 2, canvas.height / 2 - y);

    } else {

      ctx.lineTo(x + canvas.width / 2, canvas.height / 2 - y);

    }

  }

  ctx.lineWidth = 2;

  ctx.strokeStyle = 'red';

  ctx.stroke();

}