add support for the line plugin and add example

himanshurajora · Jul 20, 2024 · 7adb62e · 7adb62e
1 parent 827d6a1
commit 7adb62e
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 0 deletions.
diff --git a/examples/etc/line/index.html b/examples/etc/line/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css"
+    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
+
+    <!-- and it's easy to individually load additional languages -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/go.min.js"></script>
+    <script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"
+    />
+    <link rel="stylesheet" href="/styles.css" />
+
+    <script>
+      hljs.addPlugin(new CopyButtonPlugin());
+      hljs.highlightAll();
+    </script>
+    <title>MiniPoint Colors</title>
+  </head>
+  <body>
+    <div id="app">A bunch of lines</div>
+    <div class="main-area">
+      <canvas id="canvas"></canvas>
+      <pre><code class="language-javascript">
+import { Engine, Point, Line } from '../../../lib';
+
+const engine = new Engine(
+    document.getElementById('canvas') as HTMLCanvasElement,
+    {
+    engineOptions: {
+        width: 600,
+        height: 400,
+    },
+    },
+);
+
+const { renderer } = engine;
+
+const lines: Line[] = [];
+let lastTime = 0;
+engine.update = () => {
+    const currentTime = performance.now();
+    // draw a line each second
+    if (currentTime - lastTime > 1000) {
+    const line = new Line({
+        x1: Math.random() * 600,
+        y1: Math.random() * 400,
+        x2: Math.random() * 600,
+        y2: Math.random() * 400,
+        color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
+        Math.random() * 255
+        })`,
+        stroke: Math.random() * 10,
+    });
+
+    lines.push(line);
+    renderer.addObject(line);
+    lastTime = currentTime;
+    }
+};     
+      </code></pre>
+    </div>
+    <script type="module" src="./script.ts"></script>
+  </body>
+</html>
diff --git a/examples/etc/line/script.ts b/examples/etc/line/script.ts
@@ -0,0 +1,36 @@
+import { Engine, Point, Line } from '../../../lib';
+
+const engine = new Engine(
+  document.getElementById('canvas') as HTMLCanvasElement,
+  {
+    engineOptions: {
+      width: 600,
+      height: 400,
+    },
+  },
+);
+
+const { renderer } = engine;
+
+const lines: Line[] = [];
+let lastTime = 0;
+engine.update = () => {
+  const currentTime = performance.now();
+  // draw a line each second
+  if (currentTime - lastTime > 1000) {
+    const line = new Line({
+      x1: Math.random() * 600,
+      y1: Math.random() * 400,
+      x2: Math.random() * 600,
+      y2: Math.random() * 400,
+      color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
+        Math.random() * 255
+      })`,
+      stroke: Math.random() * 10,
+    });
+
+    lines.push(line);
+    renderer.addObject(line);
+    lastTime = currentTime;
+  }
+};
diff --git a/examples/index.html b/examples/index.html
@@ -23,6 +23,7 @@ <h2>We've got examples for you</h2>
       <li><a href="/minipoint/keyboard-inputs/">Keyboard Inputs</a></li>
       <li><a href="/minipoint/update/">Update</a></li>
       <li><a href="/minipoint/delta-time/">Delta Time</a></li>
+      <li><a href="/minipoint/etc/line/">Line</a></li>
     </ul>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/examples/vite.config.js b/examples/vite.config.js
@@ -14,6 +14,7 @@ export default defineConfig({
         update: resolve(__dirname, 'update/index.html'),
         keyboard_inputs: resolve(__dirname, 'keyboard-inputs/index.html'),
         delta_time: resolve(__dirname, 'delta-time/index.html'),
+        line: resolve(__dirname, 'etc/line/index.html'),
       },
     },
   },

diff --git a/lib/index.ts b/lib/index.ts
@@ -4,6 +4,7 @@ export * from './physics';
 export * from './render';
 export * from './common';
 export * from './input';
+export * from './plugins';
 // Simple things
 import * as MiniPoint from '.';
 console.log("%cWelcome! to minipoint. Let's Play...", 'color: green');

diff --git a/lib/plugins/index.ts b/lib/plugins/index.ts
@@ -0,0 +1,9 @@
+// Purpose: Exports all plugins.
+/**
+ * @author @himanshurajora
+ * Reason for keeping line, circle and other objects in plugins is that they are not core to the engine.
+ * I only want to support point but still if someone wants to use line, circle or other objects they can use it.
+ * But they will never be a part of core minipoint engine, these objects are useful for props and visualization improvements in the experiments.
+ */
+
+export * from './line';
diff --git a/lib/plugins/line.ts b/lib/plugins/line.ts
@@ -0,0 +1,35 @@
+import {
+  BaseObject,
+  DefaultDrawableObjectOptions,
+  DrawableObjectOptions,
+} from '../render';
+import { Renderer } from '../render/renderer';
+
+export type LineOptions = DrawableObjectOptions<{
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  color?: string;
+  stroke?: number;
+}>;
+
+export class Line extends BaseObject<LineOptions, Line> {
+  constructor(options: LineOptions, renderer?: Renderer) {
+    super(options, renderer);
+    this.options = {
+      ...DefaultDrawableObjectOptions,
+      ...options,
+    };
+  }
+  override draw() {
+    console.log('Called');
+    this.context.beginPath();
+    this.context.moveTo(this.options.x1, this.options.y1);
+    this.context.lineTo(this.options.x2, this.options.y2);
+    if (this.options.color) this.context.strokeStyle = this.options.color;
+    if (this.options.stroke) this.context.lineWidth = this.options.stroke;
+    this.context.stroke();
+    return this;
+  }
+}