appsgm is a high-performance, interactive physics simulation environment built with React and HTML5 Canvas. It allows users to explore kinetic energy, gravity, and collision dynamics within rotating geometric containers.

Features

Real-time Physics Engine: Custom-built 2D engine handling elastic collisions and angular momentum.

Global Modifiers: Dynamically change simulation speed, gravity strength, rotation velocity, and material bounciness across all active scenes.

Interactive Presets: A wide variety of pre-configured simulations ranging from "Zero-G" environments to high-velocity particle swarms.

Responsive Design: Optimized for both desktop and mobile viewing with a grid-based layout.

How to Work

1. The Global Dashboard

At the top of the application, you'll find the global control bar:

Sim Speed: Slow down time to analyze impacts or speed it up for chaotic results.

Gravity: Scales the downward force. Values near 0 create weightless environments, while high values simulate extreme planetary forces.

Rotation: Controls how fast the containing shapes (squares, hexagons, etc.) rotate. This creates centrifugal forces on the objects inside.

Bounciness: Adjusts the coefficient of restitution. 1.0 represents perfectly elastic collisions (no energy loss).

2. Individual Simulations

Each card represents a unique physics scenario:

Shape Type: Balls are contained within polygons like triangles, squares, or octagons.

Ball Count: Some scenarios test single heavy objects, while others simulate clouds of tiny particles.

Reset Button: Click the refresh icon in the top right of any card to reset that specific simulation to its starting state.

3. Physics Implementation Details

Collisions: The engine uses vector projection to detect and resolve collisions between circles and line segments (the polygon walls).

Integration: Uses a basic Euler integration method for movement, updated every frame via requestAnimationFrame.

Optimization: Each simulation runs in its own Canvas context, ensuring that calculations only happen for visible or active elements.

Tech Stack

Framework: React 19

Graphics: HTML5 Canvas API

Styling: Tailwind CSS

Icons: Lucide React

Language: TypeScript

appsgm - Exploring the laws of motion.

About

A high-performance physics sandbox for exploring kinetic energy, gravity, and collisions in real-time. Create and manipulate interactive simulations with rotating geometric containers using a custom 2D physics engine.

16 files

2 folders

30.81 KB total size

0 open issues

0 open pull requests

0 watchers

0 forks

0 stars

104 views

Updated Jan 27, 2026

Recent Commits View all

Initial commit - Upload project 'appsgm-physics-sandbox'

GeetMark committed Jan 27, 2026

Languages

TypeScript 95.3%

HTML 4.1%

CSS 0.5%