This note provides an interactive simulation to visualize electric fields in two dimensions. The simulation uses Coulomb's Law and the Principle of Superposition to calculate and display the electric field vector at every point on a grid. You can place positive and negative source charges on the canvas, add a test charge to trace field lines, and observe how the electric field changes in real-time.

The simulation displays the electric field as a grid of arrows (vectors) that show both the direction and relative strength of the field. Each arrow points in the direction a positive test charge would be pushed, and the arrow's opacity and length indicate the field strength. Positive source charges are shown in red with a "+" symbol and their magnitude value, and negative source charges are shown in blue with a "-" symbol and their magnitude value. The test charge is shown as a gold circle with a "q" label, and it leaves a gold trace as it moves along field lines.

You can interact with the simulation by dragging source charges (positive or negative) or a test charge from the toolbar onto the canvas, moving existing charges by dragging them, deleting source charges by double-clicking them, and adjusting source charge magnitude by scrolling the mouse wheel over a charge (while preserving polarity). The field visualization updates automatically as you modify the charge configuration, allowing you to explore various charge arrangements and their resulting electric fields. You can also customize the visualization by adjusting arrow color, thickness, scale, and grid spacing.

NOTE : The simulation uses Coulomb's Law to calculate the electric field at each grid point. The field strength is normalized for visualization purposes, and points very close to charges are excluded to avoid infinite values. The simulation uses a continuous rendering loop for smooth updates.

Math behind the Simulation

The electric field at any point in space is calculated using Coulomb's Law and the Principle of Superposition:

Coulomb's Law:

E = k × (q / r²) × r̂

where:

• E is the electric field vector
• k is Coulomb's constant (adjusted for pixel scaling)
• q is the charge magnitude (positive or negative)
• r is the distance from the charge to the point
• r̂ is the unit vector pointing from the charge to the point

Principle of Superposition:

E_total = Σ E_i

The total electric field at any point is the vector sum of the electric fields from all individual charges. For each grid point (x, y), the simulation calculates:

E_x = Σ (k × q_i × (x - x_i) / r_i³)

E_y = Σ (k × q_i × (y - y_i) / r_i³)

where the summation is over all charges, and r_i = √[(x - x_i)² + (y - y_i)²] is the distance from charge i to the grid point. Points very close to charges (r < 10 pixels) are excluded to prevent division by zero and infinite field values.

 

Usage Example

Follow these steps to explore the electric field simulation:

1. Add Source Charges: Drag a positive source charge (red) or negative source charge (blue) from the toolbar onto the canvas. You can add multiple charges to create complex field configurations. Source charges create the electric field.
2. Add Test Charge: Drag the test charge (gold button with "q") from the toolbar onto the canvas. The test charge traces field lines but does not create its own field. Only one test charge can be placed at a time.
3. Run Test Charge Simulation: After placing a test charge, click the "Run Test" button to start the simulation. The test charge will move along the field lines, leaving a gold trace. Click "Pause Test" to stop, or "Reset" to clear the trace and restart.
4. Move Charges: Click and drag any charge (source or test) on the canvas to move it. The electric field updates in real-time as you move source charges around. Moving the test charge resets its path.
5. Adjust Source Charge Magnitude: Hover your mouse over a source charge and scroll the mouse wheel up to increase its magnitude, or scroll down to decrease it. The charge size and displayed value will update to show the current magnitude. Charge magnitude ranges from 0.5 to 5 (positive charges stay positive, negative charges stay negative - polarity is preserved).
6. Delete Source Charges: Double-click any source charge to remove it from the canvas. The test charge cannot be deleted this way; use "Clear All" to remove it.
7. Observe Field Vectors: The grid of arrows shows the electric field at each point. Arrow direction indicates field direction, and arrow length and opacity indicate field strength. Stronger fields are shown with longer, more opaque arrows.
8. Customize Visualization: Use the controls to adjust:
   • Grid Spacing: Controls the density of field vectors (range: 10-40 pixels, default: 20). Smaller values create more arrows.
   • Arrow Scale: Controls how responsive arrow length is to field strength (range: 1-100, default: 40). Higher values make arrows more sensitive to field strength.
   • Arrow Thickness: Controls the line width of field arrows (range: 0.5-5, default: 2). Thicker arrows are more visible but may overlap.
   • Arrow Color: Select from 12 predefined colors (default: black). The color palette includes gray, black, red, blue, green, orange, magenta, cyan, purple, lighter orange, dark green, and maroon.
9. Clear All: Click the "Clear All" button to remove all source charges, the test charge, and all traces, starting fresh.

Tip: The key to understanding this simulation is recognizing how charge magnitude and position affect the electric field. Stronger charges (higher magnitude) create stronger fields that extend further. Positive charges create fields that point away from them, while negative charges create fields that point toward them. When multiple charges are present, the field at any point is the vector sum of all individual charge contributions (Principle of Superposition). Try placing two positive charges close together to see how their fields combine, or place a positive and negative charge near each other to observe the field between them. Use the scroll wheel to adjust charge magnitudes and observe how the field strength changes in real-time. The test charge feature allows you to visualize field lines by watching how a positive test charge would move through the field - it follows the direction of the field vectors, creating a visual representation of field lines.

Parameters

Followings are short descriptions on each parameter

