Created heart shape

src/geometry/Circle.ts

@@ -45,6 +45,10 @@ export default class Circle extends Shape {
     };
   }
 
+  area() {
+    return Math.PI * this.radius * this.radius;
+  }
+
   static fromAttributes(attributes: CircleAttributes): Circle {
     const { radius } = attributes;
     return new Circle(radius);

src/geometry/Heart.ts

@@ -0,0 +1,123 @@
+import Shape, { Style } from "./Shape.js";
+import { THREE } from "../index.js";
+import { ERROR_THRESHOLD } from "../constants.js";
+
+export type HeartAttributes = {
+  size: number;
+};
+
+/**
+ * A heart shape created using parametric equations.
+ */
+export default class Heart extends Shape {
+  public size: number;
+
+  constructor(size: number, config: Style = {}) {
+    size = size /15;
+    // Generate points using the parametric equations
+    const points: THREE.Vector3[] = [];
+
+    // Y-offset to move the heart up by 0.2 units
+    const yOffset = 0.2;
+
+    // Generate heart curve using parametric equations
+    for (let t = 0; t <= 2 * Math.PI + ERROR_THRESHOLD; t += 0.1) { 
+      // Alternative heart equation:
+    //   const x = size * Math.sqrt(2) * Math.pow(Math.sin(t), 3);
+    //   const y = size * (
+    //       2 * Math.cos(t)
+    //       - Math.pow(Math.cos(t), 2)
+    //     - Math.pow(Math.cos(t), 3)
+    //   );
+    const x = size * (16 * Math.pow(Math.sin(t), 3));
+    const y = size * (
+        13 * Math.cos(t)
+        - 5 * Math.cos(2 * t)
+        - 2 * Math.cos(3 * t)
+        - Math.cos(4 * t)
+    ) + yOffset;
+
+      points.push(new THREE.Vector3(x, y, 0));
+    }
+
+    super(points, {
+      ...Heart.defaultConfig(),
+      ...config,
+    });
+
+    this.size = size;
+    this.points[1] = new THREE.Vector3(size * (16 * Math.pow(Math.sin(Math.PI), 3)), size * (13 * Math.cos(Math.PI) - 5 * Math.cos(2 * Math.PI) - 2 * Math.cos(3 * Math.PI) - Math.cos(4 * Math.PI)) + yOffset, 0);
+  }
+
+  getCloneAttributes() {
+    return [this.size];
+  }
+
+  getAttributes(): HeartAttributes {
+    return {
+      size: this.size
+    };
+  }
+
+  static fromAttributes(attributes: HeartAttributes): Heart {
+    const { size } = attributes;
+    return new Heart(size);
+  }
+
+  get attributeData() {
+    return [
+      {
+        attribute: "size",
+        type: "number",
+        default: 1,
+      },
+    ];
+  }
+
+
+
+  area() {
+    // Approximation of heart area - you could implement a more accurate calculation
+    return Math.PI * this.size * this.size;
+  }
+
+  centerVertically(offset: number = 0.2) {
+    // Calculate the current bounds of the heart
+    const boundingBox = new THREE.Box3().setFromObject(this);
+    const center = new THREE.Vector3();
+    boundingBox.getCenter(center);
+
+    // Apply the offset to all points
+    if (this.stroke && this.stroke.geometry) {
+      const newPoints = this.points.map(point => {
+        const newPoint = point.clone();
+        newPoint.y -= center.y; // Center at origin first
+        newPoint.y += offset;   // Then add the desired offset
+        return newPoint;
+      });
+
+      this.stroke.geometry.setPoints(newPoints);
+
+      // Update fill geometry if it exists
+      if (this.fill) {
+        this.fill.geometry.dispose();
+        const shape = new THREE.Shape();
+
+        if (newPoints.length > 0 && newPoints[0]) {
+          shape.moveTo(newPoints[0].x, newPoints[0].y);
+
+          for (const point of newPoints.slice(1)) {
+            if (point) {
+              shape.lineTo(point.x, point.y);
+            }
+          }
+
+          shape.closePath();
+          this.fill.geometry = new THREE.ShapeGeometry(shape);
+        }
+      }
+    }
+
+    return this;
+  }
+}

src/geometry/Polygon.ts

@@ -47,11 +47,26 @@ export default class Polygon extends Shape {
     return { points: this.points };
   }
 
+
   static fromAttributes(attributes: PolygonAttributes): Polygon {
     const { points } = attributes;
     return new Polygon(points);
   }
-
+
+  area() {
+    let area = 0;
+    if (this.points.length === 3) {
+      const point0 = this.points[0];
+      const point1 = this.points[1];
+      const point2 = this.points[2];
+
+      if (!point0 || !point1 || !point2) return 0;
+
+      const midpoint = point2.clone().add(point0).divideScalar(2);
+      area = 0.5 * point0.distanceTo(point2) * point1.distanceTo(midpoint);
+    }
+    return area;
+  }
   get attributeData() {
     return [];
   }

src/geometry/Rectangle.ts

@@ -45,6 +45,10 @@ export default class Rectangle extends Shape {
     return new Rectangle(width, height);
   }
 
+  area() {
+    return this.width * this.height
+  }
+
   get attributeData() {
     return [
       {

src/geometry/Square.ts

@@ -38,6 +38,10 @@ export default class Square extends Rectangle {
     );
   }
 
+  area() {
+    return this.sideLength * this.sideLength;
+  }
+
   getCloneAttributes() {
     return [this.sideLength];
   }

src/geometry/index.ts

@@ -9,3 +9,5 @@ export { default as Circle } from "./Circle.js";
 export { default as Point } from "./Point.js";
 export { default as Rectangle } from "./Rectangle.js";
 export { default as Square } from "./Square.js";
+export { default as Heart } from "./Heart.js";
+