From 52799a6bf0bc11e0a1d8a50b12af7d948c0fe4e4 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Sun, 21 May 2023 09:41:19 +0100
Subject: [PATCH] Calculate FPS

---
 src/utils/delta-time-calculator.ts | 30 +++++++++++++++++++++++++-----
 src/utils/exponential-decay.ts     |  9 +++++++++
 2 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 src/utils/exponential-decay.ts

diff --git a/src/utils/delta-time-calculator.ts b/src/utils/delta-time-calculator.ts
index 3cb6076..5705f78 100644
--- a/src/utils/delta-time-calculator.ts
+++ b/src/utils/delta-time-calculator.ts
@@ -1,7 +1,16 @@
-export class DeltaTimeCalculator {
-  private previousTime: DOMHighResTimeStamp | null = null;
+import { clamp } from './clamp';
+import { exponentialDecay } from './exponential-decay';
 
-  constructor(private readonly maxDeltaTimeInSeconds: number = 1 / 30) {
+export class DeltaTimeCalculator {
+  private static FPS_EXPONENTIAL_DECAY_STRENGTH = 0.1;
+
+  private previousTime: DOMHighResTimeStamp | null = null;
+  private deltaTimeAccumulator: number | null = null;
+
+  constructor(
+    private readonly maxDeltaTimeInSeconds: number = 1 / 30,
+    private readonly minDeltaTimeInSeconds: number = 1 / 240
+  ) {
     document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
   }
 
@@ -14,8 +23,15 @@ export class DeltaTimeCalculator {
 
     const delta = currentTime - this.previousTime;
     this.previousTime = currentTime;
-    return 1 / 60;
-    return Math.min(delta / 1000, this.maxDeltaTimeInSeconds);
+    const deltaInSeconds = delta / 1000;
+
+    this.deltaTimeAccumulator = exponentialDecay({
+      accumulator: this.deltaTimeAccumulator ?? deltaInSeconds,
+      nextValue: deltaInSeconds,
+      biasOfNextValue: DeltaTimeCalculator.FPS_EXPONENTIAL_DECAY_STRENGTH,
+    });
+
+    return clamp(delta / 1000, this.minDeltaTimeInSeconds, this.maxDeltaTimeInSeconds);
   }
 
   private handleVisibilityChange() {
@@ -23,4 +39,8 @@ export class DeltaTimeCalculator {
       this.previousTime = null;
     }
   }
+
+  public get fps() {
+    return 1 / this.deltaTimeAccumulator;
+  }
 }
diff --git a/src/utils/exponential-decay.ts b/src/utils/exponential-decay.ts
new file mode 100644
index 0000000..3f13b6a
--- /dev/null
+++ b/src/utils/exponential-decay.ts
@@ -0,0 +1,9 @@
+export const exponentialDecay = ({
+  accumulator,
+  nextValue,
+  biasOfNextValue,
+}: {
+  accumulator: number;
+  nextValue: number;
+  biasOfNextValue: number;
+}) => accumulator * (1 - biasOfNextValue) + nextValue * biasOfNextValue;