[Bug]: Improve the physics in simulations, they aren't realistic. [more people can work for this issues]

[mattqdev]

Describe the bug

The physics in most simulations are not realistic, as they lack proper units to measure motion. The only exception is Ball Gravity, but even that is incorrect and doesn’t function properly.

Fixing this is essential because it's the core of this project.

To Reproduce

1. View every simulation
2. Check if they have units
3. If yes, check if they are realistic

Expected behavior

Calculations should be based on physically accurate, real-world units rather than pixels and frames.

Screenshots

No response

Computer information

• OS edition:
• Extension version:
• VSCode version:

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[petercr]

Hello this sounds like an interesting problem.
I would be interested in working on it, but I would probably need further input into what methods you want to use to achieve these results?

Along the line of:

• are we just going to try to tweak motion to achieve the proper timing?
• or bring in another library to handle more accurate physics math?
• or are you trying to write out all the equations and call them directly?

Sorry for so many Q's but it's a wide scoped issue.
Thanks let me know 👍

[physicshub]

Your questions are completely legitimate.

The point is, I don't know. I'm very open to outside ideas if you think they're effective.

This is a key issue, because the site is literally based on it.

So, I tried creating functions to convert units of measurement (see src/data/constants.js), and applied them to BallGravity. Despite this, there are two problems:

1. BallGravity is still not physically correct.
2. All the other simulations still need to be fixed.

[physicshub]

How do you think it's right to proceed?

[petercr]

Thanks for getting back to me on this one @physicshub it is a complex issue as you are aware 😅
And I didn't want to put in too much effort if nobody cares about the problem.
Great job with constrants.js , even if it doesn't work right it is still impressive work.

I'm not exactly sure which direction is the right way yet, I need to do a little more research into the problem and then figure out which way would be best.
I will update you here with my findings 👍

[mattqdev]

Hey @petercr, check out my new changes to BallBouncing; I've added a lot of new stuff and centralized the simulation a bit.

See if you like the concept and if you can improve it even further.

[petercr]

@mattqdev cool I can see that you added a bunch of stuff.
Great job!
It feels much more authentic now, with the speed of the ball degrading over time.
Plus a lot of great other features too 🎉

[petercr]

My Finding

Sorry it's a bit long, but like we said it is a complex problem.
What looks easiest at this point is to bring in a physics engine to handle all of the math.
Other people have done lots of hard work on this already, so let's build on that.

Below are the details of what looks best to implement., including possible code examples.
Let me know what you think? 👍

Engine Findings

• Engine comparison (2025)

  • Planck.js (Box2D rewrite): Mature, stable constraints/joints, built-in CCD for bullets/time-of-impact like Box2D, robust restitution/friction, deterministic stepping, wide community knowledge. Docs/examples: planck.js GitHub and Box2D docs.
    • References: Box2D CCD doc (continuous collision detection) covers TOI sweep behavior: https://box2d.org/documentation/md_simulation.html. Planck.js: https://github.com/piqnt/planck.js, https://piqnt.com/planck.js/
  • Matter.js: Easy API, great for demos, but historically lacks true CCD (tunneling risk for fast bodies). Has good dev tooling (matter-tools, inspector).
    • CCD limitation: Prevent object passing through walls / tunneling (implement CCD) liabru/matter-js#5. Runner docs: https://brm.io/matter-js/docs/classes/Runner.html. Plugins/tools: https://github.com/liabru/matter-tools, https://github.com/liabru/matter-js/wiki/List-of-plugins
  • p2.js / p2-es: Feature-rich constraints; p2-es (pmndrs fork) has current docs. Historically no CCD; relies on small timesteps to reduce tunneling.
    • Docs: https://p2-es.pmnd.rs/docs/. CCD issue: Continuous collision detection  schteppe/p2.js#149

• Conclusion: For physically accurate, SI-unit adjustable simulations in React+p5, prefer Planck.js (Box2D semantics) over Matter.js/p2 due to CCD, unit guidance, determinism, and stability.

Recommended Stack

• Physics core: Planck.js (Box2D semantics)
• Rendering: p5 for all simulation visuals
• UI-only animation: motion (Framer Motion) strictly for controls/menus/transitions, not physics state
• State mgmt: React hooks for parameters; feed to physics step loop
• Optional: Offload physics to a Web Worker; draw via OffscreenCanvas or message scene graph to main thread

