{"id":142,"date":"2017-05-04T11:18:57","date_gmt":"2017-05-04T15:18:57","guid":{"rendered":"http:\/\/sites.nd.edu\/chaoli-wang\/?page_id=142"},"modified":"2025-08-30T10:55:44","modified_gmt":"2025-08-30T14:55:44","slug":"flowvisual","status":"publish","type":"page","link":"https:\/\/sites.nd.edu\/chaoli-wang\/visvisual\/flowvisual\/","title":{"rendered":"FlowVisual"},"content":{"rendered":"<h2>Vector Field and Flow Visualization<\/h2>\n<p>The study and research of fluid behavior and properties have been a challenging topic due to the invisible patterns of fluid (e.g., air, water). Flow visualization is used to make flow patterns visible so that we can visually acquire qualitative and quantitative flow information. A <b><i>vector field<\/i><\/b> (or <b><i>flow field<\/i><\/b>) is a mapping <i>F<\/i>(<i>P<\/i>)=<i>V<\/i> that assigns a vector <i>V<\/i> to each point <i>P<\/i> in the domain <i>U<\/i>. In reality, the domain <i>U<\/i> is a 3D space such as a rectilinear grid, which can be divided into evenly-sized cubes or voxels. The flow within the space can be represented by vectors. A vector (<i>vx, vy, vz<\/i>) is assigned to each voxel to indicate both direction and magnitude of the flow at the center of that voxel. Vectors that are not at voxel centers are linearly interpolated. In the 2D space, the domain <i>U<\/i> is represented by a 2D grid, and each cell of this grid is assigned a vector (<i>vx, vy<\/i>) that indicates both direction and magnitude of the flow at the center of that cell, as shown in the figure below.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-vector-field.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nA 2D vector field and a streamline<\/p>\n<p>When all the time derivatives of a flow field vanish, the flow is considered to be a <b><i>steady<\/i><\/b> flow. In other words, <b><i>steady<\/i><\/b> flow refers to the condition where the fluid properties at a point in the system do not change over time. When time does affect the behavior of the flow, we consider the flow as an <b><i>unsteady<\/i><\/b> flow. The most common way to visualize a flow field is to depict the &#8220;paths&#8221; that fluid elements will follow throughout the time. These paths are called <b><i>streamlines<\/i><\/b> (for a steady flow field) or <b><i>pathlines<\/i><\/b> (for an unsteady flow field).<\/p>\n<h2>Line Integral Convolution Image<\/h2>\n<p>A <b><i>line integral convolution<\/i><\/b> or (LIC) image uses a dense texture to depict the overview streamline patterns on a 2D flow data set or one slice of a 3D flow data set. It works by adding a random static pattern of black-and-white paint sources to visualize the flow field. As the flow passes by the sources each fluid particle picks up some of the source intensity. The result is a random striped texture where points along the same streamline tends to have similar intensities.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-LIC.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nLIC image<\/p>\n<h2>Streamlines<\/h2>\n<p>A <b><i>streamline<\/i><\/b> is a curve tangent to the flow field everywhere, as shown in the figure below. The streamlines are drawn in red while the vectors are drawn in blue. Intuitively, a streamline is the path that a massless particle will follow if released in a steady flow field. If a small ball is placed into a water flow, and assuming the water flow does not change over time (i.e., a steady flow), the trajectory of the ball is a streamline.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-streamline.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nStreamlines<\/p>\n<h2>Pathlines<\/h2>\n<p>A <b><i>pathline<\/i><\/b> is the trajectory that an individual fluid particle will follow in an unsteady flow field, as shown in the figure below. The pathlines seeded from a rake are drawn in yellow while the underlying unsteady flow field is depicted using LIC textures. The concept of pathline is similar to that of streamline except that the underlying flow field is unsteady. Intuitively, if a small ball is placed into a water flow, and the water flow changes over time (i.e., an unsteady flow), the ball will follow the flow direction at each time step. In this case, the trajectory of the ball is a pathline.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-pathline-LIC.gif\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nPathlines<\/p>\n<h2>Streaklines<\/h2>\n<p>A <b><i>streakline<\/i><\/b> is the locus of points of all the fluid particles that have passed continuously through a particular spatial point in the past. Intuitively, if we place multiple small balls into the water flow at the same position but at different time steps, the streakline is the path by connecting all the balls in the placement order. Another real-world example of streaklines is smoke, where all particles are released at the same position, but at different time steps. As shown in the figure below, streaklines are closely related to pathlines. In the figure, the pathlines are drawn in yellow while the streakline is drawn in green. Given a set of pathlines traced from the same position at different time steps, connecting all points at the same time step forms a streakline.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-streakline.gif\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nStreaklines<\/p>\n<h2>Timelines<\/h2>\n<p>A <b><i>timeline<\/i><\/b> is a line formed by a set of fluid particles that were marked at a previous instant in time, creating a curve that is displaced over time as the particles move. Intuitively, imagine that we place several small balls into a water flow, and allow the balls to follow the flow. At a certain time step, the path that connects all the balls is a timeline. As shown in the figure below, timelines are closely related to pathlines. In the figure, the pathlines are drawn in yellow while the timeline is drawn in purple. Given a set of pathlines traced from the same time step at different positions, connecting all the points at the same time step forms a timeline.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-timeline.gif\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nTimelines<\/p>\n<h2>Critical Points<\/h2>\n<p>A <b><i>critical point<\/i><\/b> is a position in a flow field domain where the velocity vanishes. For a 2D flow field, there are six types of critical points: saddle points, repelling nodes, attracting nodes, centers, repelling focuses, and attracting focuses. The following figures illustrate the flow pattern around each of these six critical points.<\/p>\n<table style=\"border: none\" cellpadding=\"0\" cellspacing=\"0\">\n<tbody>\n<tr style=\"background-color:transparent;border: none\">\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-saddle.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nSaddle<\/td>\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-source.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nRepelling Node<\/td>\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-sink.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nAttracting Node<\/td>\n<\/tr>\n<tr style=\"background-color:transparent;border: none\">\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-center.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nCenter<\/td>\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-repelling-focus.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nRepelling Focus<\/td>\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-attracting-focus.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nAttracting Focus<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>For a 3D flow field, there are five types of critical points: spiral, spiral saddle, saddle, source, and sink. The following figures illustrate the flow pattern around each type of these five critical points.<\/p>\n<table style=\"border: none\" cellpadding=\"0\" cellspacing=\"0\">\n<tbody>\n<tr style=\"background-color:transparent;border: none\">\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-spiral-3d.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nSpiral <i>F(x,y,z)=(y-x,-x-y,-z)<\/i><\/td>\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-spiral-saddle-3d.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nSpiral Saddle <i>F(x,y,z)=(y-x,-x-y,z)<\/i><\/td>\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-saddle-3d.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nSaddle <i>F(x,y,z)=(-x,-y,z)<\/i><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table style=\"border: none\" cellpadding=\"0\" cellspacing=\"0\">\n<tbody>\n<tr style=\"background-color:transparent;border: none\">\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-source-3d.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nSource <i>F(x,y,z)=(x,y,z)<\/i><\/td>\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-sink-3d.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nSink <i>F(x,y,z)=(-x,-y,-z)<\/i><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Stream Surface<\/h2>\n<p>A <b><i>stream surface<\/i><\/b> is a continuous surface that is everywhere tangent to the vector it passes, which can be obtained from streamlines traced from a densely seeded curve.<\/p>\n<p>The images below show multiple surface overview and single surface inspection with streamlines and streamline animation. The multiple surface overview provides an overall impression of the flow field by displaying multiple stream surfaces at the same time. The single surface inspection allows one surface to be examined along with streamlines and streamline animation, without occlusion from other surfaces.<\/p>\n<table style=\"border: none\" cellpadding=\"0\" cellspacing=\"0\">\n<tbody>\n<tr style=\"background-color:transparent;border: none\">\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-surface-overview-unique-color.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nMultiple surfaces with unique<br \/>\ncolor for each surface<\/td>\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-surface-overview-cp-color1.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nMultiple surfaces with colors by<br \/>\nthe types of related critical points<\/td>\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-surface-overview-cp-color2.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nMultiple surfaces<br \/>\nfrom another viewpoint<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table style=\"border: none\" cellpadding=\"0\" cellspacing=\"0\">\n<tbody>\n<tr style=\"background-color:transparent;border: none\">\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-surface-single-streamlines.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nSingle surface + streamlines<\/td>\n<td style=\"background-color:transparent;text-align: center;border: none\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.nd.edu\/chaoli-wang\/files\/2017\/05\/flowvisual-surface-single-streamline-animation.jpg\" width=\"256\" height=\"256\" border=\"0\"><br \/>\nSingle surface + streamline animation<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Download<\/h2>\n<h3>FlowVisual for 2D Flow Field Visualization<\/h3>\n<ul>\n<li>Click <a href=\"https:\/\/academicweb.nd.edu\/~cwang11\/resources\/2dflowvis-win.zip\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> to download the Windows version: <span style=\"font-family: 'Courier New'\"><b>2dflowvis-win.zip<\/b><\/span>\n<ol>\n<li>Unzip the files into a directory <span style=\"font-family: 'Courier New'\"><b>2dflowvis<\/b><\/span><\/li>\n<li>Double-click <span style=\"font-family: 'Courier New'\"><b>2dflowvis.exe<\/b><\/span> in the directory to run the program<\/li>\n<li>If the program cannot start on a windows 64-bit machine, please follow these instructions to run the program in compatibility mode:\n<ol>\n<li>Right click on the executable (<span style=\"font-family: 'Courier New'\"><b>2dflowvis.exe<\/b><\/span>) and select &#8220;Properties&#8221;.<\/li>\n<li>Select &#8220;Compatibility&#8221; tab from the pop-up window.<\/li>\n<li>Check &#8220;Run this program in compatibility mode for:&#8221; and select &#8220;Windows XP (Service Pack 2)&#8221; from the combo box.<\/li>\n<li>Apply the changes by clicking &#8220;OK&#8221; or &#8220;Apply&#8221;.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li>Click <a href=\"https:\/\/academicweb.nd.edu\/~cwang11\/resources\/2dflowvis-linux32.tar.gz\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> to download the 32-bit Linux version: <span style=\"font-family: 'Courier New'\"><b>2dflowvis-linux32.tar.gz<\/b><\/span><br \/>\nor <a href=\"https:\/\/academicweb.nd.edu\/~cwang11\/resources\/2dflowvis-linux64.tar.gz\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> to download the 64-bit Linux version: <span style=\"font-family: 'Courier New'\"><b>2dflowvis-linux64.tar.gz<\/b><\/span><\/p>\n<ol>\n<li>In a terminal, untar the files using the following command<br \/>\n<blockquote>\n<pre>tar -xzvf 2dflowvis-linux32.tar.gz\n<\/pre>\n<p>or<\/p>\n<pre>tar -xzvf 2dflowvis-linux64.tar.gz\n<\/pre>\n<\/blockquote>\n<\/li>\n<li>Change the current directory to <span style=\"font-family: 'Courier New'\"><b>2dflowvis<\/b><\/span><\/li>\n<li>In the same terminal, run the program using the following command<br \/>\n<blockquote>\n<pre>.\/2dflowvis\n<\/pre>\n<\/blockquote>\n<\/li>\n<\/ol>\n<\/li>\n<li>Click <a href=\"https:\/\/academicweb.nd.edu\/~cwang11\/resources\/2dflowvis-mac.tar.gz\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> to download the Mac version (OS X Sierra): <span style=\"font-family: 'Courier New'\"><b>2dflowvis-mac.tar.gz<\/b><\/span>\n<ol>\n<li>Double-click <span style=\"font-family: 'Courier New'\"><b>2dflowvis-mac.tar.gz<\/b><\/span> to untar the program<\/li>\n<li>Double-click <span style=\"font-family: 'Courier New'\"><b>2dflowvis-mac<\/b><\/span> to run the program<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<h3>FlowVisual for 3D Flow Field Visualization<\/h3>\n<ul>\n<li>The tool is developed for iPad and currently available at the App Store as <span style=\"font-family: 'Courier New'\"><b><a href=\"https:\/\/apps.apple.com\/us\/app\/flowvisual\/id870195697\" target=\"_blank\" rel=\"noopener noreferrer\">FlowVisual<\/a><\/b><\/span>.<\/li>\n<\/ul>\n<h2>Publications<\/h2>\n<p>Man Wang, Jun Tao, Jun Ma, Yang Shen, and Chaoli Wang. FlowVisual: A Visualization App for Teaching and Understanding 3D Flow Field Concepts. In <i>Proceedings of IS&amp;T Conference on Visualization and Data Analysis<\/i>, San Francisco, CA, pages 476-1-476-10, Feb 2016. <\/p>\n<p>Man Wang, Jun Tao, Chaoli Wang, Ching-Kuang Shene, and Seung Hyun Kim. FlowVisual: Design and Evaluation of a Visualization Tool for Teaching 2D Flow Field Concepts. In <i>Proceedings of American Society for Engineering Education Annual Conference<\/i>, Atlanta, GA, pages 23.609.1-23.609-20, Jun 2013. <\/p>\n<h2>Data Set<\/h2>\n<p>The flow data used in this tutorial include a hurricane simulation data set and a synthesized five critical points data set. The hurricane simulation data set is made available through <a href=\"http:\/\/vis.computer.org\/vis2004contest\/\" target=\"_blank\" rel=\"noopener noreferrer\">IEEE Visualization 2004 Contest<\/a>. The five critical points data set is made available by Dr. Alex Pang via his IEEE Visualization 2005 paper <a href=\"https:\/\/avis.soe.ucsc.edu\/seed3d.html\" target=\"_blank\" rel=\"noopener noreferrer\">Strategy for Seeding 3D Streamlines<\/a>.<\/p>\n<h2>Contact<\/h2>\n<ul>\n<li><a href=\"mailto:manw@mtu.edu\">Man Wang<\/a><\/li>\n<li><a href=\"mailto:junt@mtu.edu\">Jun Tao<\/a><\/li>\n<li><a href=\"mailto:junm@mtu.edu\">Jun Ma<\/a><\/li>\n<li><a href=\"mailto:yshen5@nd.edu\">Yang Shen<\/a><\/li>\n<li><a href=\"mailto:chaoli.wang@nd.edu\">Chaoli Wang<\/a><\/li>\n<li><a href=\"mailto:shene@mtu.edu\">Ching-Kuang Shene<\/a><\/li>\n<li><a href=\"mailto:kim.5061@osu.edu\">Seung Hyun Kim<\/a><\/li>\n<\/ul>\n<p><!-- hitwebcounter Code START --><\/p>\n<p><a href=\"http:\/\/www.hitwebcounter.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><br \/>\n<img decoding=\"async\" src=\"http:\/\/hitwebcounter.com\/counter\/counter.php?page=4847435&amp;style=0006&amp;nbdigits=6&amp;type=page&amp;initCount=0\" title=\"\" alt=\"\" border=\"0\"><br \/>\n<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vector Field and Flow Visualization The study and research of fluid behavior and properties have been a challenging topic due to the invisible patterns of fluid (e.g., air, water). Flow visualization is used to make flow patterns visible so that we can visually acquire qualitative and quantitative flow information. A vector field (or flow field) [&hellip;]<\/p>\n","protected":false},"author":2576,"featured_media":0,"parent":814,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-142","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.nd.edu\/chaoli-wang\/wp-json\/wp\/v2\/pages\/142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.nd.edu\/chaoli-wang\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.nd.edu\/chaoli-wang\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.nd.edu\/chaoli-wang\/wp-json\/wp\/v2\/users\/2576"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.nd.edu\/chaoli-wang\/wp-json\/wp\/v2\/comments?post=142"}],"version-history":[{"count":45,"href":"https:\/\/sites.nd.edu\/chaoli-wang\/wp-json\/wp\/v2\/pages\/142\/revisions"}],"predecessor-version":[{"id":2092,"href":"https:\/\/sites.nd.edu\/chaoli-wang\/wp-json\/wp\/v2\/pages\/142\/revisions\/2092"}],"up":[{"embeddable":true,"href":"https:\/\/sites.nd.edu\/chaoli-wang\/wp-json\/wp\/v2\/pages\/814"}],"wp:attachment":[{"href":"https:\/\/sites.nd.edu\/chaoli-wang\/wp-json\/wp\/v2\/media?parent=142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}