Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Chaos in Swift with Metal

DZone's Guide to

Chaos in Swift with Metal

Metal is the go-to solution for all things visual in swift. Learn how to use it to impress your friends with cool visualizations. Or at least learn more about metal and swift.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

Inspired by this tweet from Erwin Santacruz, the owner of http://houdinitricks.com, I thought it was high time that I played with some strange attractors in Swift. Strange attractors are equations that represent behavior in a chaotic system and one of the most famous is the Lorenz Attractor which is a simplified model of atmospheric convection.

Although attractors can create some beautiful patterns, the maths behind them is surprisingly simple. For a typical solution for the Lorenz Attractor, given a single point in three-dimensional space, with each time step, its coordinates are updated with the following code:

float sigma = 10.0;
float beta = 8.0 / 3.0;
float rho = 28.0;
float deltaX = sigma * (y - x);
float deltaY = x * (rho - z) - y;
float deltaZ = x * y - beta * z;


This task is ideally suited to Metal, where individual points can be calculated and rendered super quickly. Although the points are three-dimensional, I decided to stick with a compute shader and render to a two-dimensional texture using my own faux-3D approach. The fundaments of the structure aren't a million miles away from my previous experiments with particle systems under Metal

The project begins with what is effectively an array 222 or 4,194, 304 in size. The first item of this array is given a vector of three random floating point values. Inside the Metal compute shader, an index defines which point, or item in the array, needs to be calculated next using the formula above. The index is incremented with each step.

The faux-3D rendering renders the system rotating around a vertical axis. To do this, the y coordinate of the point maps directly to the screen's y coordinate.  However the screen's x coordinate is the point's x multiplied by the sine of the rotation angle added to the point's z multiplied by the cosine of the rotation angle:

(thisPoint.x * sin(angle) + thisPoint.z * cos(angle)) * scale


I've added an implementation of Bresenham's line algorithm to the shader to draw a continual line between the points. Even with the line drawing and millions of points, my iPad Pro runs at 60fps rendering pretty nice results:


The final project is available here–enjoy! For some stunningly rendered strange attractors with accompanying maths, check out Strange Attractors on Behance.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
swift ,visualizations ,metal

Published at DZone with permission of Simon Gladman, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}