Skip to content

Implement 3D particle simulation with real-time physics and interactive controls #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Implement 3D particle simulation with real-time physics and interactive controls #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
636d7b9
Initial plan
Copilot Jan 25, 2026
2bfd76a
Implement 3D particle simulation with interactive controls
Copilot Jan 25, 2026
2fe045e
Refactor: move boundary magic number to config
Copilot Jan 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 58 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,59 @@
# Particle-Sim
a silly little particle simulator

A simple 3D particle simulation to explore particles with interesting properties.

## Features

- **3D Particle System**: Real-time 3D particle simulation with proper depth perception
- **Physics Engine**: Gravity, attraction forces, and inter-particle interactions
- **Interactive Controls**: Adjust simulation parameters in real-time
- **Visual Effects**:
- Depth-based particle sizing and transparency
- Colorful particles with HSL color system
- Optional motion trails
- Glow effects
- **Rotation**: Automatic 3D rotation for better visualization
- **Performance Monitoring**: Real-time FPS and particle count display

## How to Use

1. Open `index.html` in a modern web browser
2. Use the control panel on the right to adjust simulation parameters:
- **Particle Count**: Number of particles (10-500)
- **Gravity**: Vertical force applied to particles (-1 to 1)
- **Attraction Force**: Force pulling particles to center (-2 to 2)
- **Particle Size**: Base size of particles (1-10)
- **Speed**: Simulation speed multiplier (0.1-3)
- **Rotation Speed**: Speed of 3D rotation (0-2)
3. Toggle effects:
- **Toggle Trails**: Show/hide particle motion trails
- **Toggle Depth Effect**: Enable/disable depth-based sizing
- **Reset Simulation**: Reset all particles to initial positions

## Interesting Properties

The particles exhibit several interesting behaviors:

- **Gravitational Pull**: Particles are attracted to the center, creating swirling patterns
- **Inter-particle Forces**: Nearby particles interact with each other
- **3D Motion**: Particles move freely in 3D space with realistic physics
- **Color Variety**: Each particle has a unique color based on its initial position
- **Boundary Wrapping**: Particles wrap around when they reach the edges

## Technical Details

- Pure HTML5, CSS3, and JavaScript (no external dependencies)
- Canvas-based rendering with 3D to 2D projection
- Verlet integration for smooth physics simulation
- Optimized rendering with depth sorting for proper visual layering

## Screenshots

### Default View
![Default simulation](https://github.com/user-attachments/assets/a2673839-4dda-4bb4-9be7-a014acec13fa)

### With Trails Enabled
![Trails enabled](https://github.com/user-attachments/assets/38da926b-2686-4afb-a364-07ef611d9c1e)

### High Particle Count
![Many particles](https://github.com/user-attachments/assets/7273c8d8-991e-4289-8158-2f4f8c7260ce)
171 changes: 171 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Particle Simulation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1e1e2e 0%, #0a0a0f 100%);
color: #fff;
overflow: hidden;
}

#container {
display: flex;
height: 100vh;
}

#canvas-container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

canvas {
background: #000;
border: 2px solid #333;
box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
}

#controls {
width: 300px;
background: rgba(30, 30, 50, 0.9);
padding: 20px;
overflow-y: auto;
border-left: 2px solid #333;
}

h1 {
font-size: 24px;
margin-bottom: 20px;
color: #00ffff;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.control-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 5px;
font-size: 14px;
color: #aaa;
}

input[type="range"] {
width: 100%;
margin-bottom: 5px;
}

input[type="number"] {
width: 100%;
padding: 5px;
background: #1a1a2e;
border: 1px solid #444;
color: #fff;
border-radius: 3px;
}

button {
width: 100%;
padding: 10px;
margin-bottom: 10px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: #fff;
cursor: pointer;
border-radius: 5px;
font-size: 14px;
transition: transform 0.2s;
}

button:hover {
transform: scale(1.05);
}

button:active {
transform: scale(0.95);
}

.value-display {
color: #00ffff;
font-weight: bold;
font-size: 12px;
}

#stats {
margin-top: 20px;
padding: 10px;
background: rgba(0, 0, 0, 0.3);
border-radius: 5px;
font-size: 12px;
}

#stats div {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="canvas-container">
<canvas id="canvas"></canvas>
</div>
<div id="controls">
<h1>3D Particle Sim</h1>

<div class="control-group">
<label>Particle Count: <span class="value-display" id="particleCountValue">100</span></label>
<input type="range" id="particleCount" min="10" max="500" value="100" step="10">
</div>

<div class="control-group">
<label>Gravity: <span class="value-display" id="gravityValue">0.1</span></label>
<input type="range" id="gravity" min="-1" max="1" value="0.1" step="0.05">
</div>

<div class="control-group">
<label>Attraction Force: <span class="value-display" id="attractionValue">0.5</span></label>
<input type="range" id="attraction" min="-2" max="2" value="0.5" step="0.1">
</div>

<div class="control-group">
<label>Particle Size: <span class="value-display" id="particleSizeValue">3</span></label>
<input type="range" id="particleSize" min="1" max="10" value="3" step="0.5">
</div>

<div class="control-group">
<label>Speed: <span class="value-display" id="speedValue">1.0</span></label>
<input type="range" id="speed" min="0.1" max="3" value="1.0" step="0.1">
</div>

<div class="control-group">
<label>Rotation Speed: <span class="value-display" id="rotationSpeedValue">0.5</span></label>
<input type="range" id="rotationSpeed" min="0" max="2" value="0.5" step="0.1">
</div>

<button id="reset">Reset Simulation</button>
<button id="toggleTrails">Toggle Trails</button>
<button id="toggleDepth">Toggle Depth Effect</button>

<div id="stats">
<div>FPS: <span id="fps">0</span></div>
<div>Particles: <span id="particleStats">0</span></div>
</div>
</div>
</div>

<script src="simulation.js"></script>
</body>
</html>
Loading