-
Notifications
You must be signed in to change notification settings - Fork 0
/
part1.html
386 lines (349 loc) · 15.6 KB
/
part1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
<html>
<head>
<meta charset = "utf-8">
<title> HW3 Part 1</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/mathjs/8.1.1/math.js></script>
<style>
table, th, td
{
border: 2px solid black;
}
.legend
{
font-weight:bold;
}
table
{
width: 25%;
border-collapse: collapse;
}
#chart_div
{
width:1600px;
height:1000px;
}
</style>
</head>
<body>
<div id="problem"> </div>
</body>
<script>
init();
let deltax=parseFloat(document.getElementById("deltax").value);
let deltat=parseFloat(document.getElementById("deltat").value);
let timesteps=Math.round(.85/deltat);
let xsteps=Math.round(10/deltax);
let grid=numeric(); //calculates the numeric solution and stores it in grid
let grid2=exact(); //gets the exact solution and stores it in grid2
function init() //initalizes elements
{
let linebreak = document.createElement("br");
let prob = document.getElementById("problem");
let probDescription = document.createElement("div");
probDescription.innerHTML="Solution to differential equation using Crank-Nicolson method and three point central difference for du/dx";
prob.appendChild(probDescription);
prob.appendChild(linebreak.cloneNode(true));
let deltaxlabel=document.createElement("label"); //adding text desciriptions
deltaxlabel.innerHTML="Delta X: ";
let deltaxinput=document.createElement("input");
deltaxinput.setAttribute("type", "text");
deltaxinput.id="deltax";
deltaxinput.value=1/40;
deltaxinput.readOnly=true;
prob.appendChild(deltaxlabel);
prob.appendChild(deltaxinput);
prob.appendChild(linebreak.cloneNode(true));
let deltatlabel=document.createElement("label");
deltatlabel.innerHTML="Delta T: ";
let deltatinput=document.createElement("input");
deltatinput.id="deltat";
deltatinput.setAttribute("type", "text");
deltatinput.value=.85/100;
deltatinput.readOnly=true;
prob.appendChild(deltatlabel);
prob.appendChild(deltatinput);
prob.appendChild(linebreak.cloneNode(true));
let createBtn = document.createElement("button"); //adding buttons and event listeners
createBtn.innerHTML = "Show Grid";
createBtn.addEventListener("click", fillTable);
prob.appendChild(createBtn);
let showResults = document.createElement("button");
showResults.innerHTML = "Show Results at T=.85";
showResults.addEventListener("click", fillResults);
prob.appendChild(showResults);
let graphBtn = document.createElement("button");
graphBtn.innerHTML="Show Graph of U numerical and U exact at T=.85";
graphBtn.addEventListener("click", showGraph);
prob.appendChild(graphBtn);
let graphBtn2 = document.createElement("button");
graphBtn2.innerHTML="Show Graph of Error T=.85";
graphBtn2.addEventListener("click", showError);
prob.appendChild(graphBtn2);
let clearBtn = document.createElement("button");
clearBtn.innerHTML="Clear";
clearBtn.addEventListener("click", clear);
prob.appendChild(clearBtn);
}
function showError() //draws a graph of the absolute error, Math.abs(numeric - exact) at T=.85
{
clear();
let chartdiv=document.createElement("div");
chartdiv.id="chart_div";
let prob = document.getElementById("problem");
prob.appendChild(chartdiv);
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawErrorChart);
}
function drawErrorChart() //helper function
{
let values=[];
values.push(["X", "Error"]);
let maxError=0;
let xHighError=-1;
for(let i = 0; i<=400; i++)
{
let error=Math.abs(grid[grid.length-1][i]-grid2[grid2.length-1][i])
if(Math.abs(error)>maxError)
{
maxError=error;
xHighError=i*deltax;
}
values.push([i*deltax, error]);
}
let errormsg= document.createElement("div");
errormsg.innerHTML="The Maximum Error is "+maxError+", located at x= "+xHighError;
errormsg.id="error";
document.getElementById("problem").appendChild(errormsg);
let data = google.visualization.arrayToDataTable(values);
let options = {
title: 'Error of Numerical Solution at T=.85',
legend: {position: 'bottom'},
hAxis: {title: 'X'},
vAxis: {title: 'Error'},
};
let chart = new google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(data, options);
}
function showGraph() //draws a graph of the numeric and exact solutions at T=.85
{
clear();
let chartdiv=document.createElement("div");
chartdiv.id="chart_div";
let prob = document.getElementById("problem");
prob.appendChild(chartdiv);
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
}
function drawChart() //helper function
{
let values=[];
values.push(["X", "U numerical", "U exact"]);
for(let i = 0; i<=400; i++)
values.push([i*deltax, grid[grid.length-1][i], grid2[grid2.length-1][i]]);
let data = google.visualization.arrayToDataTable(values);
let options = {
title: 'Numerical and Exact Solutions to U at T=.85',
legend: {position: 'bottom'},
hAxis: {title: 'X'},
vAxis: {title: 'U'},
};
let chart = new google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(data, options);
}
function clear() //clears everything
{
if(document.getElementById("table"))
document.getElementById("table").remove();
if(document.getElementById("chart_div"))
document.getElementById("chart_div").remove();
if(document.getElementById("error"))
document.getElementById("error").remove();
}
function exact() // returns the exact solution
{
let grid2 = [];
for(let n=0; n<timesteps+1; n++) //time nodes
{
let b=[];
for(let i=0; i<xsteps+1; i++) //x
b.push(Math.exp(n*deltat-i*deltax));
grid2.push(b);
}
return grid2;
}
function solvematrix(x) //solves for U at the next timestep, given U at the current timestep
{
let c = [0]; //create arrays for the 3 diagonals
let b = [1];
let a= [0];
for(let i =1; i<x.length; i++)
{
c.push(1/(2*deltax*deltax)); //tridiagonal matrix coefficients
b.push((-1/deltat)-1/(deltax*deltax));
a.push(1/(2*deltax*deltax));
if(i==x.length-1)
{
a[i]=1/(1+deltax); //boundry condition
b[i]=-1;
}
}
return thomasalgo(a, b, c, x, x.length); //calls solver and returns the solution
}
function thomasalgo(a, b, c, d, n)
{
let cprime=[];
let dprime=[];
for(let i =0; i<n; i++)
{
if(i==0)
{
cprime.push(c[i]/b[i]);
dprime.push(d[i]/b[i]);
}
else
{
if(i!=n)
cprime.push(c[i]/(b[i]-a[i]*cprime[i-1]));
dprime.push((d[i]-a[i]*dprime[i-1])/(b[i]-a[i]*cprime[i-1]));
}
}
let xsol=[];
for(let i=0; i<n; i++)
xsol.push(0);
xsol[n-1]=dprime[n-1];
for(let i=n-2; i>=0; i--)
xsol[i]=dprime[i]-cprime[i]*xsol[i+1];
return xsol;
}
function numeric() //calculates and stores the numerical solution
{
let grid=[]; //2D array containing the values of U at all x and t
let current=[]; //array containing the values of U at the current timestep
for(let i =0; i<xsteps+1; i++) //initialize current to boundry condition U(x,0)=e^-x
current.push(Math.exp(-deltax*i));
grid.push(current); //adds the first row to the grid
for(let n =0; n<timesteps; n++) //iterate through all the timesteps
{
let right = []; //array for the right vector
for(let i =0; i<xsteps+1; i++) //loop that sets the values for the right vector
{
if(i==0) //x=0 boundry condition
right.push(Math.exp((n+1)*deltat));
else if (i == xsteps) //x=10 boundry condition
right.push(0);
else
{
temp1=current[i+1]*(1/(2*deltax)-1/(2*deltax*deltax)); //n timestep, U(i+1) term
temp2=current[i]*(1-1/deltat+1/(deltax*deltax)); //n timestep, U(i) term
temp3=current[i-1]*(-1/(2*deltax)-1/(2*deltax*deltax)); //n timestep, U(i-1) term
right.push(temp1+temp2+temp3);
}
}
current = solvematrix(right); //calculates the value of U at the current timestep
grid.push(current); //adds the values of U at the current timestep to the grid
}
return grid;
}
function fillResults() //creates a table and fills it with the exact and numerical solutions at t=.85
{
clear();
let prob = document.getElementById("problem");
let table = document.createElement("table");
table.id="table";
let firstrow= document.createElement("tr");
let xlabel=document.createElement("td");
xlabel.innerHTML="X Value";
xlabel.classList.add("legend");
firstrow.appendChild(xlabel);
let solutionlabel=document.createElement("td");
solutionlabel.innerHTML="Numerical Solution";
solutionlabel.classList.add("legend");
firstrow.appendChild(solutionlabel);
let exactsolutionlabel=document.createElement("td");
exactsolutionlabel.innerHTML="Exact Solution";
exactsolutionlabel.classList.add("legend");
firstrow.appendChild(exactsolutionlabel);
let errorlabel=document.createElement("td");
errorlabel.innerHTML="Error";
errorlabel.classList.add("legend");
firstrow.appendChild(errorlabel);
table.appendChild(firstrow);
for(let i=0; i<grid[grid.length-1].length; i=i+10)
{
let row= document.createElement("tr");
let xval=document.createElement("td");
xval.innerHTML=(i*deltax).toFixed(3);
let nsolu=document.createElement("td");
nsolu.innerHTML=(grid[grid.length-1][i]).toFixed(7);
let exactsolu=document.createElement("td");
exactsolu.innerHTML=(grid2[grid2.length-1][i]).toFixed(7);
let error=document.createElement("td");
error.innerHTML=(Math.abs(grid2[grid2.length-1][i]-grid[grid.length-1][i])).toFixed(10);
row.appendChild(xval);
row.appendChild(nsolu);
row.appendChild(exactsolu);
row.appendChild(error);
table.appendChild(row);
}
prob.appendChild(table);
}
function fillTable() //creates a table and fills table with the numeric solution
{
clear();
let prob = document.getElementById("problem");
let table = document.createElement("table");
table.id="table";
let firstrow= document.createElement("tr");
let blank = document.createElement("td");
blank.innerHTML=" ";
firstrow.appendChild(blank);
let xlabel=document.createElement("td");
xlabel.innerHTML="X Value";
xlabel.classList.add("legend");
firstrow.appendChild(xlabel);
let secondrow = document.createElement("tr");
let timelabel=document.createElement("td");
timelabel.innerHTML="Time";
timelabel.classList.add("legend");
secondrow.appendChild(timelabel);
let nodelabel=document.createElement("td");
nodelabel.innerHTML="Node";
nodelabel.classList.add("legend");
secondrow.appendChild(nodelabel);
for(i=0; i<grid[0].length; i++)
{
let temp=document.createElement("td");
let temp2=document.createElement("td");
temp.innerHTML=(i*deltax).toFixed(3);
temp2.innerHTML=i;
temp.classList.add("legend");
temp2.classList.add("legend");
firstrow.appendChild(temp);
secondrow.appendChild(temp2);
}
table.appendChild(firstrow);
table.appendChild(secondrow);
for(a=0; a<grid.length; a=a+1)
{
let row= document.createElement("tr");
let time=document.createElement("td");
time.innerHTML= (a*deltat).toFixed(3);
time.classList.add("legend");
let timenode=document.createElement("td");
timenode.innerHTML=a;
timenode.classList.add("legend");
row.appendChild(time);
row.appendChild(timenode);
for(b=0; b<grid[a].length; b++)
{
let xBox=document.createElement("td");
xBox.innerHTML=(grid[a][b]).toFixed(4);
row.appendChild(xBox);
}
table.appendChild(row);
}
prob.appendChild(table);
}
</script>
</html>