# Rendering Flow Fields with a Polyline What is a flow field?

A flow field is two-dimensional area where each point has a different value.But these aren’t just random values. A particular point has a particular value and as you move out from that point to neighboring points, you get similar, but gradually changing values. In flow fields, these values are usually interpreted as directions. So if you map your values so they are between 0 and 360, they can be directly used as degrees of direction.

In a word, just think to the position/orientation of iron filings in a magnetic field.

The author of the article has coded its demos in Javascript in a 2D canvas. And with few lines of code like these ones:

```for(var x = 0; x < width; x += res) { for(var y = 0; y < height; y += res) { var value = getValue(x, y); context.translate(x, y); context.rotate(value); context.beginPath(); context.moveTo(0, 0); context.lineTo(10, 1); context.stroke(); } }```

he was able to render image like this one: Seeing this image, I wondered how could I render this kind of image with GeeXLab. The answer was simple: using a polyline.

In GeeXLab, a polyline can be seen as a super line. A polyline is a collection of single lines. These lines can be connected or not. In our case we will use the polyline as a set of individual lines. Polylines can be coded using the gh_polyline lib available in Lua and Python.

I coded a GeeXLab demo and I tried to produce a code similar to the Javascript one, with rotate(), moveTo() and lineTo() functions. Here is a code snippet in Lua of the FRAME script:

```local w2= winW/2 local h2= winH/2   g_vertex_index = 0   for i=1, g_num_lines do local x = random(-w2, w2) local y = random(-h2, h2) translate(x, y) ang = getValue(x, y) rotate(ang) moveTo(0, 0) lineTo(10, 1) stroke() end```

The translate(), rotate(), moveTo() and lineTo() functions are very simple because they only set some variables. The real work takes place in the stroke() function which uses the previous variables to set a new line with gh_polyline.set_vertex_position().

If you look at the source code of the demo, you will find the code of the previous functions:

```function translate(x, y) g_pivot_point.x = x g_pivot_point.y = y end   function moveTo(x, y) g_moveto_point.x = x g_moveto_point.y = y end   function lineTo(x, y) g_lineto_point.x = x g_lineto_point.y = y end   function getValue(x, y) local PI = 3.14159 return (math.sin(x * 0.007 + g_time) + math.sin(y * 0.007 + g_time)) * PI * 0.75 end   function rotate(angle) local s = math.sin(angle) local c = math.cos(angle)   -- translate point back to origin g_lineto_point.x = g_lineto_point.x - g_moveto_point.x; g_lineto_point.y = g_lineto_point.y - g_moveto_point.y;   -- rotate point local xnew = g_lineto_point.x * c - g_lineto_point.y * s; local ynew = g_lineto_point.x * s + g_lineto_point.y * c;   -- translate point back g_lineto_point.x = xnew + g_moveto_point.x; g_lineto_point.y = ynew + g_moveto_point.y; end   function stroke() if (g_vertex_index < (g_num_vertices-2)) then local x = g_pivot_point.x + g_moveto_point.x local y = g_pivot_point.y + g_moveto_point.y gh_polyline.set_vertex_position(polyline, g_vertex_index, x, y, 0, 1) g_vertex_index = g_vertex_index + 1   x = g_pivot_point.x + g_lineto_point.x y = g_pivot_point.y + g_lineto_point.y gh_polyline.set_vertex_position(polyline, g_vertex_index, x, y, 0, 1) g_vertex_index = g_vertex_index + 1 end end```

Once the polyline has been updated, it’s rendered with :

`gh_object.render(polyline)`

You can find the demo (available in three versions) in the full code sample pack in the gl-21/flow-fields/ folder. This demo requires GeeXLab 0.17.4.1 because the demo_v3 calls a new function that sets vertex position and color at the same time: gh_polyline.set_vertex_position_color().

Here are a video and some screenshots:

gl-21/flow-fields/demo_v3/  gl-21/flow-fields/demo_v1/ 