Breadcrumbs

Two Dimensional Vector Fields JavaScript Simulation Applet HTML5

 

 

 

Download ModelDownload SourceembedLaunch Website ES WebEJS

About

Intro Page

Two dimensional vector fields

This simulation shows 2 dimensional vector fields, more specifically the xy cross section of a 3 dimensional vector field constant in z direction (as with a cylinder of infinite extension).

Shown are flow fields characterized by local velocity components a_x in the x direction and a_y in the y direction. Arrows with uniform length display the direction of the resulting flow vector.  The size of the vector is indicated qualitatively by color gradation.

When opening the simulation, a field with two vortices is demonstrated. Two white text fields show the formulas of its vector components. A blue text field shows the divergence of the field, a brown field the 3D coordinates of its rotation vector.

In a combobox one can choose among many predefined fields. The type of field and the components of its vectors are stated. The second case is empty for your own data insertions. Alternatively you can edit data of predefined cases in the a_x and a_y text fields (do not forget to press the Enter button after changes!)

Changing to another predefined function erases old data. If you want to preserve the result of your own changes, fabricate a picture, (most simply by pressing the Print button of your keyboard to transfer the window data into the temporary store; then paste them into a suitable document. A more comfortable way is to use a screenshot reader).

A red test object lies in the vector field that will follow the flow vector both in direction and value once the start button is activated. It jumps back to its initial position when it crosses the limits of the field. Step causes one step of movement.

You can draw the object with the mouse, and test the field at every position that way. This gives an impression of direction and value within the whole field.

You can turn off the vector arrows with an option switch and try to understand the field just from the movement of the test body.

The zoom slider changes the scale of coordinates. As the number of arrows shown is constant, this helps to recognize details. The default case with two vortices is a good example.

The arrow length slider changes the length of arrows, init resets all parameters , reset_point resets the test object to the default position.

Formulas

Vector Algebra

In this simulation the z component of the velocity vector is zero. The vector lies in the xy-plane. The rotation vector is perpendicular to the xy-plane; it has just a z component.

This results in:

a = (ax , ay, 0)

div a = ∂ax/∂x + ∂ay/∂y + 0 = ∂ax/∂x + ∂ay/∂y

rot v = (0, 0, ∂ay/∂x -∂ax/∂y)

When is the field without vortex: rotation = 0 ?

∂vy/∂x -∂vx/∂y =  0

This holds when ax = a(x) and ay = a(y); the components are functions of their own coordinates only (e.g.  ax = x2+3x-1, ay = y3-y2). This includes the case of both components being constants, whose derivative is zero (e.g. ax = 1, ay = -4).

If one component is a function of the other coordinate, then in general the field will have vortices, except when the partial derivatives just compensate, as for

rot (ax = y, ay = x) = (0, 0, 1 - 1)  = (0, 0, 0 ) = 0

When is the field without source: divergence = 0?

∂ax/∂x = - ∂ay/∂y

The partial derivatives must be equal in absolute value, with opposite sign (sum = zero).

The movement of the test object is determined and calculated by two simple ordinary differential equations: 

dx/dt = ax

dy/dt = ay

Experiments

E 1:  Study the default case of the twin vortices. Calculate rotation and divergence yourself by partial derivation of the formulas of the components (the "other" coordinate is treated as a constant).

E 2:  Change the scale with the zoom slider and observe how the visual impression of the field changes with scale.

E 3:  Start the test object and follow its path concerning direction and velocity. Try to understand this by studying the formulas.

E 4:  Draw the test object to other points in the field and test its quantitative structure by the object´s movement.

E 5:  Choose fields that have constants as components. Change numbers and understand how this influences the field. Start the test object. Does it change its velocity?

E 6: Choose fields with components linear in coordinates. Try to understand the context. Why are divergences not quoted?  (localized limits may occur at sources).

E 6:  How does the test object move now? Which terms in the formulas lead to acceleration?

E 7: Choose the two corresponding last cases of twin sources and twin vortices and study the differences.

E 8: Invent your own formulas for fields, calculate divergence and rotation, describe the characteristics.

 

Translations

