still buggy

src/components/GravitySimulator/GravitySimulator.tsx

@@ -45,6 +45,12 @@ import {
 } from "../../utils/types/physics";
 import { toParticle, toSerializableParticle } from "../../types/particle";
 import { GravityVision } from "../GravityVision/GravityVision";
+import {
+  SimulatorPath,
+  toSerializableSimulatorPath,
+  toSimulatorPath,
+} from "../../utils/types/path";
+import { PathRenderer } from "../PathRenderer/PathRenderer";
 
 const generatePastelColor = () => {
   const r = Math.floor(Math.random() * 75 + 180);
@@ -146,6 +152,9 @@ export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
   const [isColorInverted, setIsColorInverted] = useState(false);
   const [offset, setOffset] = useState<Vector>(new Point(0, 0));
   const [shouldResetRenderer, setShouldResetRenderer] = useState(false);
+  const [paths, setPaths] = useState<SimulatorPath[]>(
+    initialScenario?.data.paths?.map(toSimulatorPath) || []
+  );
 
   useEffect(() => {
     const updateOffset = () => {
@@ -233,6 +242,7 @@ export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
         gravityPoints,
         physicsConfig.POINTER_MASS,
         otherParticles,
+        paths,
         physicsConfig.PARTICLES_EXERT_GRAVITY
       );
       const force = new Point(calculatedForce.x, calculatedForce.y).add(
@@ -270,7 +280,7 @@ export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
         elasticity: particle.elasticity,
       };
     },
-    [gravityPoints, physicsConfig, gravityRef, offset, pointerPosRef]
+    [gravityPoints, paths, physicsConfig, gravityRef, offset, pointerPosRef]
   );
 
   useEffect(() => {
@@ -490,12 +500,15 @@ export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
       requestAnimationFrame(() => {
         updateSettings(scenario.data.settings);
         setGravityPoints(newGravityPoints.map(toGravityPoint));
+        console.log(scenario.data.particles);
         setParticles(
-          scenario.data.particles.map((particle) => ({
+          scenario.data.particles?.map((particle) => ({
             ...toParticle(particle),
             force: new Point(0, 0),
           }))
         );
+        setPaths(scenario.data.paths?.map(toSimulatorPath));
+        console.log(scenario.data.paths?.map(toSimulatorPath));
         setIsSimulationStarted(true);
         setIsScenarioPanelOpen(false);
       });
@@ -802,14 +815,22 @@ export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
         ))}
 
         {isSimulationStarted && (
-          <ParticleRenderer
-            particles={particles}
-            showVelocityArrows={physicsConfig.SHOW_VELOCITY_ARROWS}
-            showForceArrows={physicsConfig.SHOW_FORCE_ARROWS}
-            shouldReset={shouldResetRenderer}
-            onResetComplete={() => setShouldResetRenderer(false)}
-            simulatorId={simulatorId}
-          />
+          <>
+            <ParticleRenderer
+              particles={particles}
+              showVelocityArrows={physicsConfig.SHOW_VELOCITY_ARROWS}
+              showForceArrows={physicsConfig.SHOW_FORCE_ARROWS}
+              shouldReset={shouldResetRenderer}
+              onResetComplete={() => setShouldResetRenderer(false)}
+              simulatorId={simulatorId}
+            />
+            <PathRenderer
+              paths={paths}
+              shouldReset={shouldResetRenderer}
+              onResetComplete={() => setShouldResetRenderer(false)}
+              simulatorId={simulatorId}
+            />
+          </>
         )}
 
         {!removeOverlay && (

src/components/PathRenderer/PathRenderer.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useRef } from "react";
+import Paper from "paper";
+import { SimulatorPath } from "../../utils/types/path";
+
+interface PathRendererProps {
+  paths: SimulatorPath[];
+  simulatorId?: string;
+  shouldReset?: boolean;
+  onResetComplete?: () => void;
+}
+
+export const PathRenderer: React.FC<PathRendererProps> = ({
+  paths,
+  simulatorId = "default",
+  shouldReset = false,
+  onResetComplete,
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const scopeRef = useRef<paper.PaperScope>();
+
+  // Initialize Paper.js scope
+  useEffect(() => {
+    if (!canvasRef.current) return;
+
+    // Create a new Paper.js scope for this canvas
+    const scope = new Paper.PaperScope();
+    scopeRef.current = scope;
+
+    // Get container dimensions
+    const container = canvasRef.current.parentElement;
+    if (!container) return;
+
+    const rect = container.getBoundingClientRect();
+    const pixelRatio = 1;
+
+    canvasRef.current.width = rect.width * pixelRatio;
+    canvasRef.current.height = rect.height * pixelRatio;
+
+    // Setup with explicit scope
+    scope.setup(canvasRef.current);
+    scope.view.viewSize = new scope.Size(rect.width, rect.height);
+    scope.view.scale(pixelRatio, pixelRatio);
+
+    const handleResize = () => {
+      if (!container || !canvasRef.current || !scope.view) return;
+      scope.activate(); // Activate this scope before operations
+      const newRect = container.getBoundingClientRect();
+      canvasRef.current.width = newRect.width * pixelRatio;
+      canvasRef.current.height = newRect.height * pixelRatio;
+      scope.view.viewSize = new scope.Size(newRect.width, newRect.height);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      scope.activate();
+      scope.project?.clear();
+    };
+  }, [simulatorId]);
+
+  // Handle reset
+  useEffect(() => {
+    const scope = scopeRef.current;
+    if (!scope || !scope.project) return;
+
+    if (shouldReset) {
+      scope.activate();
+      scope.project.activeLayer.removeChildren();
+      scope.view.update();
+      onResetComplete?.();
+    }
+  }, [shouldReset, onResetComplete]);
+
+  // Update paths
+  useEffect(() => {
+    const scope = scopeRef.current;
+    if (!scope || !scope.project) return;
+
+    scope.activate();
+
+    // Clear previous frame
+    scope.project.activeLayer.removeChildren();
+
+    // Draw all paths
+    paths.forEach((simulatorPath) => {
+      const pathCopy = simulatorPath.path.clone();
+      scope.project.activeLayer.addChild(pathCopy);
+
+      console.log(`[${simulatorId}] Path added:`, {
+        segments: pathCopy.segments.length,
+        visible: pathCopy.visible,
+        strokeColor: pathCopy.strokeColor,
+        position: pathCopy.position,
+      });
+    });
+
+    scope.view.update();
+    console.log(
+      `[${simulatorId}] Layer children:`,
+      scope.project.activeLayer.children.length
+    );
+  }, [paths, simulatorId]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={`paper-canvas-${simulatorId}`}
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+      }}
+    />
+  );
+};

src/scenarios/defaults/index.ts

@@ -7,8 +7,10 @@ import { orbit } from "./orbit";
 import { react } from "./react";
 import { pulsar } from "./pulsar";
 import { negativeMass } from "./negativeMass";
+import { pathTest } from "./pathTest";
 
 export const defaultScenarios: Scenario[] = [
+  pathTest,
   react,
   orbit,
   negativeMass,

src/scenarios/defaults/pathTest.ts

@@ -0,0 +1,66 @@
+import { Point } from "paper";
+import { Scenario } from "../../types/scenario";
+import { SerializableSimulatorPath } from "../../utils/types/path";
+
+const createCurvedDiagonalPath = (): SerializableSimulatorPath => {
+  return {
+    id: "curved-diagonal",
+    points: [
+      {
+        x: 100,
+        y: 100,
+        handleOut: { x: 100, y: 0 },
+      },
+      {
+        x: 300,
+        y: 300,
+        handleIn: { x: -100, y: 0 },
+        handleOut: { x: 100, y: 0 },
+      },
+      {
+        x: 500,
+        y: 500,
+        handleIn: { x: -100, y: 0 },
+      },
+    ],
+    closed: false,
+    position: { x: 300, y: 300 },
+    label: "Curved Path",
+    mass: 50000,
+    strokeColor: "#ff0000",
+    strokeWidth: 5,
+    opacity: 1,
+  };
+};
+
+export const pathTest: Scenario = {
+  id: "path-test",
+  name: "Path Test",
+  description:
+    "A test scenario with a curved diagonal path that exerts gravity",
+  data: {
+    settings: {
+      SHOW_VELOCITY_ARROWS: true,
+      SHOW_FORCE_ARROWS: true,
+      NEW_PARTICLE_MASS: 0.01,
+      NEW_PARTICLE_ELASTICITY: 0.8,
+      POINTER_MASS: 0,
+      FRICTION: 1,
+      PARTICLES_EXERT_GRAVITY: false,
+      SOLID_BOUNDARIES: true,
+    },
+    gravityPoints: [],
+    particles: [
+      {
+        id: "test-particle",
+        position: { x: 50, y: 50 },
+        velocity: { x: 3, y: 0 },
+        mass: 0.1,
+        elasticity: 0.8,
+        color: "#ffffff",
+        size: 5,
+      },
+    ],
+    paths: [createCurvedDiagonalPath()],
+  },
+};

src/types/scenario.ts

@@ -1,11 +1,13 @@
 import { SerializableGravityPoint } from "../utils/types/physics";
 import { SerializableParticle } from "./particle";
 import { PhysicsSettings } from "../constants/physics";
+import { SerializableSimulatorPath } from "../utils/types/path";
 
 export interface ScenarioData {
   settings: Partial<PhysicsSettings>;
   gravityPoints: Array<SerializableGravityPoint>;
   particles: Array<SerializableParticle>;
+  paths: Array<SerializableSimulatorPath>;
 }
 
 export interface Scenario {

src/utils/physics/physicsUtils.ts

@@ -1,6 +1,7 @@
 import { Point } from "paper";
 import { Vector, Force, GravityPoint } from "../types/physics";
 import { ParticleMechanics } from "../../types/particle";
+import { SimulatorPath } from "../types/path";
 
 // Newton's law of universal gravitation (simplified)
 const calculateGravityMagnitude = (
@@ -67,6 +68,7 @@ export const calculateTotalForce = (
   gravityPoints: GravityPoint[],
   pointerMass = 50000,
   particles: Array<ParticleMechanics> = [],
+  paths: Array<SimulatorPath> = [],
   particlesExertGravity = false
 ): Force => {
   let totalForce = new Point(0, 0);
@@ -90,6 +92,26 @@ export const calculateTotalForce = (
     totalForce = totalForce.add(pointForce);
   });
 
+  // Add path gravity
+  paths.forEach((path) => {
+    // Find the nearest point on the path to the particle
+    const nearestPoint = path.path.getNearestPoint(selfPosition);
+
+    // Calculate force using the nearest point instead of path center
+    const pathForce = calculateGravitationalForceVector(
+      selfPosition,
+      nearestPoint,
+      path.mass
+    );
+
+    // Optional: Scale force based on distance to path
+    // const distanceToPath = path.path.getOffsetOf(nearestPoint) / path.path.length;
+    // const scaleFactor = Math.exp(-distanceToPath * 2); // Exponential falloff
+    // pathForce.multiply(scaleFactor);
+
+    totalForce = totalForce.add(pathForce);
+  });
+
   // Add particle gravity if enabled
   if (particlesExertGravity) {
     particles.forEach((particle) => {