Hugging Face's logo

Spaces:
p3nGu1nZz
/
plasma-arc
Running

App Files Community
p3nGu1nZz commited on
Commit
21e9f88
·
1 Parent(s): ce4f9e0

fixed NaN error in fps

Browse files
Files changed (1) hide show
  1. index.html +28 -28
index.html CHANGED
@@ -6,43 +6,41 @@
6
  <title>Minimalist White Circle with FPS</title>
7
  <style>
8
  body {
9
- margin: 0; /* Remove default margin */
10
- overflow: hidden; /* Prevent scrollbars */
11
  }
12
  canvas {
13
- display: block; /* Remove canvas default inline display */
14
  }
15
  </style>
16
  </head>
17
  <body>
18
  <canvas id="canvas"></canvas>
19
  <script>
20
- const canvas = document.getElementById('canvas');
21
- const context = canvas.getContext('2d');
22
-
23
- const versionText = 'v1.0.0';
24
- let fps = 0;
25
- let lastFrameTime = performance.now();
26
-
27
  function initializeCanvas() {
28
  canvas.width = window.innerWidth;
29
  canvas.height = window.innerHeight;
30
  context.fillStyle = 'black';
31
  context.fillRect(0, 0, canvas.width, canvas.height);
32
  }
33
-
34
  function drawWhiteCircle() {
35
- const centerX = canvas.width / 2;
36
- const centerY = canvas.height / 2;
37
- const radius = Math.min(canvas.width, canvas.height) * 0.00625; // 0.625% of the smaller dimension
38
-
39
  context.beginPath();
40
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
41
  context.strokeStyle = 'white';
42
- context.lineWidth = 0.125 * parseFloat(getComputedStyle(document.documentElement).fontSize); // 0.125em stroke
43
  context.stroke();
44
  }
45
-
46
  function drawVersionText() {
47
  context.font = '1em Arial';
48
  context.fillStyle = 'white';
@@ -50,7 +48,7 @@
50
  context.textBaseline = 'bottom';
51
  context.fillText(versionText, canvas.width - 10, canvas.height - 10);
52
  }
53
-
54
  function drawFPS() {
55
  context.font = '1em Arial';
56
  context.fillStyle = 'white';
@@ -58,31 +56,33 @@
58
  context.textBaseline = 'top';
59
  context.fillText(fps.toFixed(1) + ' fps', 10, 10);
60
  }
61
-
62
  function updateFPS() {
63
- const now = performance.now();
64
- const deltaTime = now - lastFrameTime;
65
  lastFrameTime = now;
66
-
67
- const currentFPS = 1000 / deltaTime;
68
- fps = fps + (currentFPS - fps) * 0.1; // LERP for smooth FPS updates
 
 
 
69
  }
70
-
71
  function draw() {
72
  initializeCanvas();
73
  drawWhiteCircle();
74
  drawVersionText();
75
  drawFPS();
76
  }
77
-
78
  function loop() {
79
  updateFPS();
80
  draw();
81
  requestAnimationFrame(loop);
82
  }
83
-
84
  loop();
85
-
86
  window.addEventListener('resize', draw);
87
  </script>
88
  </body>
 
6
  <title>Minimalist White Circle with FPS</title>
7
  <style>
8
  body {
9
+ margin: 0;
10
+ overflow: hidden;
11
  }
12
  canvas {
13
+ display: block;
14
  }
15
  </style>
16
  </head>
17
  <body>
18
  <canvas id="canvas"></canvas>
19
  <script>
20
+ const canvas = document.getElementById('canvas'),
21
+ context = canvas.getContext('2d'),
22
+ versionText = 'v1.0.0';
23
+ let fps = 60,
24
+ lastFrameTime = performance.now();
25
+
 
26
  function initializeCanvas() {
27
  canvas.width = window.innerWidth;
28
  canvas.height = window.innerHeight;
29
  context.fillStyle = 'black';
30
  context.fillRect(0, 0, canvas.width, canvas.height);
31
  }
32
+
33
  function drawWhiteCircle() {
34
+ const centerX = canvas.width / 2,
35
+ centerY = canvas.height / 2,
36
+ radius = Math.min(canvas.width, canvas.height) * 0.00625;
 
37
  context.beginPath();
38
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
39
  context.strokeStyle = 'white';
40
+ context.lineWidth = 0.125 * parseFloat(getComputedStyle(document.documentElement).fontSize);
41
  context.stroke();
42
  }
43
+
44
  function drawVersionText() {
45
  context.font = '1em Arial';
46
  context.fillStyle = 'white';
 
48
  context.textBaseline = 'bottom';
49
  context.fillText(versionText, canvas.width - 10, canvas.height - 10);
50
  }
51
+
52
  function drawFPS() {
53
  context.font = '1em Arial';
54
  context.fillStyle = 'white';
 
56
  context.textBaseline = 'top';
57
  context.fillText(fps.toFixed(1) + ' fps', 10, 10);
58
  }
59
+
60
  function updateFPS() {
61
+ const now = performance.now(),
62
+ deltaTime = now - lastFrameTime;
63
  lastFrameTime = now;
64
+ if (deltaTime > 0) {
65
+ const currentFPS = 1000 / deltaTime;
66
+ if (!isNaN(currentFPS) && isFinite(currentFPS)) {
67
+ fps = fps + (currentFPS - fps) * 0.1;
68
+ }
69
+ }
70
  }
71
+
72
  function draw() {
73
  initializeCanvas();
74
  drawWhiteCircle();
75
  drawVersionText();
76
  drawFPS();
77
  }
78
+
79
  function loop() {
80
  updateFPS();
81
  draw();
82
  requestAnimationFrame(loop);
83
  }
84
+
85
  loop();
 
86
  window.addEventListener('resize', draw);
87
  </script>
88
  </body>