Refactored examples. Added collision detection.

Author: JohnieWalkerCZ

src/Collider.ts

@@ -29,11 +29,11 @@ export class Renderer {
 
             if (pixelMap.has(key)) {
                 const existingPixel = pixelMap.get(key)!;
-
-                if (pixel.color.a >= 0.999) {
+                const threshold = 0.999;
+                if (pixel.color.a >= threshold) {
                     pixelMap.set(key, pixel);
                 }
-                else if (existingPixel.color.a < 0.999) {
+                else if (existingPixel.color.a < threshold) {
                     const blended = Renderer.blendPixel(existingPixel, pixel);
                     pixelMap.set(key, blended);
                 }

src/Renderer.ts

@@ -0,0 +1,90 @@
+import { CanvasDrawer } from "../Utils.js";
+import { Renderer } from "../Renderer.js";
+import { Collection } from "../shapes/Collection.js";
+import { Circle } from "../shapes/Circle.js";
+import { Rectangle } from "../shapes/Rectangle.js"
+import { Polygon } from "../shapes/Polygon.js";
+import { RegularPolygon } from "../shapes/RegularPolygon.js";
+import { LineSegment } from "../shapes/LineSegment.js";
+
+export function runBasicShapesExample() {
+    const width = 64;
+    const height = 64;
+    const drawer = new CanvasDrawer('myCanvas', width, height, 0);
+    drawer.clear('#ffffff');
+
+    const renderer = new Renderer(width, height, { r: 255, g: 255, b: 255, a: 1 });
+
+    const scene = new Collection({ x: 0, y: 0, color: { r: 0, g: 0, b: 0, a: 1 } });
+
+    // Add basic shapes
+    const circle = new Circle({
+        x: 16, y: 16,
+        color: { r: 255, g: 0, b: 0, a: 1 },
+        radius: 8,
+        fill: true
+    });
+    scene.addShape(circle);
+
+    const rectangle = new Rectangle({
+        x: 40, y: 10,
+        color: { r: 0, g: 255, b: 0, a: 1 },
+        width: 12, height: 16,
+        fill: true
+    });
+    scene.addShape(rectangle);
+
+    const polygon = new Polygon({
+        x: 20, y: 48,
+        color: { r: 0, g: 0, b: 255, a: 1 },
+        vertices: [
+            { x: 0, y: -8, relative: true },
+            { x: 8, y: 8, relative: true },
+            { x: -8, y: 8, relative: true },
+        ],
+        fill: true
+    });
+    scene.addShape(polygon);
+
+    const polygon2 = new Polygon({
+        x: 35, y: 28,
+        color: { r: 0, g: 255, b: 255, a: 1 },
+        vertices: [
+            { x: 0, y: -8, relative: true },
+            { x: 8, y: 8, relative: true },
+            { x: -8, y: 8, relative: true },
+            { x: -16, y: 0, relative: true },
+        ],
+        fill: true
+    });
+    scene.addShape(polygon2);
+
+    const regular_polygon = new RegularPolygon({
+        x: 48,
+        y: 48,
+        sides: 6,
+        sideLength: 8,
+        fill: true,
+        color: { r: 255, g: 165, b: 0, a: 1 }
+    });
+    scene.addShape(regular_polygon);
+
+    const line = new LineSegment({
+        x: 0, y: 20,
+        x2: 33, y2: 43,
+        color: { r: 125, g: 0, b: 120, a: 1 },
+    });
+    scene.addShape(line);
+    const start = performance.now();
+    const pixels = renderer.render([scene], {
+        screen_width: width,
+        screen_height: height,
+        antialias: true
+    });
+    const end = performance.now();
+    console.log(`Avg: ${(end - start).toFixed(2)} ms`);
+
+    for (const px of pixels) {
+        drawer.setPixel(px.x, px.y, px.color);
+    }
+}

src/examples.ts

@@ -0,0 +1,72 @@
+import { CanvasDrawer } from '../Utils.js';
+import { Renderer } from '../Renderer.js';
+import { Collection } from '../shapes/Collection.js';
+import { Rectangle } from '../shapes/Rectangle.js';
+import { Circle } from '../shapes/Circle.js';
+
+export function runCollisionExample() {
+    const width = 64;
+    const height = 64;
+    const drawer = new CanvasDrawer('myCanvas', width, height, 1);
+    drawer.clear('#ffffff');
+
+    const renderer = new Renderer(width, height, { r: 255, g: 255, b: 255, a: 1 });
+
+    const scene = new Collection({ x: 0, y: 0, color: { r: 0, g: 0, b: 0, a: 1 } });
+
+    const ground = new Rectangle({
+        x: 0, y: 56,
+        color: { r: 100, g: 100, b: 100, a: 1 },
+        width: 64, height: 8,
+        fill: true
+    });
+    scene.addShape(ground);
+    ground.addCollider();
+
+    const fallingBox = new Rectangle({
+        x: 28, y: 0,
+        color: { r: 200, g: 0, b: 0, a: 1 },
+        width: 8, height: 8,
+        fill: true
+    });
+    scene.addShape(fallingBox);
+    fallingBox.addCollider();
+
+    const fallingSphere = new Circle({
+        x: 25, y: 20,
+        color: { r: 0, g: 0, b: 200, a: 1 },
+        radius: 6,
+        fill: true
+    });
+    scene.addShape(fallingSphere);
+    fallingSphere.addCollider();
+
+    let count = 0;
+    let sum = 0;
+    setInterval(() => {
+        fallingBox.translate(0, 1);
+        fallingSphere.translate(0, 1);
+        if (fallingBox.intersects(ground) || fallingBox.intersects(fallingSphere)) {
+            fallingBox.translate(0, -1); // Move back up
+        }
+        if (fallingSphere.intersects(ground)) {
+            fallingSphere.translate(0, -1); // Move back up
+        }
+        const start = performance.now();
+        const pixels = renderer.render([scene], { screen_height: height, screen_width: width, antialias: true });
+        const end = performance.now();
+        sum += end - start;
+        count++;
+        if (count % 60 == 0) {
+            console.log(`Avg: ${(sum / count).toFixed(2)} ms`);
+            count = 0;
+            sum = 0;
+        }
+
+        drawer.clear('#ffffff');
+        for (const pixel of pixels) {
+            drawer.setPixel(pixel.x, pixel.y, pixel.color);
+        }
+
+    }, 1000 / 10);
+}