update the delta time implementation

himanshurajora · Jul 14, 2024 · 92eaed4 · 92eaed4
1 parent b429e13
commit 92eaed4
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 22 deletions.
diff --git a/examples/delta-time/index.html b/examples/delta-time/index.html
@@ -27,6 +27,11 @@
   </head>
   <body>
     <div id="app">See how delta time works</div>
+    <p>Upper Arrow to increase points and Lower Arrow to decrease points</p>
+    <p>
+      Left Arrow to decrease the speed of the points and Right Arrow to increase the speed
+    </p>
+
     <div class="main-area">
       <canvas id="canvas"></canvas>
       <pre><code class="language-javascript">

diff --git a/examples/delta-time/script.ts b/examples/delta-time/script.ts
@@ -1,4 +1,4 @@
-import { Engine } from '../../lib';
+import { Engine, Point } from '../../lib';
 
 const engine = new Engine(
   document.getElementById('canvas') as HTMLCanvasElement,
@@ -16,27 +16,67 @@ const random = () => {
   return Math.random();
 };
 
-const speed = 1;
 
 document.getElementById('checkbox')?.addEventListener('change', (e) => {
   engine.options.engineOptions!.clearEachFrame = (e.target as any).checked;
 });
 
-var lastTime = Date.now();
+
+let n = 1000;
+
+let points: Point[] = [];
+function createPoints() {
+  points = [];
+  let x = 0;
+  for (let i = 0; i < n; i++) {
+    const point = new Point({
+      x: random() * 30 + x,
+      y: random() * engine.height,
+      radius: 1,
+      color: `rgba(${random() * 255},${random() * 255},${random() * 255},1)`,
+    });
+    points.push(point);
+    renderer.addObject(point);
+  }
+}
+
+createPoints();
+
+
+let velocity = 100;
 
 engine.update = (engine, deltaTime) => {
-  var currentTime = Date.now();
-  if (currentTime - lastTime > 50) {
-    const point = renderer.point({
-      show: true,
-      x: Math.random() * engine.width,
-      y: Math.random() * engine.height,
-      color: `rgb(${random() * 255}, ${random() * 255}, ${random() * 255})`,
-      radius: random() * 10,
+  if (engine.input.keyboard.currentDownKey === "arrowright") {
+    velocity += 1;
+  }
+  if (engine.input.keyboard.currentDownKey === "arrowleft") {
+    velocity -= 1;
+  }
+
+  if (engine.input.keyboard.currentDownKey === "arrowup") {
+    n *= 1.2;
+    // remove all points
+    points.forEach(point => {
+      renderer.removeObject(point);
     });
-    setTimeout(() => {
+    velocity = 100;
+    console.log({n});
+    createPoints();
+  }
+
+  if (engine.input.keyboard.currentDownKey === "arrowdown") {
+    n *= 0.95;
+    // remove all points
+    points.forEach(point => {
       renderer.removeObject(point);
-    }, 200);
-    lastTime = Date.now();
+    });
+    velocity = 100;
+    console.log({n});
+    createPoints();
   }
+
+
+  points.forEach(point => {
+    point.options.x += velocity * deltaTime;
+  })
 };
diff --git a/lib/render/engine.ts b/lib/render/engine.ts
@@ -74,24 +74,25 @@ export class Engine {
     this.input = new Input(this);
     this.start(this);
 
-    let lowLimit = 1;
-    let lastRenderTime = Date.now();
-    let deltaTime = 1;
-    const render = () => {
-      if (deltaTime < lowLimit) deltaTime = lowLimit;
+    let previousTimestamp = 0;
+    const render = (currentTimestamp: number) => {
+      const deltaTime = (currentTimestamp - previousTimestamp) / 1000;
+      previousTimestamp = currentTimestamp;
       this.update(this, deltaTime);
       if (options.engineOptions!.clearEachFrame) {
         this.context?.clearRect(0, 0, this.width, this.height);
       }
       this.renderer.render(deltaTime);
       this.resetEvent();
-      deltaTime = Date.now() - lastRenderTime;
-      lastRenderTime = Date.now();
       requestAnimationFrame(render);
     };
 
+
     this.renderer = new Renderer(this);
-    render();
+    requestAnimationFrame((timestamp) => {
+      previousTimestamp = timestamp;
+      requestAnimationFrame(render);
+    });
 
     // Set useful options to window
     // INFO: Make sure whenever new Engine is created it will overwrite the default