<!DOCTYPE html><html><head><meta charset="utf-8"><title>Untitled Document.md</title><style></style></head><body id="preview">
<p>This post outlines the new graphics features and updates that come along with ArrayFire v3.4 release.</p>
<h4><a id="New_Features_56"></a>New Features</h4>
<h6>Vector Fields</h6>
<p>We have added visualisation support to render ArrayFire <a href="http://arrayfire.org/docs/array_8h_source.htm" target="_blank">array</a> objects as vector fields. An example has been added to the ArrayFire's suite of examples to show case this new capability of rendering vector fields. You can refer to the example's source code online over <a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/field.cpp" target="_blank">here</a>. A screenshot of this example that render's a static and dynamic vector field in multi-view mode is shown below.</p>
<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-1024x550.png" alt="vfield" width="742" height="399" class="alignnone size-large wp-image-9185" /></a>
<h6>Overlay support for graphs</h6>
<p>Prior to v3.4 release, each graph such as plot, hist, scatter etc. were rendered one per each view/window. Overlaying one with the other was not supported. This changes with v3.4 release, and from now on every window/view supports overlay of graphs. If you are not already aware of what a view (graphics context) in ArrayFire is: Each draw call in ArrayFire is either rendered to whole window(single view) or a portion of the screen(multiview mode or grid mode), this subset portion of the whole window is called a view.

<p>Given below is a screen shot of mult-view mode which renders an image, two dimensional line plot, histogram and surface. You can find the corresponding example code <a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/pde/swe.cpp" target="_blank">here</a>
<a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/swe.png"><img src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/swe-1024x549.png" alt="swe" width="742" height="398" class="alignnone size-large wp-image-9184" /></a>

The following graphs support overlay if they are of same type of object (2d/3d).</p>
<ul>
<li><a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/plot3.cpp" target="_blank">plot</a> <a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/plot3.png"><img src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/plot3-300x300.png" alt="plot3" width="300" height="300" class="alignnone size-medium wp-image-9211" /></a></li>
<li><a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/histogram.cpp" target="_blank">histogram</a> <a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/histogram.png"><img src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/histogram-300x152.png" alt="histogram" width="300" height="152" class="alignnone size-medium wp-image-9207" /></a></li>
<li><a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/surface.cpp" target="_blank">surface</a> <a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/surface.png"><img src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/surface-300x300.png" alt="surface" width="300" height="300" class="alignnone size-medium wp-image-9212" /></a></li>
<li>vector fields</li>
</ul>
<p>You can see an example screenshot of how overlay of plots looks like below.</p>
<a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/multipleplot.png"><img src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/multipleplot.png" alt="multipleplot" width="1002" height="828" class="alignnone size-full wp-image-9182" /></a>

<h6>Fun Animations</h6>
It is always fun to watch short animations that based off of simple equations. Given below are the animations of our conway, gravity simulation and julia fractal examples, hope you enjoy them as well. You can find the code for these samples here, <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 src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/conway.gif" alt="conway" width="256" height="256" class="alignnone size-full wp-image-9227" /></a> <a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/conway_pretty.gif"><img src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/conway_pretty.gif" alt="conway_pretty" width="256" height="256" class="alignnone size-full wp-image-9228" /></a> <a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/gravity.gif"><img src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/gravity.gif" alt="gravity" width="256" height="256" class="alignnone size-full wp-image-9216" /></a> <a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/julia.gif"><img src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/julia.gif" alt="julia" width="256" height="256" class="alignnone size-full wp-image-9240" /></a>

<h5><a id="Behavioral_Changes_13"></a>Behavioral Changes</h5>
<p>Prior to v3.4 release, all functions that rendered graphs used to compute the axes limits pertaining to corresponding data, automatically. This additional step of computing axes is now not performed any more and the user has to set the graph's axes limits using the new API that has been provided to do the same.

<p>Given below is an example showcasing the changes one has to make to their program if they are using any functions that render graphs such as plot, hist, scatter.</p>

<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>
<p>Above code should render as the following and you can find the complete example <a href="https://github.com/arrayfire/arrayfire/blob/devel/examples/graphics/plot2d.cpp" target="_blank">here</a>.</p>
<a href="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/plot2d.png"><img src="http://sandbox.arrayfire.com/wp-content/uploads/2016/09/plot2d-1024x927.png" alt="plot2d" width="742" height="672" class="alignnone size-large wp-image-9183" /></a>

<h5><a id="Misc_Changes_74"></a>Misc Changes</h5>
<p>Removed <a href="http://glew.sourceforge.net/">GLEW</a> and replaced with <a href="https://github.com/cginternals/glbinding">glbinding</a>.</p>
<h5><a id="Conclusion_77"></a>Conclusion</h5>
<p>We intend to add more graphcis functionality in future releases, keep checking for new posts from us. Please do try the new graphics functionality and kindly let us know if you find any bugs in the library via <a href="https://github.com/arrayfire/arrayfire/issues" target="_blank">github issues</a>. We have a <a href="https://groups.google.com/forum/#!forum/arrayfire-users" target="_blank">google groups forum</a> where you can post your questions as well.</p>

</body></html>