https://github.com/mbwatson/vectorField
https://github.com/mbwatson/vectorField
animation calculus curl mathematics-education multivariable-calculus particle-system particles vector-field vector-functions
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mbwatson/vectorField
- Owner: mbwatson
- Created: 2018-04-11T20:29:41.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-23T20:38:52.000Z (almost 8 years ago)
- Last Synced: 2024-04-23T22:46:45.855Z (almost 2 years ago)
- Topics: animation, calculus, curl, mathematics-education, multivariable-calculus, particle-system, particles, vector-field, vector-functions
- Language: JavaScript
- Homepage: https://mbwatson.github.io/vectorField/
- Size: 667 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 2D Vector Field Visualization
## Why This Was Created
There are tons of great tools online to supplement mathematics instruction, and great tools are necessary for visualizing abstract concepts. While teaching Multivariable Calculus to high school students, I wanted an easy way for my students to visualize a two-dimensional vector field.
To this point in the course, [Desmos](http:///www.desmos.com/calculator) and [CalcPlot3D](http://web.monroecc.edu/manila/webfiles/pseeburger/CalcPlot3D/) have sufficed. When we began to study curl, I wanted to build my students' intuition via the fluid flow interpretation of a vector field. My search for existing tools turned up nothing dynamic, and the closest thing I could find was an animation in a [Khan Academy video about curl](https://www.khanacademy.org/math/multivariable-calculus/multivariable-derivatives/curl-grant-videos/v/2d-curl-intuition). (I should mention that this video's presenter is the same fellow doing the [3Blue1Brown](http://www.3blue1brown.com/) videos that provide amazing visual explanations and intuition for quite abstract mathematical concepts.)
I required more options and control, so this project was born.
## Demo
[https://mbwatson.github.io/vectorField](https://mbwatson.github.io/vectorField)
## Description
You will see the vectors representing a vector field over the square [-5,5]x[-5,5] in the xy-plane. You will also see a particle system arranged evenly about the square. The particles flow according to the forces imposed on them by the vector field.
## Controls
### Buttons
There are several buttons allowing you to...
* Start and stop the animation
* Empty the particle system of its particles
* Reset to particle system with particles at regularly spaced intervals on the plane
* Show and hide particle system (they are still moving if unpaused, just invisible)
* Show and hide vectors
* Show and hide coordinate Axes
* Show and hide the grid lines
### Preset Vector Functions
Particles on the two-dimensional surface animate according to the forces imposed on them from the current vector field. This vector field can be changed, but only to a handful of preset ones as of this writing.
### Mouse
With the mouse, you can add new particles to the particle system by clicking and dragging on the plane.
In addition, you can change the animation speed by scrolling over the plane.
## Todo List
There are many additions that would make this more useful as an instructional tool, which will be added as the time becomes available. A few of the most pressing issues are below.
* Redrawing the vectors every frame is to much unnecessary work, so layer two Canvas elements:
* (1) background plane consisting of vectors, axes, and grid and
* (2) the particle system.
* Change viewport
* Grab and translate the plane to investigate other portions of the vector field.
* Zoom in and out
* Use MathQuill to allow users to enter their own vector functions.
* Adjust vector and particle spacing and size on the fly.