Vector Field Simulator

An interactive, browser-based simulator for exploring two-dimensional vector fields. The application displays a vector field as arrows and animates particles through it, helping students connect symbolic definitions with direction, speed, trajectories, and flow.

Open the live simulator

Why I Built It

I originally built this application while teaching multivariable calculus to high school students. Tools such as Desmos and CalcPlot3D helped with many topics, but I wanted a more dynamic way for students to develop intuition about vector fields—especially the fluid-flow interpretation of curl.

Rather than showing only a static collection of arrows, the simulator lets students place and draw with particles, watch those particles move through a field, and change the field itself. The goal is to make vector fields experimentable, not merely visible.

What You Can Explore

• Compare a field's symbolic definition with its geometric appearance.
• Observe particle trajectories and local changes in direction and speed.
• Draw shapes and watch them stretch, rotate, compress, or shear.
• Choose from preset fields or edit either component of $F(x,y)$ directly.
• Pan and zoom to inspect different regions of a field.
• Adjust simulation speed, vector density, particle size, and particle spacing.
• Independently show or hide particles, vectors, axes, and grid lines.

The initial viewport is centered on the origin and spans $[-5,5]$ horizontally. Its vertical range adapts to the browser window, and the viewport can be panned or zoomed during use.

Using the Simulator

Particles and Playback

• Select Play or Pause to control the animation.
• Click the plane to add one particle.
• Click and drag to paint a line or shape with particles.
• Select Clear to remove all particles.
• Select Seed Grid to replace them with a regularly spaced grid.

Particles move with the velocity defined by the vector field at their current positions. Their paths therefore trace numerical approximations of the field's integral curves.

Custom Vector Fields

Choose an example from Preset Fields, or click either displayed component of $F(x,y)$ to edit it. Press Enter to apply an expression or Escape to cancel the edit. Invalid expressions display an error and leave the previous field unchanged.

Supported syntax includes:

• Variables: x, y
• Operators: +, -, *, /, ^
• Constants: pi, e
• Functions: sin, cos, tan, sec, csc, cot, asin, acos, atan, sinh, cosh, tanh, exp, ln, log, sqrt, and abs
• Implicit multiplication: 2x, xy, 2sin(x), and (x+1)(x-1)

For example, enter -y as the first component and x as the second to create a rotational field $F(x,y)=\langle-y,x\rangle$.

Viewport and Display Controls

• Scroll over the plane to zoom in or out.
• Pan with a right-button drag, middle-button drag, or Space + drag.
• On a touchscreen, use two fingers to pan and pinch to zoom. Use one finger to draw particles.
• Use the settings panel to show or hide particles, vectors, axes, and grid lines.
• Use the sliders to change simulation speed, vector spacing, particle size, and the spacing of the seeded particle grid.

Classroom Use

The simulator is designed for inquiry-based instruction: students predict, experiment, observe, and explain. This approach develops geometric intuition before—or alongside—the formal study of vector fields, integral curves, divergence, and curl.

Activities can be as simple as asking students to predict one particle's path, or as open-ended as drawing a shape and explaining how a field will deform it. Many activities are also accessible before multivariable calculus and can motivate ideas such as transformations, composition, and local behavior.

See Classroom Activity Ideas for ready-to-use prompts, discussion questions, and teaching suggestions.

Local Development

The application uses plain HTML, CSS, and JavaScript. Its browser-ready files are committed to the repository, so no package installation or build step is required to run it.

Requirements

• A modern web browser
• Python 3 or another local static-file server
• Optional: just

Run Locally

Clone the repository and start a local server:

git clone https://github.com/mbwatson/vectorField.git
cd vectorField
python3 -m http.server

Then open http://localhost:8000.

If just is installed, the equivalent command is:

just dev

Opening index.html directly may work in some browsers, but using a local HTTP server more closely matches the deployed environment.

Technical Notes

• The visualization is built with p5.js, which is included in the repository.
• A small, purpose-built expression parser evaluates custom field components and formats them for display.
• MathJax, Google Fonts, and Font Awesome are loaded from external services, so their typography, equation rendering, and icons require an internet connection.
• The application is entirely client-side and does not send entered vector functions to a server.