Code Language Translator Run

Credits

Dieter Roess - WEH- Foundation; Fremont Teng; Loo Kang Wee

Dimensional Vector Fields JavaScript Simulation Applet HTML5

Date: October 26, 2023 Source: Excerpts from "Two Dimensional Vector Fields JavaScript Simulation Applet HTML5 - Open Educational Resources / Open Source Physics @ Singapore" Purpose: To review the main themes and important ideas presented in the provided source regarding a JavaScript simulation applet for two-dimensional vector fields.

Overview

The provided source describes a JavaScript simulation applet designed to visualize and interact with two-dimensional vector fields. The applet is presented as an Open Educational Resource from Open Source Physics @ Singapore, intended for learning and teaching mathematics and physics using simulations. It allows users to observe flow fields defined by local velocity components in the x and y directions and to explore the concepts of divergence and rotation (vortices) in these fields.

Main Themes and Important Ideas

  1. Visualization of Two-Dimensional Vector Fields: The primary function of the applet is to visually represent 2D vector fields. It specifically focuses on the xy-cross section of a 3D vector field that remains constant in the z direction.
  • "This simulation shows 2 dimensional vector fields, more specifically the xy cross section of a 3 dimensional vector field constant in z direction (as with a cylinder of infinite extension)."
  • The applet uses arrows of uniform length to indicate the direction of the flow vector, while the magnitude is qualitatively represented by color gradation.
  1. Interactive Exploration: The applet offers several interactive features that allow users to explore and understand the properties of vector fields.
  • Predefined and Custom Fields: Users can choose from a variety of predefined vector fields using a combobox, with the formulas for the x (a_x) and y (a_y) components displayed. They can also edit these formulas or input their own.
  • "In a combobox one can choose among many predefined fields. The type of field and the components of its vectors are stated. The second case is empty for your own data insertions. Alternatively you can edit data of predefined cases in the a_x and a_y text fields..."
  • Test Object: A red test object can be activated to follow the flow vectors, illustrating the field's direction and magnitude. Users can start, step, or manually draw the object to observe its movement at different points.
  • "A red test object lies in the vector field that will follow the flow vector both in direction and value once the start button is activated... You can draw the object with the mouse, and test the field at every position that way."
  • Visual Adjustments: Sliders for zoom and arrow length allow users to adjust the visual representation of the field to better understand its details.
  • "The zoom slider changes the scale of coordinates... The arrow length slider changes the length of arrows..."
  • Toggle Arrows: Users can turn off the vector arrows to focus on the movement of the test object and infer the field properties from it.
  • "You can turn off the vector arrows with an option switch and try to understand the field just from the movement of the test body."
  1. Mathematical Concepts: The simulation directly relates to fundamental concepts in vector calculus, such as divergence and rotation (vorticity).
  • The applet displays the divergence (blue text field) and the z-component of the rotation vector (brown text field).
  • The source provides the mathematical formulas for divergence and rotation in this 2D context:
  • "div a = ∂ax/∂x + ∂ay/∂y"
  • "rot v = (0, 0, ∂ay/∂x -∂ax /∂y )"
  • It also explains the conditions for a field to be "without vortex" (rotation = 0) and "without source" (divergence = 0), relating these conditions to the partial derivatives of the vector components.
  • "When is the field without vortex : rotation = 0 ? ∂vy/∂x -∂vx/∂y = 0"
  • "When is the field without source : divergence = 0 ? ∂ax/∂x = - ∂ay/∂y"
  1. Learning and Teaching Applications: The applet is explicitly designed for educational purposes, allowing students to:
  • Visually explore abstract mathematical concepts like vector fields, divergence, and rotation.
  • Conduct "experiments" by manipulating parameters, observing the behavior of the test object, and relating these observations to the underlying mathematical formulas.
  • The "Experiments" section outlines specific tasks for users, such as studying the default twin vortices, changing the scale, analyzing the test object's movement, and inventing their own fields.
  • Gain an intuitive understanding of how different vector field formulas translate into visual flow patterns.
  1. Technical Implementation: The applet is implemented using JavaScript and HTML5, making it embeddable in web pages and accessible through modern web browsers without the need for additional plugins.
  • The source provides an embed code using an <iframe> tag.
  1. Additional Features: The applet includes functionalities for resetting parameters (init), resetting the test object's position (reset_point), and capturing the current state as a picture (using print screen or a screenshot reader).
  2. Context within Open Source Physics: The applet is part of a larger collection of Open Educational Resources from Open Source Physics @ Singapore, which aims to provide numerous physics and mathematics simulations for learning and teaching. The mention of "Learning and Teaching Mathematics using Simulations – Plus 2000 Examples from Physics" in the breadcrumbs highlights this broader context.
  3. Instructions for Use: The "For Teachers" section provides instructions on using the "Function Combo Box" to select predefined fields and the "Arrow Size Slider" to adjust the visual representation. It also describes the "Draggable Red Ball" and the "Play/Pause and Reset Buttons."

