Visualisierung 2

Browser implementation of Jobard et al.: Visualizing 2D Flows with Animated Arrow Plots

Version

1.0

Authors

Andreas Wittmann, 1225854
Silvana Spodaras, 0605836

About the project

Animated Arrow plots is a vector field visualisation implemented in pure Java-Script.

The implementation is based on the paper Visualizing 2D Flows with Animated Arrow Plots by Jobard et al., and was done for the course "Visualisierung 2" at TU Vienna. From a given vector field, an animated arrow plot is generated, where the position and orientation of arrows represents the flow direction, and the length resembles the velocity. To avoid overlapping arrows, a distance map is used. Eventually, arrows which will overlap each other are "killed" and respawned at another point on the map.

Implementation

Arrows

Arrows are intitally represented by 5 handle points. Their position is calculated by runge-kutta integration in each frame. The integration and advection of arrows was implemented in javascript by ourselves. The entire rendering is done with d3.js, (mis)using the d3.svg.area generator to render the arrow shafts and heads. d3 is handling the interpolation of handlepoints, the morphing from arrows to discs and vice-versa and the smooth fading. (Note: The d3.svg.areas are used in a hacky way so d3 can interpolate and draw the arrow bodies - normally, d3 areas are not supposed to be used in this way. This was necessary to allow the morphing from arrows to discs.)

To reduce popping artifacts, arrows are sorted by length and lifetime. Longer arrows or arrows which are older stay alive. Shorter or younger arrows are killed more often. Furthermore arrows are smoothly faded in- and out. In regions with very low velocity, arrows are morphed to discs instead of displaying short, degenerated arrows.

Seed Points / Respawn

Our implementation uses 50 arrows and 50 seed points. Seed positions are initialized randomly. A dead arrow respawns (or at least try to respawn) at the longest unused seed position so that new arrows are distributed evenly on the map.

Distance Map

Due to massive performance issues we had to reduce the distance map to a simple 0 or 1 matrix, where 0 means occupied by an arrow and 1 means empty. Furthermore we reduced the resolution of the distance map so that two neighboured arrows have a gap between them. (Fields in the near neighborhood of an arrow are also marked as occupied)

Velocity Data

We planned to use real wind data of the ZAMG institute of metrology. The problem is that there are only 26 wheater stations in austria and we need a velocity and a direction for every point in our map. Therefore we would have to interpolate the missing data. To get realistic interpolation we would have to take regional geographic conditions into count. We decided to skip this and concentrate on reducing popping artefacts and creating smooth arrows. For now, we are using a fictional velocity field which shows all our implementation details in the best possible way.

How to build doc

./node_modules/.bin/jsdoc js/* ./README.md

Generated by JsDoc3

Home