Java Script | ShareTechnote

Javascript

Plot Fading with Jakes Model

I tried this to check out how far I can go with chatGPT. To be honest, I didn't expect to get any working output for this example. As anticipated, it didn't go as smoothly as other examples that I tried but the final outcome is much more impressive than I thought.

I didn't expect to get any working solution for this example since I thought there wouldn't be enough amount of documents and sample code on this topic that chatGPT is trained with. Surprisingly I got working Jakes Model coding with just a few back-and-forth.

I had to go through a lot of additional back-and-forth and manual debugging to get the final result as shown below, but most of the code revsion and debugging was for graphics part. Almost no revision for Jakes algorithm itslef.

this code is created first by chatGPT on Jan 10 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 with the default value = 2 and click button with the title of 'plot' in the upper row.

4. put a canvas with the size of 400x400 in the lower row. Do not put any background in the canvas. the background should be all white.

5. create a script to simulate fading with Jakes model using the textbox value as the number of delay taps.

6. apply the fading to a test data with 200 numbers.

7. plot the data before and after fading

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.

PlotFadeJakes.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</body>

</html>

Following is the code for implementing Jakes model and plot for a data before and after fading, but I didn't get this with single request. At first, chatGPT wrote out the code with many parts missing. For example, at first it just wrote out 'function definition fadingAlgorithm(data, delayTabs)' and didn't implement the fading algorithm. So I had to tell 'complete fadingAlgorithm()' and it wrote out the complete code.

On top of it, it printed out the comment '// Plot the data on the canvas before fading' and '// Plot the data on the canvas after fading' and didn't print out real code for it. so I had to tell 'rewrite plotData() with the complete code for the commented part'.

I was so impressed by the fact that I can improve the code with this kind of chat with chatBot as I do with human programmer.

plot_fade_jakes.js

// Implement the fading algorithm using Jakes model

function fadingAlgorithm(data, delayTabs) {

// Total number of paths in Jakes model

let numPaths = 2 * delayTabs + 1;

let jakesData = new Array(numPaths);

// Creating array of the random number generators

for (let i = 0; i < numPaths; i++) {

jakesData[i] = new Array(2);

jakesData[i][0] = 1/(i+2) + 0.1*Math.random();

jakesData[i][1] = 1/(i+2) + 0.1*Math.random();

}

let pathGains = new Array(numPaths);

for (let i = 0; i < numPaths; i++) {

pathGains[i] = Math.sqrt(-2 * Math.log(jakesData[i][0]) ) * Math.cos(2 * Math.PI * jakesData[i][1]);

}

// Applying the Jakes Model fading

let fadedData = [...data];

for (let i = 0; i < data.length; i++) {

let sum = 0;

for (let j = 0; j < numPaths; j++) {

sum += pathGains[j] * Math.cos(2 * Math.PI * j * i / data.length);

}

fadedData[i] *= sum;

}

return fadedData;

}

function plotData() {

// Get the value from the textbox

let delayTabs = document.getElementById("textbox").value;

// Create a sample array of 200 numbers

let data = [];

for (let i = 0; i < 200; i++) {

data.push(Math.random());

}

// Apply the fading algorithm to the data

let fadedData = fadingAlgorithm(data, delayTabs);

let maxValue = Math.max.apply(Math, fadedData);

let minValue = Math.min.apply(Math, fadedData);

maxValue = Math.max(Math.abs(maxValue), Math.abs(minValue));

fadedData = fadedData.map(num => Math.abs(num/maxValue) );

// Get the canvas element

let canvas = document.getElementById("plot-canvas");

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

maxValue = Math.max.apply(Math, fadedData);

minValue = Math.min.apply(Math, fadedData);

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

ctx.save();

ctx.strokeStyle = "black";

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

// Scale the canvas so that the Yscale of the canvas is adjusted for the better view of the plot

let Yscale = 500;

let Yshift = 100;

ctx.scale(1, Yscale*1/canvas.height);

ctx.translate(0, Yshift);

// Plot the data on the canvas before fading

ctx.beginPath();

ctx.strokeStyle = "blue";

for (let i = 0; i < data.length; i++) {

let x = i / data.length * canvas.width;

let y = - 20*Math.log10(data[i]) ;

if (i === 0) {

ctx.moveTo(x, y);

} else {

ctx.lineTo(x, y);

}

ctx.stroke();

// Plot the data on the canvas after fading

ctx.beginPath();

ctx.strokeStyle = "red";

for (let i = 0; i < fadedData.length; i++) {

let x = i / fadedData.length * canvas.width;

let y = - 20*Math.log10(fadedData[i]);

if (i === 0) {

ctx.moveTo(x, y);

} else {

ctx.lineTo(x, y);

}

ctx.stroke();

ctx.restore();

}