This post outlines the new graphics features available in ArrayFire v3.4:  Vector Fields, Overlays

[custom_headline type="left" level="h3" looks_like="h3"]Vector Fields[/custom_headline]

We have added visualization support to render ArrayFire <a href="http://arrayfire.org/docs/array_8h_source.htm" target="_blank">array</a> objects as vector fields. An <a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/field.cpp">example</a> of how to visualize vector fields is included in ArrayFire v3.4. A screenshot of this example's output in multi-view mode is shown below, showcasing both static and dynamic vector field rendering.

<a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/vfield.png"><img class="alignnone size-large wp-image-9185" src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/vfield-1024x550.png" alt="vfield" width="742" height="399" /></a>

[custom_headline type="left" level="h3" looks_like="h3"]Overlays[/custom_headline]

Previously, each graph (such as plot, hist, scatter, etc) was rendered in its own window (or view). Overlaying graphs was not supported. ArrayFire v3.4 now support graph overlays.

Each draw call in ArrayFire is either rendered to a whole window (single view) or to a view, which is a portion of the screen obtained in multiview mode.

The following image is an example of a graph overlay:

<a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/multipleplot.png"><img class="alignnone size-full wp-image-9182" src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/multipleplot.png" alt="multipleplot" width="1002" height="828" /></a>

The following graphs support overlay if they are of same type of object (2d/3d):
<table width="100%">
<tbody>
<tr>
<td><a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/plot3.cpp" target="_blank">plot</a></td>
<td><a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/plot3.png"><img class="alignnone size-medium wp-image-9211" src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/plot3-300x300.png" alt="plot3" width="300" height="300" /></a></td>
</tr>
<tr>
<td><a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/histogram.cpp" target="_blank">histogram</a></td>
<td><a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/histogram.png"><img class="alignnone size-medium wp-image-9207" src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/histogram-300x152.png" alt="histogram" width="300" height="152" /></a></td>
</tr>
<tr>
<td><a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/surface.cpp" target="_blank">surface</a></td>
<td><a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/surface.png"><img class="alignnone size-medium wp-image-9212" src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/surface-300x300.png" alt="surface" width="300" height="300" /></a></td>
</tr>
<tr>
<td><a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/field.cpp" target="_blank">vector fields</a></td>
<td><a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/vfield.png"><img src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/vfield-300x161.png" alt="vfield" width="300" height="161" class="alignnone size-medium wp-image-9185" /></a></td>
</tr>
</tbody>
</table>
[custom_headline type="left" level="h3" looks_like="h3"]Animations[/custom_headline]

ArrayFire v3.4 includes the following examples of producing fun animations based on simple equations: <a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/conway.cpp" target="_blank">conway</a>, <a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/conway_pretty.cpp" target="_blank">conway_pretty</a>, <a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/gravity_sim.cpp" target="_blank">gravity</a>, and <a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/fractal.cpp" target="_blank">julia fractal</a>.

<a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/conway.gif"><img class="alignnone size-full wp-image-9227" src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/conway.gif" alt="conway" width="256" height="256" /></a> <a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/conway_pretty.gif"><img class="alignnone size-full wp-image-9228" src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/conway_pretty.gif" alt="conway_pretty" width="256" height="256" /></a> <a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/gravity.gif"><img class="alignnone size-full wp-image-9216" src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/gravity.gif" alt="gravity" width="256" height="256" /></a> <a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/julia.gif"><img class="alignnone size-full wp-image-9240" src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/julia.gif" alt="julia" width="256" height="256" /></a>

[custom_headline type="left" level="h3" looks_like="h3"]Behavioral Changes[/custom_headline]

In previous versions of ArrayFire, axes limits were computed automatically to fit the data. In ArrayFire v3.4, users are required to set axes limits, as shown below:
<pre><code class="language-cpp">
af::Window myWindow(800, 800, "2D Plot example: ArrayFire");

array Y;
int sign = 1;
array X = seq(-af::Pi, af::Pi, PRECISION);
array noise = randn(X.dims(0))/5.f;

myWindow.grid(2, 1);
// Set the axes limits to view (0,0), prior to v3.4 this was not needed
myWindow(0, 0).setAxesLimits(-2 * af::Pi, 2 * af::Pi, -1, 1, true);
// Set the axes limits to view (0,0), prior to v3.4 this was not needed
myWindow(1, 0).setAxesLimits(-2 * af::Pi, 2 * af::Pi, -1.25, 1.25, true);

for (double val=0; !myWindow.close(); )
{
    Y = sin(X);

    myWindow(0,0).plot(X, Y);
    myWindow(1,0).scatter(X, Y + noise, AF_MARKER_POINT);

    myWindow.show();

    X = X + PRECISION * float(sign);
    val += PRECISION * float(sign);

    if (val >af::Pi) {
        sign = -1;
    } else if (val < -af::Pi) {
        sign = 1;
    }
}
</code></pre>
The code above produces the output below. You can find the complete example <a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/plot2d.cpp" target="_blank">here</a>.

<a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/plot2d.png"><img class="alignnone size-large wp-image-9183" src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/plot2d-1024x927.png" alt="plot2d" width="742" height="672" /></a>

<strong>Miscellaneous Change</strong>

Removed <a href="http://glew.sourceforge.net/">GLEW</a> and replaced with <a href="https://github.com/cginternals/glbinding">glbinding</a>.

[custom_headline type="left" level="h3" looks_like="h3"]Download[/custom_headline]

ArrayFire v3.4 can be downloaded from these locations:
<ul>
 	<li><a href="http://sandbox.arrayfire.com/download/">Binaries</a></li>
 	<li><a href="https://github.com/arrayfire">Source code</a></li>
</ul>
[custom_headline type="left" level="h3" looks_like="h3"]Community[/custom_headline]

ArrayFire is continually improving through the addition of new visualization functions. We welcome your feedback:
<ul>
 	<li>General discussion forums on the <a href="https://groups.google.com/forum/#!forum/arrayfire-users">ArrayFire Google Group</a></li>
 	<li>Live discussion chat on the <a href="https://gitter.im/arrayfire/arrayfire?utm_source=badge&amp;utm_medium=badge&amp;utm_campaign=pr-badge&amp;utm_content=badge">ArrayFire Gitter</a></li>
 	<li>Issue reports on the <a href="https://github.com/arrayfire/arrayfire/issues">ArrayFire GitHub</a></li>
</ul>
Finally, as you find success with ArrayFire, we invite you to contribute a post to this blog to share with the broader community. Email <a href="mailto:scott@arrayfire.com">scott@arrayfire.com</a> to contribute to this blog.