Hugging Face's logo

Spaces:
p3nGu1nZz
/
plasma-arc
Running

App Files Community
p3nGu1nZz commited on
Commit
ce4f9e0
·
1 Parent(s): 7a6ace8

smaller circle and add fps counter

Browse files
Files changed (1) hide show
  1. index.html +39 -5
index.html CHANGED
@@ -3,8 +3,16 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Minimalist White Circle</title>
7
- <link rel="stylesheet" href="style.css">
 
 
 
 
 
 
 
 
8
  </head>
9
  <body>
10
  <canvas id="canvas"></canvas>
@@ -13,6 +21,8 @@
13
  const context = canvas.getContext('2d');
14
 
15
  const versionText = 'v1.0.0';
 
 
16
 
17
  function initializeCanvas() {
18
  canvas.width = window.innerWidth;
@@ -24,12 +34,12 @@
24
  function drawWhiteCircle() {
25
  const centerX = canvas.width / 2;
26
  const centerY = canvas.height / 2;
27
- const radius = Math.min(canvas.width, canvas.height) * 0.0125; // 1.25% of the smaller dimension
28
 
29
  context.beginPath();
30
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
31
  context.strokeStyle = 'white';
32
- context.lineWidth = 0.25 * parseFloat(getComputedStyle(document.documentElement).fontSize); // 0.25em stroke
33
  context.stroke();
34
  }
35
 
@@ -41,13 +51,37 @@
41
  context.fillText(versionText, canvas.width - 10, canvas.height - 10);
42
  }
43
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  function draw() {
45
  initializeCanvas();
46
  drawWhiteCircle();
47
  drawVersionText();
 
 
 
 
 
 
 
48
  }
49
 
50
- draw();
51
 
52
  window.addEventListener('resize', draw);
53
  </script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
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>
 
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;
 
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
 
 
51
  context.fillText(versionText, canvas.width - 10, canvas.height - 10);
52
  }
53
 
54
+ function drawFPS() {
55
+ context.font = '1em Arial';
56
+ context.fillStyle = 'white';
57
+ context.textAlign = 'left';
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>