Core Patterns

• Fixed timestep (decoupled from render)
  Use Gaffer’s accumulator loop at 60 Hz (or 120 Hz if needed).
  Reference: Fix Your Timestep! https://gafferongames.com/post/fix_your_timestep/

// src/physics/loop.js
const FIXED_DT = 1 / 60; // seconds
const MAX_STEPS = 5;     // clamp to avoid spiral of death

export function makeStepper(world) {
  let acc = 0;
  let last = performance.now() / 1000;

  return function step() {
    const now = performance.now() / 1000;
    let frameDt = Math.min(now - last, 0.25); // clamp big frame gaps
    last = now;
    acc += frameDt;

    let steps = 0;
    while (acc >= FIXED_DT && steps < MAX_STEPS) {
      world.step(FIXED_DT); // planck.js deterministic step
      steps++;
      acc -= FIXED_DT;
    }
    const alpha = acc / FIXED_DT; // for render interpolation if desired
    return { alpha };
  };
}

• Canonical units and pixel scaling
  Pick meters as canonical. Choose a pixel-to-meter ratio by scene scale (commonly 30–100 px per meter; Box2D guidance is to keep objects ~0.1–10 m).
  Reference: Box2D unit best practices and discussions:
  https://stackoverflow.com/questions/10656588/why-shouldnt-i-use-pixels-as-unit-with-box2d
  https://stackoverflow.com/questions/28028121/how-many-pixels-is-a-meter-in-box2d

// src/physics/units.js
export const PPM = 50; // 1 meter = 50 pixels

export const toPixels = (m) => m * PPM;
export const toMeters = (px) => px / PPM;

// Gravity: 9.81 m/s^2 downward
export const GRAVITY = 9.81;

• Planck world creation with SI semantics

// src/physics/world.js
import planck from 'planck-js';
import { GRAVITY } from './units';

export function createWorld({ g = GRAVITY } = {}) {
  const world = new planck.World({ gravity: planck.Vec2(0, g) });

  // Example: mark fast movers as bullets to enable CCD
  function makeBall({ x, y, radius, density = 1, restitution = 0.5, bullet = false }) {
    const body = world.createDynamicBody(planck.Vec2(x, y));
    body.setBullet(bullet); // enables CCD in Box2D/Planck
    const shape = planck.Circle(radius);
    body.createFixture(shape, { density, restitution });
    return body;
  }

  // Example: static ground plane
  function makeGround({ y = 0 }) {
    const ground = world.createBody();
    ground.createFixture(planck.Edge(planck.Vec2(-1000, y), planck.Vec2(1000, y)));
    return ground;
  }

  return { world, makeBall, makeGround };
}

• p5 rendering (decouple from physics)

// src/sim/Sketch.js
import { toPixels } from '../physics/units';

export function drawWorld(p, world, bodies) {
  p.background(255);
  p.push();
  p.stroke(0);
  p.fill(180);

  bodies.forEach((b) => {
    // world uses meters; p5 draws in pixels
    const pos = b.getPosition(); // meters
    const angle = b.getAngle();
    // For circles
    const fixture = b.getFixtureList();
    const shape = fixture.getShape();
    if (shape.m_type === 'circle') {
      const rPx = toPixels(shape.m_radius);
      p.push();
      p.translate(toPixels(pos.x), toPixels(pos.y));
      p.rotate(angle);
      p.circle(0, 0, rPx * 2);
      p.pop();
    }
    // Add rects/polygons as needed
  });

  p.pop();
}

• React hook for simulation with live-adjustable parameters

// src/hooks/usePlanckSim.js
import { useEffect, useRef, useState } from 'react';
import { createWorld } from '../physics/world';
import { makeStepper } from '../physics/loop';

export function usePlanckSim(params) {
  const [api, setApi] = useState(null);
  const stepperRef = useRef();
  const rafRef = useRef();

  useEffect(() => {
    const { world, makeBall, makeGround } = createWorld({ g: params.gravity });
    const ball = makeBall({ x: 5, y: 5, radius: 0.2, density: params.density, restitution: params.restitution, bullet: params.bullet });
    const ground = makeGround({ y: 10 });

    stepperRef.current = makeStepper(world);

    const loop = () => {
      stepperRef.current.step();
      rafRef.current = requestAnimationFrame(loop);
    };
    rafRef.current = requestAnimationFrame(loop);

    setApi({ world, ball, ground });
    return () => cancelAnimationFrame(rafRef.current);
  }, [params.gravity, params.density, params.restitution, params.bullet]);

  return api; // consumed by p5 sketch renderer
}

