An interactive, web-based Three.js application for visualizing mathematical vector fields in stunning 3D space.
Note: This project was developed with assistance from AI models (Gemini and Claude) and refined through hands-on experimentation and iteration to create an intuitive learning tool for vector field visualization.
Transform abstract mathematical equations into mesmerizing visual experiences. This powerful visualizer brings vector calculus to life through real-time 3D rendering, making complex mathematical concepts intuitive and engaging.
- Drag to rotate and explore from any angle
- Scroll to zoom in and out
- Coordinate System: R=X (Red), G=Y (Green), B=Z (Blue)
Explore 11 carefully crafted vector field patterns:
- Simple Rotation (Z-Axis) - Classic rotational flow
- Linear Expansion (Source/Sink) - Radial divergence patterns
- Shearing Flow (X-Z plane) - Parallel flow deformation
- Attractor (Cube edges) - Convergent field patterns
- Dynamic Swirl (Time-dependent) - Animated rotating fields
- Spiral Vortex to Center - Rotation combined with sink
- Central Attraction (Harmonic Oscillator) - Wave-like patterns
- Spherical Outflow (Central Source) - 3D radial expansion
- 3D Helix (Tornado) - Helical flow patterns
- Hyperbolic Saddle Point - Classic saddle topology
- Sinusoidal Standing Wave - Periodic wave patterns
Define your own vector fields using mathematical expressions:
- vx: X-component function (e.g.,
Math.sin(ny + time * 0.5) * 2) - vy: Y-component function (e.g.,
Math.cos(nx + time * 0.5) * 2) - vz: Z-component function (e.g.,
Math.sin(nz + time * 0.5) * 1.5)
Available Variables:
x, y, z- Raw position coordinatesnx, ny, nz- Normalized position coordinatestime- For creating dynamic, time-evolving fields
Simply visit the live demo - no installation or setup required! The visualizer runs entirely in your browser.
- Launch the visualizer in your browser
- Choose a prebuilt example from the dropdown menu, or
- Create your own field by entering custom vector component functions
- Click "Apply Field" to visualize
- Interact with the 3D view using mouse controls
- Three.js (r128) - Powerful 3D graphics library
- WebGL - Hardware-accelerated rendering
- Vanilla JavaScript - Lightweight and performant
- Modern CSS - Sleek, responsive UI design
Perfect for:
- 📚 Students - Learn vector calculus visually
- 👨🏫 Educators - Demonstrate complex concepts in lectures
- 🔬 Researchers - Prototype and explore field behaviors
- 🎨 Artists - Create generative mathematical art
- 🧠 Curious Minds - Discover the beauty of mathematics
Vector fields are fundamental to understanding:
- Fluid Dynamics - Air and water flow patterns
- Electromagnetism - Electric and magnetic fields
- Physics - Force fields and particle motion
- Engineering - Heat transfer and stress analysis
- Computer Graphics - Procedural generation and effects
This visualizer makes abstract mathematical concepts tangible:
- See how equations translate to spatial patterns
- Understand divergence, curl, and flow intuitively
- Experiment with parameters and observe real-time changes
- Develop geometric intuition for multivariable calculus
Explore the variety of patterns you can create, from simple rotations to complex time-dependent dynamics. Each preset demonstrates different mathematical principles and behaviors.
Contributions are welcome! Feel free to:
- Add new prebuilt examples
- Improve visualization performance
- Enhance the UI/UX
- Add new features (particle tracing, streamlines, etc.)
- Fix bugs or improve documentation
This project is open source and available under the MIT License.
Experience the visualizer directly in your browser - no installation required!
Made with ❤️ and mathematics
If you find this useful, please consider giving it a ⭐!