Gravity Simulator - Stardance

Ship #1

@AshishPatel on Gravity Simulator · 26 days ago

I built an interactive 2D Gravity Simulator using p5.js and custom CSS styling! The project models orbital physics where users can dynamically spawn celestial bodies. The most challenging part was configuring the CI/CD pipeline on Vercel and restructuring the GitHub repository layout so the standard static files could build perfectly from the root path. I'm incredibly proud of the clean, minimalist look and getting the dark-matter cosmic gradient background overlays to render flawlessly.

To test it out: Simply open the link, click anywhere on the canvas to spawn your custom planets, and watch them interact with the gravitational fields!

2 devlogs
5h
10.01x multiplier
53 Stardust

Try project → See source code →

Open comments for this post

@AshishPatel on Gravity Simulator · 26 days ago

16m logged

🌌 Overview

Following up on the initial interface layout, Devlog #2 focuses on environment staging, repository restructuring, and preparing the deployment pipeline for production.

🛠️ Infrastructure & Deployment

Hosting Architecture: Migrated the project layout to sit directly at the root directory level of the GitHub repository.
Vercel Integration: Successfully configured automated continuous integration (CI/CD) pipelines. Pushes to the main branch now trigger zero-config production deployments instantly.
Live Endpoint: The public facing interactive staging URL is officially live.

🎨 Visual Upgrades

Asset Integration: Implemented an optimized, dark-matter cosmic background asset behind the primary UI layout.
Contrast Tuning: Applied a dual-layer black alpha overlay linear-gradient to the background source image. This preserves interface element legibility while allowing planetary orbital paths to pop visually.
Layout Cleanup: Stripped out temporary branding elements from the baseline visual wrapper to ensure a minimalist, simulator-first presentation.

Open comments for this post

@AshishPatel on Gravity Simulator · 26 days ago

4h 59m 50s logged

🌌 Project Overview

Stardance is an interactive, browser-based gravity simulator built using p5.js.

The goal is to simulate orbital mechanics, planetary mass interactions, and cosmic chaotic systems through a clean, modern dashboard interface.

🛠️ Tech Stack

Frontend : HTML5, CSS3

Graphics/Simulation Engine : p5.js

Fonts : Orbitron & Inter

📅 Current Progress

What’s Working:

Core UI Layout : Implemented a sleek, responsive sidebar control panel using frosted glass visual effects (backdrop-filter).

Dashboard Telemetry: Real-time tracking elements ready for planet count, total mass, simulation runtime, and FPS.

Simulation Controls:Fully configured range sliders for dynamic adjustments to Spawn Mass, Simulation Speed, and camera settings (Zoom and Rotation).

Preset Engine Architecture: Buttons configured to swap between pre-calculated gravity scenarios: Solar System, Binary Stars, Galaxy Spirals, Planetary Rings, Black Holes, and Chaos.

Data Persistence: Hooks added for exporting state to JSON/PNG and importing custom orbital systems.

Recent Changes:

Applied a deep-space galaxy background across the canvas space to contrast against the bright orbital trajectories.

Structured modular JavaScript engine architecture (planet.js , presets.js,physics.js, sketch.js) to decouple physics math from render routines.

🛑 Current Challenges & Next Steps

Orbital Physics : Fine-tuning the gravitational constant in physics.js so planets don’t immediately sling out of bounds or collapse into the central mass on spawn.
Performance Tuning: Optimizing the $O(N^2)$ particle-to-particle attraction loops when the Chaos preset spawns high planet counts.
Tail rendering: Ensuring the p5.js canvas buffer correctly handles alpha-blended paths for smooth planetary trails.

💡 Lessons Learned

When building canvas-heavy overlay interfaces, keeping a strict coordinate distinction between screen space (UI) and world space (simulation physics) is essential to keep zoom and pan gestures functioning correctly.