• UI controls with Motion for smooth UI, not physics

// src/components/Controls.jsx
import { motion } from 'motion/react';
import { useState } from 'react';

export function Controls({ onChange }) {
  const [gravity, setGravity] = useState(9.81);
  const [density, setDensity] = useState(1);
  const [restitution, setRestitution] = useState(0.5);
  const [bullet, setBullet] = useState(false);

  return (
    <motion.div layout>
      <label>Gravity (m/s^2)
        <input type="number" value={gravity} step="0.1" onChange={e => { const v = +e.target.value; setGravity(v); onChange({ gravity: v }); }} />
      </label>
      <label>Density (kg/m^2)
        <input type="number" value={density} step="0.1" onChange={e => { const v = +e.target.value; setDensity(v); onChange({ density: v }); }} />
      </label>
      <label>Restitution
        <input type="number" value={restitution} min="0" max="1" step="0.05" onChange={e => { const v = +e.target.value; setRestitution(v); onChange({ restitution: v }); }} />
      </label>
      <label>Bullet (CCD)
        <input type="checkbox" checked={bullet} onChange={e => { const v = e.target.checked; setBullet(v); onChange({ bullet: v }); }} />
      </label>
    </motion.div>
  );
}

• Prevent tunneling and variable dt issues

  • Use fixed-step loop (above).
  • For very fast bodies, enable body.setBullet(true) in Planck to use CCD.
  • Clamp per-frame dt and cap max steps per frame to avoid spiral-of-death.
  • Keep sizes/masses in reasonable Box2D ranges (e.g., bodies 0.1–10 m).

• Serialization and deterministic replay

  • Planck/Box2D: deterministic given fixed dt and consistent inputs.
  • Record parameter changes and user inputs as an event log; reapply to initial seed for replay.
  • Snapshot state by iterating bodies/fixtures and storing positions, velocities, angles, angular velocities, and shapes; restore by creating bodies and setting transforms/velocities before stepping.

• Performance and debugging

  • Offload world.step to a Web Worker; send minimal body states to main thread. Consider OffscreenCanvas to render in worker.
    • OffscreenCanvas primer: https://web.dev/articles/offscreen-canvas
  • Use simple debug draw (as above) or a custom overlay that highlights AABBs, contacts, and joints.
  • For Matter.js, matter-tools inspector is handy (if you experimented with Matter): https://github.com/liabru/matter-tools

Realistic Gravity and “Ball Gravity” Pitfalls

• Common issues:
  • Using pixels/frame as “units” → non-physical accelerations.
  • Integrating with variable dt → unstable, frame rate dependent.
  • No CCD → fast balls pass through thin floors/walls.
  • Extreme scales (giant or tiny bodies) → solver instability.
• Fixes:
  • Use meters/seconds, g = 9.81.
  • Fixed 60 Hz physics step.
  • Reasonable density, radius (e.g., 0.1–0.5 m), restitution ∈ [0,1].
  • Enable bullet mode for fast bodies.

p5 + Planck.js Integration Tips

• Use Planck for physics state; use p5 draw() to render according to converted pixels.
• Maintain a list of bodies/fixtures to draw.
• For React+p5, encapsulate the sketch in a component that reads from usePlanckSim(params) and draws the world every frame.
• Keep Motion animations for panels and overlays to avoid fighting the physics loop.

Practical Steps for This Repo

1. Choose Planck.js. Add dependency and utilities for units (PPM, conversions).
2. Create physics module: src/physics/world.js, src/physics/loop.js, src/physics/units.js.
3. Replace per-sim “pixel/frame” logic with Planck bodies/fixtures and a shared fixed timestep loop.
4. Introduce React controls for per-sim parameters (gravity, density, restitution, friction), and bind to world creation.
5. Ensure CCD for fast movers (bullets).
6. Add a demo “Ball Gravity” implemented with real units to validate correctness.
7. Optional: Worker-ize physics if CPU-bound scenarios appear.

[physicshub]

Oh my goodness your research is very thorough, and at first glance it seems like you have some good ideas. Anyway, I'll take a look tomorrow and calmly evaluate your reasoning. I'm very interested. Great work!