add remove object feature

examples/README.md

@@ -0,0 +1,3 @@
+# Local Examples
+
+These are some local example and do not meant to be hosted in production (but they may be).

examples/delta-time/script.ts

@@ -1,4 +1,4 @@
-import { Engine, Point } from '../../lib';
+import { Engine } from '../../lib';
 
 const engine = new Engine(
   document.getElementById('canvas') as HTMLCanvasElement,
@@ -10,7 +10,7 @@ const engine = new Engine(
   },
 );
 
-const { renderer, input } = engine;
+const { renderer } = engine;
 
 const random = () => {
   return Math.random();
@@ -22,17 +22,21 @@ document.getElementById('checkbox')?.addEventListener('change', (e) => {
   engine.options.engineOptions!.clearEachFrame = (e.target as any).checked;
 });
 
-engine.update = (engine, deltaTime) => {
-  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,
-  });
+var lastTime = Date.now();
 
-  point.update = (_) => {
-    point.options.x += speed * deltaTime;
-    point.options.x += speed * deltaTime;
-  };
+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,
+    });
+    setTimeout(() => {
+      renderer.removeObject(point);
+    }, 200);
+    lastTime = Date.now();
+  }
 };

examples/index.html

@@ -22,6 +22,7 @@ <h2>We got examples for you</h2>
       <li><a href="/mouse-inputs/">Mouse Inputs</a></li>
       <li><a href="/keyboard-inputs/">Keyboard Inputs</a></li>
       <li><a href="/update/">Update</a></li>
+      <li><a href="/delta-time/">Delta Time</a></li>
     </ul>
     <script type="module" src="/src/main.ts"></script>
   </body>

lib/render/engine.ts

@@ -76,16 +76,16 @@ export class Engine {
 
     let lowLimit = 1;
     let lastRenderTime = Date.now();
+    let deltaTime = 1;
     const render = () => {
-      let deltaTime = Date.now() - lastRenderTime;
       if (deltaTime < lowLimit) deltaTime = lowLimit;
-
       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);
     };
@@ -104,7 +104,8 @@ export class Engine {
     _engine: Engine,
     _deltaTime: number,
   ) => {};
-  start: (engine: Engine) => void = (_engine: Engine) => {};
+
+  start: (_engine: Engine) => void = (_engine: Engine) => {};
 
   // reset single frame events
   resetEvent() {

lib/render/renderer.ts

@@ -1,4 +1,4 @@
-import { forEach } from 'lodash';
+import _, { forEach } from 'lodash';
 import { DefaultPointOptions } from '../constants';
 import { BaseObjectInterface, BaseRenderer, PointOptions } from '../types';
 import { Point } from './objects';
@@ -19,7 +19,9 @@ export class Renderer extends BaseRenderer {
 
   render(deltaTime: number) {
     forEach(this.objects, (object) => {
-      object.checkDrawConditionAndDraw(deltaTime);
+      if (object) {
+        object.checkDrawConditionAndDraw(deltaTime);
+      }
     });
   }
 
@@ -29,15 +31,23 @@ export class Renderer extends BaseRenderer {
    * @param {BaseObjectInterface<T>} object
    * @returns
    */
-  addObject<T>(object: T): T {
-    this.objects.push(object as BaseObjectInterface<T>);
+  addObject<T extends BaseObjectInterface>(object: T): T {
+    this.objects[object.id] = object as BaseObjectInterface<T>;
     (object as BaseObjectInterface<T>).renderer = this;
     return object;
   }
 
+  removeObject<T extends BaseObjectInterface>(object: T) {
+    delete this.objects[object.id];
+  }
+
+  getObject(id: string) {
+    return this.objects[id];
+  }
+
   point(options: PointOptions = DefaultPointOptions) {
     const point = new Point(options, this);
-    this.objects.push(point);
+    this.objects[point.id] = point;
     return point;
   }
 }

lib/types/renderer.ts

@@ -11,11 +11,11 @@ import { BaseObjectInterface } from './shapes';
 
 export abstract class BaseRenderer {
   context: CanvasRenderingContext2D;
-  objects: BaseObjectInterface[];
+  objects: Record<string, BaseObjectInterface>;
 
   constructor(context: CanvasRenderingContext2D) {
     this.context = context;
-    this.objects = [];
+    this.objects = {};
   }
   abstract render(deltaTime: number): void;
 }

lib/types/shapes.ts

@@ -6,7 +6,7 @@ export interface BaseObjectInterface<T = unknown> {
   /**
    * A Unique Id that will help us identify each object in the Engine
    */
-  id?: string;
+  id: string;
   renderer: Renderer;
 }