Corrected matrix transformation ordering to prevent shearing on shape…

… rotation. Refactored hit detection logic & base rotation handling logic to compensate for changes. Aspect ratio scaling now centralized in Interaction Service. Bounding box refactor needed next. Temp board color changes.

src/main.ts

@@ -56,7 +56,7 @@ async function webGPURendering() {
         { r: 0, g: 0, b: 0, a: 1 }, 
         2
     );
-    diamond.x = 0;
+    diamond.x = 1;
     diamond.y = 0;
 
     const redDiamond = shapeFactory.createDiamond(
@@ -108,8 +108,8 @@ async function webGPURendering() {
         { r: 0, g: 0, b: 0, a: 1 }, 
         0
     );
-    square.x = -.1;
-    square.y = -.1;
+    square.x = 0;
+    square.y = 0;
 
     const circle = shapeFactory.createCircle(
         .25, 
@@ -120,19 +120,10 @@ async function webGPURendering() {
     circle.x = 0.5;
     circle.y = 0.5;
 
-    const circle2 = shapeFactory.createCircle(
-        .25, 
-        froggyGreen, 
-        { r: 0, g: 0, b: 0, a: 1 }, 
-        0
-    );
-    circle2.x = 0;
-    circle2.y = 0;
 
     // Add the shapes to the scene graph
     // sceneGraph.root.addChild(rect); 
     sceneGraph.root.addChild(circle);
-    sceneGraph.root.addChild(circle2);
     sceneGraph.root.addChild(diamond);
     sceneGraph.root.addChild(tri);
     sceneGraph.root.addChild(invertedTri);

src/renderer/render-cache.ts

@@ -103,7 +103,9 @@ export class RenderCache {
         const resolution = new Float32Array([canvas.width, canvas.height, 0.0, 0.0]);
         const worldMatrix = this._interactionService.getWorldMatrix();
         const localMatrix = shape.localMatrix;
-        const shapeColor = new Float32Array([shape.fillColor.r, shape.fillColor.g, shape.fillColor.b, shape.fillColor.a]);
+        // const shapeColor = new Float32Array([shape.fillColor.r, shape.fillColor.g, shape.fillColor.b, shape.fillColor.a]);
+        const shapeColor = new Float32Array([91/255,75/255,121/255, shape.fillColor.a]);
+
 
         // Combine all data into a single Float32Array
         const uniformData = new Float32Array(160); // 160 bytes / 4 = 40 floats

src/renderer/render-strategies/webgpu-render-strategy.ts

@@ -120,9 +120,30 @@ export class WebGPURenderStrategy implements RenderStrategy {
         new Uint16Array(indexBuffer.getMappedRange()).set(indices);
         indexBuffer.unmap();
 
-        passEncoder.setPipeline(this.boundingBoxPipeline); // Assuming you have a basic pipeline for drawing lines
+        // Create and update the resolution uniform buffer
+        const resolutionUniformData = new Float32Array([this.canvas.width, this.canvas.height, 0.0, 0.0]);
+        const resolutionUniformBuffer = this.device.createBuffer({
+            size: resolutionUniformData.byteLength,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+            mappedAtCreation: true,
+        });
+
+        new Float32Array(resolutionUniformBuffer.getMappedRange()).set(resolutionUniformData);
+        resolutionUniformBuffer.unmap();
+
+        // Create a bind group to bind the resolution uniform buffer
+        const bindGroup = this.device.createBindGroup({
+            layout: this.boundingBoxPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: { buffer: resolutionUniformBuffer } }
+            ],
+        });
+
+        // Set the pipeline and bind group
+        passEncoder.setPipeline(this.boundingBoxPipeline);
         passEncoder.setVertexBuffer(0, vertexBuffer);
         passEncoder.setIndexBuffer(indexBuffer, 'uint16');
+        passEncoder.setBindGroup(0, bindGroup);
 
         // Draw the bounding box (outline)
         passEncoder.drawIndexed(8, 1, 0, 0);
@@ -277,15 +298,16 @@ export class WebGPURenderStrategy implements RenderStrategy {
         });
 
         // Circle drawing logic using triangle-list
-        const numSegments = 60; // Increase number of segments for smoother circle
+        // Increase number of segments = smoother circle
+        const numSegments = 60; 
         const angleStep = (Math.PI * 2) / numSegments;
 
         const vertices: number[] = [];
 
-        // Create the circle vertices using a triangle list approach
+        // Create the circle vertices w/ triangle list approach
         for (let i = 0; i < numSegments; i++) {
-            // Center of the circle for the current triangle
-            vertices.push(0.0, 0.0); // center vertex
+            // Center circle vertex for current triangle
+            vertices.push(0.0, 0.0);
 
             // First perimeter point of the triangle
             const angle1 = i * angleStep;