An interactive 2D electric field simulator that runs in the browser. Add point charges, drag them around, and watch the electric field lines and equipotential curves update in real time.

• Add and remove integer-valued point charges (in μC)
• Drag charges around the canvas
• Visualize electric field lines from each charge
• Visualize equipotential curves
• Zoom in/out and pan the viewport
• Real-time tooltip showing E, V, and position at the cursor
• Values displayed with SI prefixes (kN/C, MV, etc.)

The electric field at a point due to a charge $q$ at distance $r$ is:

$$\vec{E} = \frac{kq}{r^2}\hat{r}$$

With multiple charges, the total field is the sum of each contribution (superposition):

$$\vec{E}_{total} = \sum_{i} \frac{kq_i}{r_i^2}\hat{r}_i$$

In component form:

$$E_x = \sum_{i} \frac{kq_i}{r_i^2} \cdot \frac{\Delta x_i}{r_i}, \quad E_y = \sum_{i} \frac{kq_i}{r_i^2} \cdot \frac{\Delta y_i}{r_i}$$

where $k = 9 \times 10^9 \text{ N·m}^2\text{/C}^2$ is Coulomb's constant.

The scalar potential is:

$$V = \sum_{i} \frac{kq_i}{r_i}$$

Equipotential curves are the lines where $V$ is constant. They are always perpendicular to electric field lines.

Electric charge is quantized. Only integer values are accepted:

$$q = n \cdot 1\text{ μC}, \quad n \in \mathbb{Z} \setminus {0}$$

The simulation maps pixel coordinates to real physical units:

Example: A charge of 1 μC at 100 px (= 1 m) away:

$$E = \frac{9 \times 10^9 \times 10^{-6}}{1^2} = 9\text{ kN/C}$$

$$V = \frac{9 \times 10^9 \times 10^{-6}}{1} = 9\text{ kV}$$

Values are displayed with SI prefixes for readability:

16 field lines are launched from each charge at equal angles. Each line is traced step by step:

1. Compute $\vec{E}$ at the current point
2. Step 4 px in the direction of the unit field vector
3. Lines flow outward from positive charges and inward to negative charges
4. Stop when leaving the visible area or reaching another charge

Line color maps to field strength on a log scale — blue for weak, yellow/red for strong.

The visible area is divided into a 10 px grid. The potential is computed at each corner. The Marching Squares algorithm then extracts contour lines at fixed potential levels.

Levels are spaced logarithmically (5 per sign):

• Red curves — positive potential
• Blue curves — negative potential

electric-sim/
├── index.html          # HTML layout and control panel
├── css/
│   └── styles.css      # All styles
└── js/
    ├── main.js         # Render loop and canvas setup
    ├── camera.js       # Zoom and pan camera system
    ├── controls.js     # GUI events, charge management, dragging
    ├── physics.js      # Electric field and potential calculations
    └── renderer.js     # Grid, charges, field lines, equipotential curves

This project uses ES Modules and cannot be opened directly as a file:// URL. You need a local server:

npx serve .
# or
python3 -m http.server 8000

Then open http://localhost:8000 in your browser.