• Grid Spacing: Controls the spacing between field vector arrows in pixels. Smaller values create a denser grid with more arrows, providing finer detail but potentially more visual clutter. Larger values create a sparser grid with fewer arrows, providing a cleaner view but less detail. Default is 20 pixels. Range: 10 to 40 pixels, adjustable in steps of 5.
• Arrow Scale: Controls how sensitive arrow length is to field strength. Higher values make arrows grow longer more quickly as field strength increases, making strong fields more visually prominent. Lower values create more uniform arrow lengths. Default is 40. Range: 1 to 100.
• Arrow Thickness: Controls the line width of the field vector arrows. Thicker arrows are more visible but may overlap in dense field regions. Thinner arrows provide cleaner visualization but may be harder to see. Default is 2 pixels. Range: 0.5 to 5 pixels, adjustable in steps of 0.5.
• Arrow Color: Selects the color of all field vector arrows. The color palette includes 12 predefined colors: gray (default), black, red, blue, green, orange, magenta, cyan, purple, lighter orange, dark green, and maroon. The default color is black. Arrow opacity still varies with field strength regardless of the selected color.
• Source Charge Magnitude: The strength of source charges (positive or negative). Charge magnitude affects the strength of the electric field - stronger charges create stronger fields that extend further. Charge magnitude ranges from 0.5 to 5. Positive charges stay positive, and negative charges stay negative (polarity is preserved when adjusting with mouse wheel). The charge size and displayed value update to show the current magnitude.
• Test Charge Speed: The speed at which the test charge moves along field lines during simulation. The test charge moves at a constant speed (5 pixels per frame) in the direction of the electric field vector at its current position. This creates smooth field line traces.
• Coulomb's Constant (k): The scaling factor used in Coulomb's Law calculations. This value is fixed at 5000 (adjusted for pixel scaling) and determines the overall strength of the electric field visualization. Higher values would create stronger fields, but the value is optimized for the current visualization scale.

Controls

Followings are short descriptions on each control

• Positive Source Charge Button: A draggable button with a red plus sign. Drag this button onto the canvas to place a positive source charge. Positive charges create electric fields that point away from them. The charge magnitude can be adjusted using the mouse wheel (scroll up to increase, scroll down to decrease, range: 0.5 to +5).
• Negative Source Charge Button: A draggable button with a blue minus sign. Drag this button onto the canvas to place a negative source charge. Negative charges create electric fields that point toward them. The charge magnitude can be adjusted using the mouse wheel (scroll up to increase magnitude, scroll down to decrease, range: -5 to -0.5).
• Test Charge Button: A draggable gold button with a "q" label. Drag this button onto the canvas to place a test charge. The test charge traces field lines but does not create its own field. Only one test charge can be placed at a time. The test charge can be moved by dragging, and its path is reset when moved.
• Run Test Button: Starts or pauses the test charge simulation. When a test charge is placed, click "Run Test" to start the simulation. The test charge will move along field lines, leaving a gold trace. Click "Pause Test" to stop the simulation, or "Reset" (shown when the test charge stops) to clear the trace and restart. The button is disabled if no test charge is placed.
• Clear All Button: Removes all source charges, the test charge (if present), and all test charge traces from the canvas, allowing you to start fresh.
• Grid Spacing Slider: Adjusts the spacing between field vector arrows. Located on the first control row along with Arrow Scale and Arrow Thickness sliders.
• Arrow Scale Slider: Adjusts how sensitive arrow length is to field strength. Located on the first control row. Range: 1 to 100, default: 40.
• Arrow Thickness Slider: Adjusts the line width of field arrows. Located on the first control row. Range: 0.5 to 5, default: 2.
• Arrow Color Palette: A row of 12 circular color swatches on the second control row. Click any swatch to change the color of all field vector arrows. The selected color is highlighted with a border. Default color is black.

Visualizations

• Electric Field Vectors: The main canvas displays a grid of arrows (vectors) representing the electric field at each grid point. Each arrow shows:
  • Direction: The arrow points in the direction a positive test charge would be pushed at that location
  • Length: Longer arrows indicate stronger fields (scaled by Arrow Scale parameter)
  • Opacity: More opaque arrows indicate stronger fields (ranges from 0.3 to 1.0)
  • Color: All arrows use the selected Arrow Color (default: black)
  • Thickness: Controlled by the Arrow Thickness slider (default: 2 pixels)
  The field vectors update in real-time as you add, move, or modify source charges. Points very close to charges (within 10 pixels) are excluded to prevent infinite field values.
• Source Charges: Source charges are displayed as colored circles:
  • Positive Charges: Red circles with a "+" symbol and magnitude value (e.g., "+2", "+1.5")
  • Negative Charges: Blue circles with a "-" symbol and magnitude value (e.g., "-1", "-3.5")
  • Size: Charge radius grows with magnitude: base 15px + 3px per unit above 1 (e.g., magnitude 2 = 18px radius, magnitude 3 = 21px radius)
  • Color Intensity: Stronger charges have more intense colors
  • Grab Area: Red dotted circles show the grabbable area (matches charge size)
  Source charges can be dragged to move them, and their magnitude can be adjusted with the mouse wheel while preserving polarity.
• Test Charge and Field Line Tracing: The test charge is displayed as a gold circle with a "q" label (10px radius). When the simulation is running:
  • Movement: The test charge moves along field lines at a constant speed (5 pixels per frame) in the direction of the electric field vector
  • Path Trace: A gold line (3px thick) traces the path the test charge has taken, creating a visual representation of field lines
  • Stopping Conditions: The simulation stops automatically when the test charge moves off-screen or gets too close to a source charge (within 20 pixels)
  • Reset: Moving the test charge manually resets its path, allowing you to trace different field lines from different starting positions
  The test charge feature provides an intuitive way to visualize field lines by showing how a positive test charge would move through the electric field.
• Real-Time Updates: All visualizations update continuously in real-time:
  • Field vectors recalculate and redraw as you modify source charges
  • Test charge position and path update each frame during simulation
  • Charge sizes and labels update immediately when magnitude changes
  • Arrow properties (color, thickness, scale) update instantly when controls are adjusted
  The simulation uses a continuous animation loop (requestAnimationFrame) for smooth, responsive updates.