Potential Use Cases

This simulation applet could be valuable for:

  • Mathematics Education: Illustrating vector fields in multivariable calculus courses, explaining concepts like gradient fields, divergence, and curl in a 2D context.
  • Physics Education: Visualizing flow fields in fluid dynamics, electric and magnetic fields (in 2D simplifications), and force fields.
  • Self-Learning: Allowing students to independently explore vector field concepts and test their understanding through experimentation.
  • Interactive Lectures: Enabling instructors to demonstrate vector field properties dynamically during lectures.

Conclusion

The "Two Dimensional Vector Fields JavaScript Simulation Applet HTML5" is a valuable educational tool that leverages interactive visualization to enhance the understanding of vector fields and related mathematical concepts. Its user-friendly interface, variety of predefined examples, and options for customization make it a versatile resource for both students and educators in mathematics and physics. The applet's accessibility through standard web browsers further increases its utility in modern learning environments.

 

Study Guide: Two Dimensional Vector Fields Simulation

Overview

This study guide is designed to help you understand the concepts and functionalities presented in the "Two Dimensional Vector Fields JavaScript Simulation Applet HTML5" resource. The simulation visualizes two-dimensional vector fields, allowing users to explore their properties and the behavior of objects within them.

Key Concepts

  • Vector Field: A field that assigns a vector to each point in space. In this simulation, the vectors represent flow velocity in the xy-plane.
  • Vector Components: The x and y components of the velocity vector at a given point, denoted as a_x and a_y.
  • Flow Field: The visual representation of a vector field, where arrows indicate the direction and color gradation indicates the magnitude of the flow velocity.
  • Divergence: A scalar quantity that measures the "source" or "sink" nature of a vector field at a point. In 2D, div a = ∂a_x/∂x + ∂a_y/∂y. A divergence of zero indicates a field without sources or sinks.
  • Rotation (Curl in 2D): A vector quantity (with only a z-component in this 2D context) that measures the "vorticity" or rotational tendency of a vector field at a point. In 2D, rot v = (0, 0, ∂a_y/∂x - ∂a_x/∂y). A rotation of zero indicates a field without vortices.
  • Test Object: A red object in the simulation that moves according to the local flow vector, allowing visualization of the field's effect on a particle.
  • Simulation Controls: Interactive elements such as combobox, text fields, buttons (start, step, init, reset_point), sliders (zoom, arrow length), and toggles (arrows) that allow users to manipulate and explore the vector fields.
  • Ordinary Differential Equations: The mathematical equations (dx/dt = a_x, dy/dt = a_y) that govern the movement of the test object based on the vector field.

Using the Simulation

  • Predefined Fields: Explore the various predefined vector fields available in the combobox to observe different flow patterns and their corresponding component formulas, divergence, and rotation.
  • Custom Fields: Enter your own formulas for the x and y components of the vector field in the text fields to create and analyze custom flow patterns. Remember to press Enter after making changes.
  • Visualization: Observe the vector field through the direction and color of the arrows. Use the "arrow length" slider to adjust the arrow size for better visualization. Toggle the arrows off to focus on the test object's movement.
  • Test Object Interaction: Click "start" to observe the continuous movement of the test object according to the flow field. Use "step" for single movements. Drag the test object with the mouse to investigate the field at different locations. "reset_point" returns the object to its initial position.
  • Scale and Detail: Use the "zoom" slider to change the coordinate scale and reveal finer details of the vector field while keeping the number of arrows constant.
  • Preserving Results: Use the Print Screen function or a screenshot tool to save visualizations of custom or modified vector fields.

