Shell rendering

buildwin.cmd

@@ -1,4 +1,4 @@
 @REM rmdir dist\
 @REM mkdir dist\public
 @REM xcopy .\assets .\dist\public /e /h /y /f
-tsc && webpack --config .\webpack\development.js
+tsc && webpack --config .\webpack\development.js --watch

src/client/client.ts

@@ -1,4 +1,5 @@
 import { Mesh, MeshImport } from "./mesh";
+import { Canvas } from "./render";
 
 
 const request_mesh_handler = (e: ProgressEvent<XMLHttpRequestEventTarget>) => {
@@ -14,17 +15,7 @@ const request_mesh_listeners = (xhr: XMLHttpRequest) => {
     xhr.addEventListener("abort", request_mesh_handler);
 }
 
-const request_mesh = (filename: string) => {
-    let request = new XMLHttpRequest();
-    request_mesh_listeners(request);
-    request.onreadystatechange = function() {
-        if (request.readyState == XMLHttpRequest.DONE) {
-            console.log(request.responseText);
-            const mesh = MeshImport.parse(request.responseText);
-            console.log(`Got mesh array at ${mesh.name}`);
-            console.log(mesh);
-        }
-    }
+const request_mesh = (request: XMLHttpRequest, filename: string) => {
     request.open('GET', `http://localhost:${3000}/mesh/${filename}`, true);
     request.send(null);
     return request;
@@ -33,5 +24,19 @@ const request_mesh = (filename: string) => {
 // Wait for page load before executing code
 window.addEventListener('load', function() {
     console.log('PAGE LOADED');
-    const req = request_mesh('clover.obj');
-})
+    
+    const canvas = new Canvas(<HTMLCanvasElement>this.document.getElementById('draw'));
+    const req = new XMLHttpRequest();
+
+    req.onreadystatechange = function() {
+        if (req.readyState == XMLHttpRequest.DONE) {
+            console.log(req.responseText);
+            const mesh = MeshImport.parse(req.responseText);
+            console.log(`Got mesh array at ${mesh.name}`);
+            console.log(mesh);
+
+            canvas.draw_shells(mesh.shells);
+        }
+    }
+    request_mesh(req, 'clover.obj');
+});

src/client/math/shell.ts

@@ -5,6 +5,7 @@ class Shell {
     public centerpoint: Vector2 = new Vector2();
     public rotation: number = 0;
     public scale: number = 1.0;
+    public path: Path2D = new Path2D();
 
     constructor(private triangles: Triangle[]) {
     }
@@ -47,7 +48,8 @@ class Shell {
         this.triangles.push(t);
     }
 
-    public calculate_centerpoint() {
+    public precompute() {
+        // First, calculate centerpoint
         let uvs = Triangle.find_unique_uvs(this.triangles);
         
         this.centerpoint = new Vector2();
@@ -56,9 +58,23 @@ class Shell {
         });
         this.centerpoint = Vector2.Divide(this.centerpoint, uvs.length);
 
+        // Apply centerpoint to all children
         this.triangles.forEach((t: Triangle) => {
             t.set_centerpoint(this.centerpoint);
         });
+
+        // Now compute strokes
+        this.generate_path();
+    }
+    private generate_path() {
+        this.path = new Path2D();
+        
+        this.triangles.forEach((t: Triangle) => {
+            this.path.moveTo(t.uvs[0].x, t.uvs[0].y);
+            this.path.lineTo(t.uvs[1].x, t.uvs[1].y);
+            this.path.lineTo(t.uvs[2].x, t.uvs[2].y);
+            this.path.lineTo(t.uvs[0].x, t.uvs[0].y);
+        });
     }
 }
 

src/client/mesh/import.ts

@@ -110,7 +110,7 @@ class MeshImport {
 
         // Finally, calculate shells
         shells.forEach((s: Shell) => {
-            s.calculate_centerpoint();
+            s.precompute();
         });
 
         // Generate corresponding mesh

src/client/render/canvas.ts

@@ -0,0 +1,41 @@
+import { Shell } from '../math';
+import shell from '../math/shell';
+
+class Canvas {
+    protected context: CanvasRenderingContext2D;
+    constructor(private element: HTMLCanvasElement) {
+        this.context = <CanvasRenderingContext2D>element.getContext('2d');
+    }
+
+    public clear() {
+        this.context.clearRect(0, 0, this.element.width, this.element.height);
+    }
+
+    private transform_base() {
+        this.context.translate(0, this.element.height);
+        this.context.scale(this.element.width, -this.element.height);
+    }
+
+    public draw_shells(shells: Shell[]) {
+        
+        this.context.fillStyle = '#888888';
+        this.context.lineCap = 'round';
+        this.context.lineWidth = 0.0003;
+        this.context.strokeStyle = '#000000';
+
+        shells.forEach((s: Shell) => {
+            this.context.resetTransform();
+            this.transform_base();
+            this.context.rotate(s.rotation);
+            this.context.translate(s.centerpoint.x, s.centerpoint.y);
+            this.context.scale(s.scale, s.scale);
+
+            this.context.fill(s.path);
+            this.context.stroke(s.path);
+        });
+
+        console.log("Canvas drawn");
+    }
+};
+
+export { Canvas as default };

src/client/render/index.ts

@@ -0,0 +1,3 @@
+import Canvas from './canvas';
+
+export { Canvas };