Javascript  

  

 

 

 

 

Plot Math Expression in Cartesian

 

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 mathematical expression and click button in the upper row. default value of the text box is 'x*(x-2)*(x+2)'

4. put a canvas that plot the math expression 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. Grid lines should start from x axis and y axis

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.

 

 

PlotCartesian.html

<html>

<head>

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

</head>

<body>

  <table align="center" border="1">

    <tr>

      <td>

        <input type="text" id="expression" value="x*(x-2)*(x+2)">

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

      </td>

    </tr>

    <tr>

      <td>

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

      </td>

    </tr>

  </table>

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

</body>

</html>

 

 

style_plot.css

canvas {

  border: 1px solid black;

}

 

 

plot_math_expr.js

function plotExpression() {

  // Get the expression from the textbox

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

 

  // Get the canvas and context

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

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

 

  // Clear the canvas

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

 

  // Move the origin to the center of the canvas

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

 

  // Set the scale of the axis

  var scale = 40;

  var xstep = 0.1;

 

  ctx.strokeStyle = "gray";

 

  // Draw the grid lines

  ctx.beginPath();

  for (var x = 0; x > -canvas.height / 2; x -= scale) {

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

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

  }

  for (var x = 0; x < canvas.width / 2; x += scale) {

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

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

  }

 

  for (var y = 0 ; y < canvas.height / 2; y += scale) {

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

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

  }

  for (var y = 0; y > -canvas.height / 2; y -= scale) {

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

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

  }

  ctx.stroke();

 

  // Set the color of the x and y axis to black

  ctx.strokeStyle = "black";

 

  // Draw the x and y axis

  ctx.beginPath();

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

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

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

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

  ctx.stroke();

 

  // Plot the function

  ctx.strokeStyle = "red";

  ctx.lineWidth = 2;

  ctx.beginPath();

  for (var x = -canvas.width / 2 / scale; x < canvas.width / 2 / scale; x += xstep) {

    var y = eval(expression);

    ctx.lineTo(x * scale, -y * scale);

  }

  ctx.stroke();

}