Experiments to Conduct

The resource suggests several experiments to deepen your understanding:

  • E 1: Analyze the default twin vortices field by calculating its divergence and rotation manually using partial derivatives.
  • E 2: Observe the effect of changing the zoom level on the visual representation of the vector field.
  • E 3: Start the test object in various predefined fields and relate its motion to the given formulas.
  • E 4: Drag the test object and analyze the field's structure based on its movement from different starting points.
  • E 5: Experiment with fields having constant components and observe the test object's behavior.
  • E 6: Explore fields with linear components and consider why divergences might not be explicitly quoted in some cases (potential for localized limits at sources). Analyze which terms in the formulas would lead to acceleration of the test object.
  • E 7: Compare the twin sources and twin vortices fields to understand their distinct characteristics.
  • E 8: Create your own vector field formulas, calculate their divergence and rotation, and describe the resulting flow field.

Quiz

Answer the following questions in 2-3 sentences each.

  1. What does a vector field represent in the context of this simulation? How is the direction and magnitude of the vectors visualized?
  2. Explain the concept of divergence in a two-dimensional vector field. What does a zero divergence indicate about the field?
  3. Describe what the rotation of a two-dimensional vector field signifies. When is a field considered "without vortex"?
  4. How can you create and analyze a vector field that is not one of the predefined options in the simulation? What should you remember to do after editing the component formulas?
  5. What is the purpose of the red test object in the simulation? How does it interact with the vector field when the "start" button is activated?
  6. Explain how the "zoom" slider affects the visualization of the vector field. Why is the number of arrows kept constant when zooming?
  7. Describe two ways you can interact with the test object to explore the properties of a vector field at different locations.
  8. What mathematical equations govern the movement of the test object within the vector field? What do the variables in these equations represent?
  9. According to the text, when will a vector field have vortices if one component is a function of the other coordinate? Provide an exception mentioned in the text.
  10. What does the "init" button do in the simulation? How does it differ from the "reset_point" button?

Answer Key

  1. In this simulation, a vector field represents the flow velocity at different points in the xy-plane. The direction of the vectors is shown by the orientation of the arrows, while the magnitude is indicated qualitatively by the color gradation of the arrows.
  2. Divergence measures the extent to which a vector field acts as a source or sink of flow at a given point. A zero divergence indicates that the field is source-free and sink-free at that point, meaning the flow is incompressible locally.
  3. The rotation of a two-dimensional vector field signifies the local rotational tendency or "vorticity" of the flow. A field is without vortex when its rotation is zero, which occurs when ∂a_y/∂x - ∂a_x/∂y = 0.
  4. You can create a custom vector field by editing the formulas for the x (a_x) and y (a_y) components in the white text fields. After making changes, it is important to press the "Enter" button for the simulation to update with the new formulas.
  5. The red test object visualizes how a massless particle would move under the influence of the vector field's flow velocity. When "start" is activated, the object follows the local flow vector in both direction and magnitude, moving continuously through the field.
  6. The "zoom" slider changes the scale of the coordinate system displayed in the simulation. By keeping the number of arrows constant, zooming allows users to observe the vector field at different levels of detail without changing the overall density of the visualization.
  7. One way to interact is by clicking the "start" button to see the continuous motion from a default or reset position. Another way is to click and drag the test object to any desired location within the field to observe the instantaneous flow vector at that specific point.
  8. The movement of the test object is determined by the ordinary differential equations dx/dt = a_x and dy/dt = a_y. Here, x and y represent the position coordinates of the object, t represents time, and a_x and a_y are the x and y components of the velocity vector at the object's current position.
  9. If one component is a function of the other coordinate (e.g., a_x depends on y or a_y depends on x), the field will generally have vortices. However, an exception occurs when the partial derivatives compensate each other, such as in the case of a_x = y and a_y = x, where the rotation is zero.
  10. The "init" button resets all parameters of the simulation to their default values, including the selected predefined field, zoom level, arrow length, and the test object's position. The "reset_point" button, on the other hand, only returns the test object to its default starting position without altering other simulation parameters.

