Version/0.2.0

lib/index.js

@@ -1,6 +1,6 @@
-import { Triangle, Rectangle, Polygon, ImageShape } from "./shapes/shapes2d.js";
+import { Triangle, Rectangle, Polygon, ImageShape, Group } from "./shapes/shapes2d.js";
 import { Box } from "./shapes/shapes3d.js";
-import { initCanvas } from "./canvas/canvas.js";
+import { initCanvas } from "./canvas";
 import { Vector } from "./vector";
 import { Matrix } from "./matrix";
 import { Point, Point3D, Pixel } from "./shapes/point.js";
@@ -10,6 +10,7 @@ export {
     Rectangle,
     Triangle,
     ImageShape,
+    Group,
     Box,
     initCanvas,
     Vector,

lib/shapes/shapes2d.js

@@ -79,9 +79,34 @@ class Transform {
         ];
 
         this.#calculatePoints(scaleAffineMatrix);
+
+
+        if (this instanceof ImageShape) {
+
+            for (let j = 0; j < this.h - 1; ++j) {
+                for (let i = 0; i < this.w - 1; ++i) {
+                    const point1 = this.points[j * this.w + i];
+                    const point2 = this.points[j * this.w + i + 1];
+                    const point3 = this.points[(j + 1) * this.w + i];
+                    const point4 = this.points[(j + 1) * this.w + i + 1];
+                    const firstIntermediatePoints = this.#linearInterpolation(point1, point2, scaleX);
+                    const secondIntermediatePoints = this.#linearInterpolation(point3, point4, scaleX);
+
+
+                    for (let i = 0; i < firstIntermediatePoints.length; i++) {
+                        for (const intermediatePoint of this.#linearInterpolation(firstIntermediatePoints[i], secondIntermediatePoints[i], scaleY)) {
+                            this.points.push(intermediatePoint);
+                        }
+                    }
+                }
+            }
+            this.w *= scaleX;
+            this.h *= scaleY;
+        }
+
     }
 
-    #calculatePoints (affineMatrix) {
+    #calculatePoints(affineMatrix) {
         const pointsLength = this.points.length;
         for (let i = 0; i < pointsLength; i++) {
             const point = this.points[i];
@@ -90,6 +115,24 @@ class Transform {
             point.y = scaledMatrix[1];
         }
     }
+
+    #linearInterpolation(point1, point2, step) {
+        const newPoints = [];
+        for (let i = 0; i < step; i++) {
+            const denominator = i / step;
+            newPoints.push(
+                new Pixel(
+                    point1.x + (point2.x - point1.x) * denominator,
+                    point1.y + (point2.y - point1.y) * denominator,
+                    point1.r + (point2.r - point1.r) * denominator,
+                    point1.g + (point2.g - point1.g) * denominator,
+                    point1.b + (point2.b - point1.b) * denominator,
+                    point1.a + (point2.a - point1.a) * denominator
+                )
+            );
+        }
+        return newPoints;
+    }
 }
 
 class Polygon extends Transform {
@@ -104,9 +147,9 @@ class Polygon extends Transform {
     draw(fill = false) {
         window.__ctx__.beginPath();
         window.__ctx__.moveTo(...this.points[0].asArray);
-        this.points.forEach(point => {
+        for (const point of this.points) {
             window.__ctx__.lineTo(...point.asArray);
-        })
+        }
         window.__ctx__.lineTo(...this.points[0].asArray);
 
         if (fill) {
@@ -120,10 +163,10 @@ class Polygon extends Transform {
         let xCenter = 0;
         let yCenter = 0;
 
-        this.points.forEach(point => {
+        for (const point of this.points) {
             xCenter += point.x;
             yCenter += point.y;
-        })
+        }
 
         return new Point(xCenter / this.points.length, yCenter / this.points.length);
     }
@@ -172,16 +215,48 @@ class ImageShape extends Transform {
     }
 
     draw() {
-        this.points.forEach(pixel => {
+        for (const pixel of this.points) {
             window.__ctx__.fillStyle = `rgba(${pixel.r}, ${pixel.g}, ${pixel.b}, ${pixel.a})`;
             window.__ctx__.fillRect(pixel.x, pixel.y, 1, 1);
-        });
+        }
+    }
+}
+
+class Group extends Transform {
+    constructor(...shapes) {
+        super();
+        this.points = shapes.map(shape => shape.points).flat();
+        this.shapes = shapes;
+    }
+
+    get center() {
+        let xCenter = 0;
+        let yCenter = 0;
+
+        for (const shape of this.shapes) {
+            xCenter += shape.center.x;
+            yCenter += shape.center.y;
+        }
+
+        return new Point(xCenter / this.shapes.length, yCenter / this.shapes.length);
+    }
+
+    addShape(shape) {
+        this.shapes.push(shape);
+        this.points = this.shapes.map(shape => shape.points).flat();
+    }
+
+    draw() {
+        for (const shape of this.shapes) {
+            shape.draw();
+        }
     }
 }
 
 export {
     Triangle,
     Rectangle,
     Polygon,
-    ImageShape
+    ImageShape,
+    Group
 }