Java Script | ShareTechnote

Javascript

Plot Complex Number Interpolation

this code is created first by chatGPT on Jan 29 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 html and javascript with the following requirement

1. Use math.js library for math operations and assume that math.js file is located at mathjs/math.js

2. create a table at the center of the page. Gridlines of the table should be visible and thin.

3. the table has 4 rows and one column, make grid visible in thin line

4. In the first cell, put a textbox that can take in a number named as 'NoOfSample', the title of this text box is 'Number of Points' and a button named as 'Plot'. the default value of the text box is 10. Labels and text boxes should be on the same line. The input box should have spin button

5. In the second cell, put two textboxes that can take in A1 and t1 of the formula c1=A1*e^(i t1) where i denotes imaginary number. The default value of A1 = 0.5 and t1 = 30 in degree. Labels and text boxes should be on the same line. The input box should have spin button

6. In the third cell, put two textboxes that can take in A2 and t2 of the formula c2=A2*e^(i t2) where i denotes imaginary number. The default value of A1 = 1.5 and t1 = 270 in degree. Labels and text boxes should be on the same line. The input box should have spin button

7. In the fourth cell, put a canvas with the size of 400x400 pixel that plot the data in the file in the lower row. Do not put any background in the canvas. the background should be all white.

8. set the range of the canvas so that x axis range is '-2 <= x <= 2' and y axis range is '-2 <= x <= 2'. Use scale and translation method of canvas for this.

9. make the edge of the canvas visible

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

11. write a function that returns an array of math.js complex numbers that interpolate from c1 and c2 with 'Number of Points'. The array show include both c1 and c2 and all the interpolated points.

12. write a function named plotInterpolation() that plot the complex array returned in previous step on the canvas when 'Plot' button is clicked. Real part of the complex number should be x coordinate and Imaginary part of the complex number should be y coordinate

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

14. do not use css.

15. 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.

Usage : Click on [Plot] button. When you change the contents of the input box using spin button, you will get the updated plot right away

Number of Points:

[Complex No. c1 = A1 e^(t1 j)] A1: t1:

[Complex No. c2 = A2 e^(t2 j)] A2: t2:

ComplexInterpolate.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<td>

<label for="NoOfSample">Number of Points:</label>

</td>

</tr>

<tr>

<td>

<label for="A1">[Complex No. c1 = A1 e^(t1 j)] A1:</label>

</td>

</tr>

<tr>

<td>

<label for="A2">[Complex No. c2 = A2 e^(t2 j)] A2:</label>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</body>

</html>

NOTE : I downloaded the math.js library from Mathjs homepage and placed in local path : mathjs/math.js

NOTE : The canvas scaling was not done as expected. I would have spent long time to fix it, but I managed to fix it quickly based on the experience with this note.

PlotInterpolateComplex.js

function plotInterpolation() {

// get input values

var numPoints = document.getElementById("NoOfSample").value;

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

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

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

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

// convert t1 and t2 from degrees to radians

t1 = (t1 * Math.PI) / 180;

t2 = (t2 * Math.PI) / 180;

// create c1 and c2 using input values

var c1 = { r: A1, phi: t1 };

var c2 = { r: A2, phi: t2 };

// interpolate between c1 and c2

var interpolatedPoints = interpolate(c1, c2, numPoints);

// get canvas and context

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

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

// clear canvas

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

// set transform for scaling and translation

//ctx.setTransform(1, 0, 0, -1, canvas.width/2, canvas.height/2);

// set range for x and y axis

ctx.save();

ctx.lineWidth = 1/(canvas.width/4);

ctx.scale(canvas.width / 4, -canvas.height / 4);

ctx.translate(2, -2);

// draw axis lines

ctx.beginPath();

ctx.moveTo(-2, 0);

ctx.lineTo(2, 0);

ctx.moveTo(0, -2);

ctx.lineTo(0, 2);

ctx.strokeStyle = "black";

ctx.stroke();

// plot interpolated points

for (var i = 0; i < interpolatedPoints.length; i++) {

var point = interpolatedPoints[i];

var x = point.r * Math.cos(point.phi);

var y = point.r * Math.sin(point.phi);

if (i==0) {

ctx.fillStyle = "red";

} else if (i==interpolatedPoints.length-1) {

ctx.fillStyle = "blue";

} else {

ctx.fillStyle = "black";

}

ctx.beginPath();

ctx.arc(x, y, 0.04, 0, 2 * Math.PI);

ctx.fill();

//console.log(x);

}

ctx.restore();

}

function interpolate(c1, c2, numPoints) {

var points = [];

var step = 1 / (numPoints - 1);

for (var i = 0; i < numPoints; i++) {

var t = i * step;

var r = parseFloat(c1.r) + (parseFloat(c2.r) - parseFloat(c1.r)) * t;

var phi = c1.phi + (c2.phi - c1.phi) * t;

points.push({ r: r, phi: phi });

}

return points;

}