Essay Format Questions

  1. Discuss the significance of divergence and rotation (curl in 2D) in characterizing two-dimensional vector fields. Explain how these mathematical concepts relate to the visual representation of flow fields in the simulation and the behavior of the test object.
  2. Describe the various interactive features of the "Two Dimensional Vector Fields JavaScript Simulation Applet HTML5." Analyze how these features can be used to effectively explore and understand the properties of different vector fields, both predefined and user-defined.
  3. Explain how the movement of the red test object in the simulation is determined by the underlying vector field. Discuss the relationship between the vector field's components and the test object's trajectory, referencing the provided ordinary differential equations.
  4. Consider the educational value of using a simulation like this to teach and learn about vector fields. What are the advantages of interactive visualization compared to static representations or purely mathematical treatments of this topic? Provide specific examples from the simulation's features and suggested experiments.
  5. Design an experiment using the simulation to investigate the conditions under which a two-dimensional vector field will be source-free (zero divergence) or vortex-free (zero rotation). Outline the steps of your experiment, including the use of predefined fields, custom formulas, and the observation of the test object's behavior.

Glossary of Key Terms

  • Vector: A quantity that has both magnitude and direction, often represented by an arrow.
  • Vector Field: An assignment of a vector to each point in a region of space.
  • Component (of a vector): The scalar projections of a vector onto the coordinate axes (e.g., a_x is the x-component of vector a).
  • Simulation: A computer program that models the behavior of a real-world or theoretical system.
  • Applet: A small application, often written in Java or JavaScript, that runs within another application (like a web browser).
  • HTML5: The latest version of the standard markup language for creating web pages and web applications, enabling interactive elements.
  • JavaScript: A programming language commonly used to add interactivity to websites and web applications.
  • Flow Field: A visual representation of a vector field, often using arrows to indicate the direction and magnitude of the vectors.
  • Divergence (div): A measure of the rate at which a vector field flows outward from a point (positive) or inward toward a point (negative). In 2D: ∂a_x/∂x + ∂a_y/∂y.
  • Rotation (rot) / Curl: A measure of the tendency of a vector field to rotate around a point. In 2D, the z-component is ∂a_y/∂x - ∂a_x/∂y.
  • Vortex: A region in a flow field where the fluid (or the representative vectors) rotates around a central axis.
  • Source: A point in a vector field where the flow originates or diverges outward.
  • Sink: A point in a vector field where the flow terminates or converges inward.
  • Partial Derivative (∂): The derivative of a function of several variables with respect to one of those variables, while holding the others constant.
  • Ordinary Differential Equation (ODE): An equation containing a function of one independent variable and its derivatives.
  • Trajectory: The path followed by a moving object through space as a function of time.
  • Scale: The ratio of a distance on a map, model, or simulation to the corresponding distance in reality.

Sample Learning Goals

[text]

For Teachers

 

Instructions

Function Combo Box

 
Toggling the various functions will give you their respective paths/shapes.
 
(Twin Vortices)
 
(Constant to the Right)
 
(Constant to the Left)
 
(Constant Diagonal)
 
(Radical Outward)
 
(Radical Inward)
 
(Vortex Right)
 
(Vortex Left)
 
(x-line Attractive)
 
(y-line Repulsive)
 
(Vortex and Source)
 
(Twin Source and Drain)
 
Note that when selecting the respective functions,
the fields in ax and ay change respectively.
 
You can also edit the formulae in both fields to give your own pattern.
 

Arrow Size Slider

 
Adjusts the size of the arrows in the fields.
 


Draggable Red Ball

 
This can be done by dragging the centre of the red ball to anywhere on the panel.
 
Note that it will only move within the vector fields.
 

Toggling Full Screen

