1var timestep = 1 / 10000;
  2var canvasScale = 20;
  3var inputScale = 1 / 2;
  4var numberOfVectors = 7; // Must be odd
  5var historicalPointsLimit = 1200; // usually framerate
  6
  7// Program variables
  8// Canvas
  9var canvas = document.getElementsByTagName("canvas")[0];
 10var width = canvas.width;
 11var height = canvas.height;
 12var oldWidth = width;
 13var oldHeight = height;
 14var ctx = canvas.getContext("2d");
 15
 16// Fourier series
 17fourierSeriesConstants = [];
 18// Historical points
 19var historicalPoints = [];
 20// Input points (https://shinao.github.io/PathToPoints/)
 21
 22var inputPoints = [
 23  [
 24      -44.05,
 25      -48
 26  ],
 27  [
 28      -44.05,
 29      -47.6
 30  ],
 31  [
 32      -44.05,
 33      -46.7
 34  ],
 35  [
 36      -44.05,
 37      -45
 38  ],
 39  [
 40      -44.05,
 41      -42.6
 42  ],
 43  [
 44      -44.45,
 45      -39.4
 46  ],
 47  [
 48      -44.85,
 49      -36
 50  ],
 51  [
 52      -45.25,
 53      -31.8
 54  ],
 55  [
 56      -45.45,
 57      -27.6
 58  ],
 59  [
 60      -45.85,
 61      -23.4
 62  ],
 63  [
 64      -46.15,
 65      -19
 66  ],
 67  [
 68      -46.45,
 69      -15.5
 70  ],
 71  [
 72      -46.85,
 73      -10
 74  ],
 75  [
 76      -46.95,
 77      -6.8
 78  ],
 79  [
 80      -47.05,
 81      -4
 82  ],
 83  [
 84      -47.05,
 85      -2
 86  ],
 87  [
 88      -47.05,
 89      0.1
 90  ],
 91  [
 92      -47.05,
 93      1.8
 94  ],
 95  [
 96      -47.05,
 97      3.3
 98  ],
 99  [
100      -47.05,
101      4.4
102  ],
103  [
104      -47.05,
105      5
106  ],
107  [
108      -47.05,
109      5.6
110  ],
111  [
112      -47.05,
113      5.7
114  ],
115  [
116      -47.05,
117      5.8
118  ],
119  [
120      -46.95,
121      5.7
122  ],
123  [
124      -46.65,
125      5.2
126  ],
127  [
128      -46.05,
129      4.2
130  ],
131  [
132      -44.45,
133      2.6
134  ],
135  [
136      -41.85,
137      0.5
138  ],
139  [
140      -37.65,
141      -3
142  ],
143  [
144      -32.55,
145      -6.7
146  ],
147  [
148      -26.85,
149      -11.2
150  ],
151  [
152      -20.65,
153      -15.9
154  ],
155  [
156      -14.85,
157      -20.2
158  ],
159  [
160      -7.35,
161      -25.5
162  ],
163  [
164      -2.55,
165      -29
166  ],
167  [
168      0.95,
169      -31.5
170  ],
171  [
172      4.55,
173      -34.2
174  ],
175  [
176      7.55,
177      -36.4
178  ],
179  [
180      9.45,
181      -37.9
182  ],
183  [
184      11.45,
185      -39.4
186  ],
187  [
188      12.75,
189      -40.3
190  ],
191  [
192      13.75,
193      -41
194  ],
195  [
196      14.25,
197      -41.5
198  ],
199  [
200      14.15,
201      -41.5
202  ],
203  [
204      13.95,
205      -41.4
206  ],
207  [
208      13.55,
209      -41.2
210  ],
211  [
212      13.05,
213      -41
214  ],
215  [
216      12.35,
217      -40.7
218  ],
219  [
220      11.55,
221      -40.3
222  ],
223  [
224      10.25,
225      -39.5
226  ],
227  [
228      8.65,
229      -38.6
230  ],
231  [
232      6.55,
233      -37.5
234  ],
235  [
236      2.35,
237      -35.5
238  ],
239  [
240      -1.65,
241      -33.8
242  ],
243  [
244      -4.55,
245      -32.4
246  ],
247  [
248      -8.05,
249      -30.8
250  ],
251  [
252      -11.25,
253      -29.4
254  ],
255  [
256      -14.25,
257      -27.9
258  ],
259  [
260      -16.85,
261      -26.6
262  ],
263  [
264      -18.55,
265      -25.8
266  ],
267  [
268      -20.45,
269      -24.8
270  ],
271  [
272      -22.05,
273      -24
274  ],
275  [
276      -23.45,
277      -23.4
278  ],
279  [
280      -24.95,
281      -22.6
282  ],
283  [
284      -26.85,
285      -21.5
286  ],
287  [
288      -27.75,
289      -21
290  ],
291  [
292      -28.55,
293      -20.4
294  ],
295  [
296      -29.05,
297      -20
298  ],
299  [
300      -29.65,
301      -19.8
302  ],
303  [
304      -29.75,
305      -19.6
306  ],
307  [
308      -30.05,
309      -19.5
310  ],
311  [
312      -30.15,
313      -19.5
314  ],
315  [
316      -30.05,
317      -19.5
318  ],
319  [
320      -29.75,
321      -19.5
322  ],
323  [
324      -29.35,
325      -19.5
326  ],
327  [
328      -28.65,
329      -19.5
330  ],
331  [
332      -27.85,
333      -19.5
334  ],
335  [
336      -26.65,
337      -19.8
338  ],
339  [
340      -25.05,
341      -20
342  ],
343  [
344      -22.05,
345      -20.6
346  ],
347  [
348      -18.05,
349      -21.4
350  ],
351  [
352      -9.25,
353      -23.2
354  ],
355  [
356      -2.85,
357      -25
358  ],
359  [
360      3.75,
361      -26.8
362  ],
363  [
364      9.05,
365      -28.2
366  ],
367  [
368      14.95,
369      -29.6
370  ],
371  [
372      19.05,
373      -30.4
374  ],
375  [
376      23.55,
377      -31.4
378  ],
379  [
380      27.15,
381      -31.9
382  ],
383  [
384      30.25,
385      -32.4
386  ],
387  [
388      32.15,
389      -32.7
390  ],
391  [
392      33.85,
393      -32.8
394  ],
395  [
396      35.35,
397      -33
398  ],
399  [
400      35.85,
401      -33
402  ],
403  [
404      36.15,
405      -33
406  ],
407  [
408      35.95,
409      -33
410  ],
411  [
412      35.75,
413      -32.6
414  ],
415  [
416      35.15,
417      -32.2
418  ],
419  [
420      33.85,
421      -30.8
422  ],
423  [
424      32.55,
425      -29.6
426  ],
427  [
428      30.25,
429      -27.6
430  ],
431  [
432      27.05,
433      -25
434  ],
435  [
436      21.95,
437      -21.2
438  ],
439  [
440      16.35,
441      -17
442  ],
443  [
444      9.75,
445      -12.2
446  ],
447  [
448      2.55,
449      -7
450  ],
451  [
452      -4.65,
453      -1.5
454  ],
455  [
456      -12.05,
457      4
458  ],
459  [
460      -18.85,
461      9.6
462  ],
463  [
464      -24.05,
465      13.8
466  ],
467  [
468      -29.45,
469      18.4
470  ],
471  [
472      -34.95,
473      22.9
474  ]
475]
476/*[
477  [-2.2025083573478526, 1.0051891800658268],
478  [-1.7874783258251057, -0.9291597085828585],
479  [-0.7944158564618817, -2.673629264795295],
480  [0.6417226675935979, -4.056001343094806],
481  [2.38260363862301, -5.016999876015859],
482  [4.319074114937422, -5.523062140309321],
483  [6.317142913121813, -5.555618759536287],
484  [8.24499662138902, -5.122076760196194],
485  [10.037014313716526, -4.215563916289341],
486  [11.523568221110935, -2.8873837762708376],
487  [12.577346817035306, -1.2046858745450777],
488  [13.084197830338127, 0.7245332944755773],
489  [12.970333306033268, 2.7167375785475087],
490  [12.255504042644162, 4.566049756443988],
491  [11.017721584219515, 6.14833158675475],
492  [9.410584046024894, 7.322738863862071],
493  [7.55992728330574, 8.055665387547549],
494  [5.587554257292339, 8.319744150078805],
495  [3.592206927318159, 8.11491270104699],
496  [1.7187215483971556, 7.441385351142856],
497  [0.08055005170780305, 6.320185348904658],
498  [-1.2091294565014152, 4.794034985936207],
499  [-2.002946366291468, 2.9587237066393186],
500  [-2.2025083573478526, 1.0051891800658268],
501  [-1.7874783258251057, -0.9291597085828585],
502  [-0.7944158564618817, -2.673629264795295],
503  [0.6417226675935979, -4.056001343094806],
504  [2.38260363862301, -5.016999876015859],
505  [4.319074114937422, -5.523062140309321],
506  [6.317142913121813, -5.555618759536287],
507  [8.24499662138902, -5.122076760196194],
508  [10.037014313716526, -4.215563916289341],
509  [11.523568221110935, -2.8873837762708376],
510  [12.577346817035306, -1.2046858745450777],
511  [13.084197830338127, 0.7245332944755773],
512  [12.970333306033268, 2.7167375785475087],
513  [12.255504042644162, 4.566049756443988],
514  [11.017721584219515, 6.14833158675475],
515  [9.410584046024894, 7.322738863862071],
516  [7.55992728330574, 8.055665387547549],
517  [5.587554257292339, 8.319744150078805],
518  [3.592206927318159, 8.11491270104699],
519  [1.7187215483971556, 7.441385351142856],
520  [0.08055005170780305, 6.320185348904658],
521  [-1.2091294565014152, 4.794034985936207],
522  [-2.002946366291468, 2.9587237066393186],
523  [-14.202658698599691, 5.019429517424612],
524  [-13.936847531776806, 6.998038863575971],
525  [-13.396467554073695, 8.920274252331808],
526  [-12.623233276348458, 10.750229305661207],
527  [-11.634671155910866, 12.490588449872064],
528  [-10.454204268794427, 14.107875064647715],
529  [-9.100595818500864, 15.592814478314438],
530  [-7.6171813258937675, 16.91101116660883],
531  [-5.992164994221099, 18.07785456601431],
532  [-4.261641884785064, 19.072328857815762],
533  [-2.433220272999165, 19.89532435838038],
534  [-0.5418022928050732, 20.533733205235535],
535  [1.408325022716184, 20.990479969418573],
536  [3.391351656872871, 21.261909111401962],
537  [5.389055394079634, 21.350712178652145],
538  [7.3864394488521725, 21.2567688467866],
539  [9.369071056205883, 20.978356685838605],
540  [11.302159804362901, 20.51754521695426],
541  [13.193577784556993, 19.870013689435098],
542  [15.021999396342864, 19.038826803601353],
543  [16.7525225057789, 18.039768628514366],
544  [18.377538837451567, 16.869159246719448],
545  [19.86095333005872, 15.546316532528976],
546  [21.207915700186135, 14.063225516936711],
547  [22.384360845346094, 12.450254606044837],
548  [23.37481792714081, 10.70739505413826],
549  [24.15302451829993, 8.864045825413484],
550  [24.71082171537367, 6.940154904759481],
551  [25.03384346868475, 4.972423457539662],
552  [25.112598982829667, 2.978390747345088],
553  [24.952176619548396, 0.994905346668304],
554  [24.55505326749764, -0.9673068719738467],
555  [23.92746188547099, -2.8649758112067616],
556  [23.07797452451669, -4.674997058474446],
557  [22.020244378108572, -6.387205501162498],
558  [20.79664474393806, -7.945355692469434],
559  [19.38930583726247, -9.375972319432492],
560  [17.851852633554557, -10.649937349402308],
561  [16.26315147348876, -11.870634285949961],
562  [14.67722833206139, -13.089196699702143],
563  [13.102069147426704, -14.299488502585234],
564  [11.50778920159874, -15.524471963786482],
565  [9.920115514781429, -16.74437942936362],
566  [8.340733914572837, -17.95791557415663],
567  [6.751907279302458, -19.178708921031046],
568  [5.170983987052097, -20.393429642760168],
569  [3.5775378885977887, -21.61777240767418],
570  [1.9985901910179393, -22.830975158357035],
571  [0.400845481891281, -24.059016712748416],
572  [-1.4473847292474318, -24.696677481495726],
573  [-3.406038100581526, -24.349980045163022],
574  [-4.845280030231805, -23.020097046458147],
575  [-4.660298417072596, -21.11962970217411],
576  [-3.1822517961373933, -19.81436874037331],
577  [-1.6305758278182054, -18.552450936638763],
578  [-0.07594178601337376, -17.288127446618887],
579  [1.474718508113284, -16.027035651260064],
580  [3.0287113924213998, -14.763233589732124],
581  [1.2727669413649778, -14.676289900966992],
582  [-0.7347091360500997, -14.674148593151017],
583  [-2.7343634047795717, -14.672015628597762],
584  [-4.736229374866809, -14.669880304896253],
585  [-6.7356488926819225, -14.667747590743943],
586  [-8.74275448997679, -14.665606678106826],
587  [-10.732082322101917, -14.663484728419292],
588  [-12.737773850422258, -14.661345324122351],
589  [-14.732088244382197, -14.659218055435474],
590  [-16.741750322144327, -14.657074415885859],
591  [-18.741559095542726, -14.65494128652756],
592  [-20.71644851491962, -14.451406181895209],
593  [-22.438648145656913, -13.468801354014317],
594  [-23.419744389515273, -11.774325700365978],
595  [-22.89961297939331, -9.917791831457066],
596  [-21.146973707657168, -9.046758455001793],
597  [-19.15052366804693, -8.99999403731249],
598  [-17.154887059595268, -9.003845265855148],
599  [-15.160283344130846, -9.0076945010955],
600  [-13.146988030414889, -9.011579807841258],
601  [-11.145549698810868, -9.015442232691669],
602  [-9.174607010822598, -9.007967577540342],
603  [-10.760575028400751, -7.795168505274717],
604  [-12.347321244221035, -6.581774340235654],
605  [-13.929836486823717, -5.371615625304173],
606  [-15.516636137276748, -4.158180598487149],
607  [-17.105407687168423, -2.9432376485700047],
608  [-18.702803971510235, -1.7216993134850895],
609  [-20.28505643446357, -0.5117415476972269],
610  [-21.876524808894686, 0.7052636798088656],
611  [-23.466781124364445, 1.92134203869756],
612  [-25.057700276266672, 3.1379272725051237],
613  [-26.63699862573654, 4.345626010335025],
614  [-28.23703861821801, 5.569186004585561],
615  [-29.813996476154614, 6.779351575291685],
616  [-31.077298817258196, 8.313163278616003],
617  [-31.58853560171633, 10.242009411371328],
618  [-30.974890149231868, 12.089691822222449],
619  [-29.31611574731383, 13.158054611421164],
620  [-27.342687272053098, 13.168220258152985],
621  [-25.52354557409498, 12.359460436566735],
622  [-23.957516180496526, 11.099097184098298],
623  [-22.415455616038173, 9.834885369992776],
624  [-20.864487444382036, 8.563370922959393],
625  [-19.329027509648256, 7.3045704359253705],
626  [-17.78396052024874, 6.037893895066304],
627  [-16.22801289461168, 4.76229719296748],
628  [-14.684605454426134, 3.4969811834459392],
629  [-14.21094622514758, 4.2306327261095475],
630  [13.511307059083236, 9.934786927214816],
631  [11.869471503276458, 11.079663152134913],
632  [10.069000960368754, 11.938005628026076],
633  [8.148105244789377, 12.501371592394037],
634  [6.163081718463559, 12.761114420331069],
635  [4.169299980033287, 12.723883906519973],
636  [2.2044440088459396, 12.392122159398127],
637  [0.2965579805561731, 11.753038937962572],
638  [-1.4614390554240515, 10.82647829953487],
639  [-3.0505056793204517, 9.614110222495128],
640  [-4.406407364826521, 8.152439221776092],
641  [-5.479166764240603, 6.470623425877648],
642  [-6.212059147816035, 4.607584981358627],
643  [-6.5568247837832985, 2.641496643460357],
644  [-6.502787552814851, 0.64018610898313],
645  [-6.0596649942210945, -1.3012079339856086],
646  [-5.23538001630817, -3.130564098917773],
647  [-4.08522254274402, -4.765030947291223],
648  [-2.673931003551843, -6.1636043363445765],
649  [-1.0356922706625369, -7.306038458832518],
650  [0.7624378576465745, -8.168834086024162],
651  [2.6860123874583053, -8.740884332098972],
652  [4.66523229982343, -9.007448030077796],
653  [6.668562621135351, -8.973386717402377],
654  [8.633852106142854, -8.641303717390599],
655  [10.532973832149139, -8.006089483343942],
656  [12.297028856981655, -7.0813123981664035],
657  [13.89420675184212, -5.87215216025055],
658  [15.2476627125927, -4.420641391002562],
659  [16.33054506208387, -2.728636560999803],
660  [17.062227733690435, -0.8769353830451223],
661  [17.410851420421267, 1.0791555685167964],
662  [17.36959686710324, 3.0836797470217903],
663  [16.930800093669546, 5.032930249608114],
664  [16.12062432004896, 6.851208571827954],
665  [14.977820983905502, 8.487027135527626],
666];
667*/
668
669function getActualFourierTransformNumber(
670  lengthOfSeries,
671  fourierSeriesConstantsIndex
672) {
673  return -(lengthOfSeries - 1) / 2 + fourierSeriesConstantsIndex;
674}
675
676function calculateFourierSeriesConstants() {
677  fourierSeriesConstants = [];
678  for (var i = 0; i < numberOfVectors; i++) {
679    var actualFourierTransformNumber = getActualFourierTransformNumber(
680      numberOfVectors,
681      i
682    );
683    sumX = 0;
684    sumY = 0;
685    for (inputPointIndex in inputPoints) {
686      var calculatedComplex = math.multiply(
687        math.complex(
688          inputPoints[inputPointIndex][0] * inputScale,
689          inputPoints[inputPointIndex][1] * inputScale
690        ),
691        math.pow(
692          Math.E,
693          math.multiply(
694            2,
695            math.complex(0, 1),
696            -actualFourierTransformNumber,
697            inputPointIndex / (inputPoints.length - 1),
698            Math.PI
699          )
700        )
701      );
702      sumX += calculatedComplex.re;
703      sumY += calculatedComplex.im;
704    }
705    fourierSeriesConstants.push(
706      math.complex(sumX / inputPoints.length, sumY / inputPoints.length)
707    );
708  }
709}
710
711function startDrawing() {
712  var t = new Date().getTime(); // Time variable
713  (function animloop() {
714    requestAnimationFrame(animloop);
715    // Get mouse position
716    if (mouseDown) {
717      inputPoints.push([
718        (mouseX - width / 2) / canvasScale / inputScale,
719        (mouseY - height / 2) / canvasScale / inputScale,
720      ]);
721    }
722    ctx.clearRect(0, 0, width, height);
723    // Draw axes
724    ctx.strokeStyle = "#ffffff";
725    ctx.beginPath();
726    ctx.moveTo(0, height / 2);
727    ctx.lineTo(width, height / 2);
728    ctx.stroke();
729    ctx.beginPath();
730    ctx.moveTo(width / 2, 0);
731    ctx.lineTo(width / 2, height);
732    ctx.stroke();
733    // Draw fourier vectors
734    var localT = (new Date().getTime() - t) * timestep;
735    var fourierSeriesConstantsIndex = 0;
736    var previousX = width / 2;
737    var previousY = height / 2;
738    for (i in fourierSeriesConstants) {
739      ctx.strokeStyle = "#ff0000";
740      var actualFourierTransformNumber = getActualFourierTransformNumber(
741        numberOfVectors,
742        fourierSeriesConstantsIndex
743      );
744      ctx.beginPath();
745      ctx.moveTo(previousX, previousY);
746      var fourierVector = math.multiply(
747        fourierSeriesConstants[fourierSeriesConstantsIndex],
748        math.pow(
749          Math.E,
750          math.multiply(
751            2,
752            math.complex(0, 1),
753            actualFourierTransformNumber,
754            localT,
755            Math.PI
756          )
757        )
758      );
759      var previousX = previousX + fourierVector.re * canvasScale;
760      var previousY = previousY + fourierVector.im * canvasScale;
761      ctx.lineTo(previousX, previousY);
762      if (vectorVisibility) {
763        ctx.stroke(); // Render the path
764      }
765      if (circleVisibility) {
766        ctx.strokeStyle = "#00ff00";
767        ctx.beginPath();
768        ctx.arc(
769          previousX,
770          previousY,
771          math.abs(fourierVector) * canvasScale,
772          0,
773          2 * Math.PI
774        );
775        ctx.stroke();
776      }
777      fourierSeriesConstantsIndex++;
778    }
779    // Historical points
780    historicalPoints.push([previousX, previousY]);
781    while (historicalPoints.length > historicalPointsLimit) {
782      historicalPoints.shift();
783    }
784    var oldPointX = historicalPoints[0][0];
785    var oldPointY = historicalPoints[0][1];
786    for (pointIndex in historicalPoints) {
787      ctx.strokeStyle = `rgb(0,0,${Math.min(
788        (pointIndex / historicalPointsLimit) * 2 * 255,
789        255
790      )})`;
791      ctx.beginPath();
792      ctx.moveTo(oldPointX, oldPointY);
793      ctx.lineTo(
794        historicalPoints[pointIndex][0],
795        historicalPoints[pointIndex][1]
796      );
797      oldPointX = historicalPoints[pointIndex][0];
798      oldPointY = historicalPoints[pointIndex][1];
799      ctx.stroke();
800    }
801    // Input points
802    if (drawingVisibility) {
803      var oldPointX = width / 2 + inputPoints[0][0] * canvasScale * inputScale;
804      var oldPointY = height / 2 + inputPoints[0][1] * canvasScale * inputScale;
805      ctx.strokeStyle = "#ffffff";
806      for (pointIndex in inputPoints) {
807        ctx.beginPath();
808        ctx.moveTo(oldPointX, oldPointY);
809        ctx.lineTo(
810          width / 2 + inputPoints[pointIndex][0] * canvasScale * inputScale,
811          height / 2 + inputPoints[pointIndex][1] * canvasScale * inputScale
812        );
813        oldPointX =
814          width / 2 + inputPoints[pointIndex][0] * canvasScale * inputScale;
815        oldPointY =
816          height / 2 + inputPoints[pointIndex][1] * canvasScale * inputScale;
817        ctx.stroke();
818      }
819    }
820  })();
821}
822
823function updateInfoDisplay() {
824  document.getElementById(
825    "info-display"
826  ).innerHTML = `Point history length: ${historicalPointsLimit}; Drawing frequency: ${Math.round(
827    1 / timestep / 1000
828  )}s; Number of vectors: ${numberOfVectors}`;
829}
830
831canvas.width = window.innerWidth;
832canvas.height = window.innerHeight;
833width = canvas.width;
834height = canvas.height;
835oldWidth = window.innerWidth;
836oldHeight = window.innerHeight;
837
838var mouseDown = 0;
839document.getElementsByTagName("canvas")[0].onmousedown = function () {
840  ++mouseDown;
841  inputPoints = [];
842};
843document.getElementsByTagName("canvas")[0].onmouseup = function () {
844  --mouseDown;
845  calculateFourierSeriesConstants();
846};
847var mouseX = 0;
848var mouseY = 0;
849document.body.onmousemove = function (e) {
850  mouseX = e.clientX;
851  mouseY = e.clientY;
852};
853document.getElementById("vector-count-slider").oninput = function () {
854  numberOfVectors = this.value * 2 + 1;
855  updateInfoDisplay();
856  calculateFourierSeriesConstants();
857};
858document.getElementById("timestep-slider").oninput = function () {
859  timestep = 1 / (this.value * 1000);
860  updateInfoDisplay();
861};
862document.getElementById("historical-point-count-slider").oninput = function () {
863  historicalPointsLimit = this.value * 30;
864  updateInfoDisplay();
865};
866var vectorVisibility = true;
867var circleVisibility = true;
868var drawingVisibility = true;
869document.getElementById("vector-visiblity-checkbox").oninput = function () {
870  vectorVisibility = document.getElementById(
871    "vector-visiblity-checkbox"
872  ).checked;
873};
874document.getElementById("circle-visiblity-checkbox").oninput = function () {
875  circleVisibility = document.getElementById(
876    "circle-visiblity-checkbox"
877  ).checked;
878};
879document.getElementById("drawing-visiblity-checkbox").oninput = function () {
880  drawingVisibility = document.getElementById(
881    "drawing-visiblity-checkbox"
882  ).checked;
883};
884updateInfoDisplay();
885calculateFourierSeriesConstants();
886startDrawing();
887
888/*setInterval(function () {
889  if (oldWidth == window.innerWidth) {
890  } else if (oldHeight == window.innerHeight) {
891  } else {
892    canvas.width = window.innerWidth;
893    canvas.height = window.innerHeight;
894    width = canvas.width;
895    height = canvas.height;
896    oldWidth = window.innerWidth;
897    oldHeight = window.innerHeight;
898  }
899}, 1000);
900*/