Double clicking anywhere on the screen will toggle full screen.
(Note that this won't work if the simulation is playing.)

Play/Pause and Reset Buttons

Plays/Pauses and resets the simulation.

Research

[text]

Video

[text]

 Version:

Other Resources

[text]

Frequently Asked Questions: Two Dimensional Vector Fields Simulation

What is a two-dimensional vector field as shown in this simulation?

This simulation visualizes a two-dimensional vector field, which can be thought of as representing the xy-cross section of a three-dimensional field that remains constant in the z direction (similar to an infinitely long cylinder). It displays flow fields where each point in the xy-plane is associated with a velocity vector having components in the x (ax) and y (ay) directions. The direction of the flow is indicated by arrows of uniform length, while the magnitude (size) of the vector is represented by color gradation.

What can I observe and learn from this simulation?

You can observe various predefined vector fields, such as those with vortices, constant flows, or radial patterns. By examining the arrows and the movement of a red test object, you can gain an intuitive understanding of the field's direction and magnitude at different locations. The simulation also allows you to see the mathematical formulas for the vector components, the divergence (source/sink strength), and the z-component of the rotation (vorticity) of the field. This helps connect the visual representation to the underlying mathematical concepts.

How can I interact with the simulation?

The simulation offers several interactive features. You can select from various predefined vector fields using a combobox. You can also directly edit the formulas for the x and y components of the vector field in the white text fields and observe the resulting changes. A red test object can be started to follow the flow, stepped forward incrementally, or dragged with the mouse to explore the field. Sliders allow you to adjust the zoom level (scale of coordinates) and the arrow length. Buttons are available to start/pause the motion, perform a single step, reset all parameters to their initial values, and reset the point to its starting position.

What is divergence and rotation in the context of this 2D vector field?

Divergence (∇⋅a=∂ax∂x+∂ay∂y) in this simulation indicates the source or sink strength of the vector field at a given point. A positive divergence suggests a source (flow emanating outwards), while a negative divergence suggests a sink (flow converging inwards). The rotation (curl in 2D, specifically the z-component ∂ay∂x−∂ax∂y) indicates the local rotational tendency or vorticity of the field. A non-zero rotation implies the presence of vortices or swirling motion.

When is a vector field considered "without vortex" or "without source"?

A vector field is without vortex (irrotational) when its rotation is zero (∂ay∂x−∂ax∂y=0). This condition is satisfied if the x-component (ax) is solely a function of x, and the y-component (ay) is solely a function of y. A field is without source (incompressible or solenoidal) when its divergence is zero (∂ax∂x+∂ay∂y=0). This requires that the partial derivatives of the components with respect to their corresponding coordinates are equal in magnitude but opposite in sign.

How does the red test object move, and what can I learn from its movement?

When the start button is activated, the red test object moves according to the local velocity vector at its current position. Its movement is governed by the differential equations dxdt=ax and dydt=ay. By observing the path and speed of the test object, you can qualitatively understand the direction and magnitude of the vector field in different regions. Dragging the object allows you to probe the field at various points and see how the flow would affect a particle placed there.

Can I create and analyze my own vector fields using this simulation?

Yes, the simulation allows you to create your own vector fields. You can select the empty case in the combobox or edit the formulas in the ax and ay text fields. After entering your formulas and pressing Enter, the simulation will display the corresponding vector field. You can then calculate the divergence and rotation of your field using partial derivatives and observe its characteristics using the test object and other interactive tools.

Why are divergences sometimes not quoted for linear fields, and what causes acceleration of the test object?

Divergences might not be explicitly quoted for fields with linear components because they can sometimes lead to localized limits or singularities at "sources" or "sinks." The acceleration of the test object occurs when the velocity components ax and ay are not constant but change with position (x and y). According to the governing differential equations, the rate of change of velocity (acceleration) depends on how the vector components themselves vary across the field. For example, if ax depends on x, then daxdt=∂ax∂xdxdt=∂ax∂xax, indicating acceleration in the x direction if ∂ax∂x≠0.

0.5 1 1 1 1 1 1 1 1 1 1 Rating 0.50 (1 Vote)
Details
Parent Category: Pure Mathematics
Category: 3 Vectors
Hits: 6671