{"id":2657,"date":"2016-06-25T19:13:40","date_gmt":"2016-06-25T19:13:40","guid":{"rendered":"http:\/\/louisc.co.uk\/?p=2657"},"modified":"2016-11-05T11:17:47","modified_gmt":"2016-11-05T11:17:47","slug":"placing-points-along-an-arc-using-geomerative-polygonizer-and-processing","status":"publish","type":"post","link":"https:\/\/louisc.co.uk\/?p=2657","title":{"rendered":"Placing points along an Arc using Geomerative Polygonizer and Processing"},"content":{"rendered":"

This is a follow on from this post on drawing arcs with Geomerative<\/a><\/span><\/strong>, a great library for processing\u00a0(Website<\/a><\/strong><\/span>) by Ricard Marxer<\/a>.<\/strong>\u00a0 I have struggled to find many similar sketches online other than those included in the examples, so i figured I would share my progress. This post whilst keeping a log for my own future use, I hope may serve as a reference for others\u00a0out there with the same aims as me.<\/p>\n

Here we will begin to investigate how we can also place text along these arcs. In order to do so, we will need to establish the coordinates of regularly spaced points along the curve surface. We will also continue on with the same code for familiarity.<\/p>\n

First attempt was to figure out exactly what the getPoints() \u00a0function within the RShape class retrieves. Once we call this function and place the points into a point array, we can draw each one by simply adding a quick for loop (This method is used in the geomerative tutorial “HelloWorld_GetPoints” with text).<\/p>\n

\n\t\t\t\t\t
\n\t\t\t\t\t\t
\"Adding

Adding blue points at each “point” returned by getPoints() function.<\/p><\/div>\n

The code to produce this is:<\/p>\n

<\/div>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n
\r\nimport geomerative.*;\r\n\r\nRShape wave;\r\n\r\nfloat movement=0;\r\nfloat plusminus = 5.0;\r\nfloat scale = 3;\r\n\r\n\/\/Somwhere to store our curve points\r\nRPoint[] points;\r\n\r\nvoid setup()\r\n{\r\n \/\/ From the examples we must always initialise the library using this command\r\n RG.init(this);\r\n \r\n \/\/Usual Processing Jazz\r\n size(800 ,600);\r\n background(255);\r\n frameRate(25);\r\n}\r\n\r\nvoid draw(){\r\n \/\/Blank Background each frame\r\n background(255);\r\n \r\n \/\/Iterate our movement variable for animation\r\n movement += plusminus;\r\n \r\n \/\/Create a new RShape each frame\r\n RShape wave = new RShape();\r\n \r\n \/\/At the moment the wave object is empty, so lets add a curve:\r\n wave.addMoveTo(0*scale, 100*scale);\r\n wave.addBezierTo(0*scale, 100*scale, 50*scale, (25+movement)*scale, 100*scale, 100*scale);\r\n wave.addBezierTo(100*scale, 100*scale, 150*scale, (175-movement)*scale, 200*scale, 100*scale); \r\n \r\n \/\/Lets start to draw away from the edges\r\n translate(30*scale,0*scale);\r\n \r\n \/\/Draw our wave\r\n noFill();\r\n stroke(0);\r\n strokeWeight(1*scale);\r\n wave.draw();\r\n \r\n \/\/Add some points along the curve\r\n points = wave.getPoints(); \r\n \r\n stroke(0, 90, 255); \/\/Blue\r\n strokeWeight(5);\r\n for(int i=0; i&amp;amp;lt;points.length; i++){ point(points[i].x, points[i].y); } \/\/Draw our bezier handle lines strokeWeight(0.5*scale); line(0*scale,100*scale,50*scale,(25+movement)*scale); line(150*scale,(175-movement)*scale,200*scale,100*scale); \/\/Finally draw our defined control points strokeWeight(5*scale); stroke(0, 255, 0); \/\/Green point(0*scale,100*scale); stroke(0, 0, 255); \/\/Blue point(50*scale,(25+movement)*scale); point(150*scale,(175-movement)*scale); stroke(255, 0, 0); \/\/Red point(200*scale,100*scale); \/\/If we are at the top of our movement, reverse the directing by \/\/changing the plusminus variable if(movement &amp;amp;gt; 150)\r\n {\r\n plusminus = -5;\r\n }else if( movement &amp;amp;lt;= 0)\r\n {\r\n plusminus = 5;\r\n }\r\n\r\n}\r\n<\/pre>\n
As the density of points returned by getPoints() is so high, it seems that the whole line is just a badly smoothed blue line. So we can prove to ourselves\u00a0\u00a0this is not the case by quickly plotting half the points:<\/p>\n
\"louisc_co_uk_Geromerative2-000064\"<\/p>\n
Done by adjusting the bounds of the for loop:<\/p>\n
<\/div>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n
\r\nfor(int i=0; i&amp;lt;points.length\/2; i++){\r\n point(points[i].x, points[i].y);\r\n }\r\n<\/pre>\n
That is far too many points for our requirements, now we could look into just drawing every n-th point but the geomerative example alludes to a better way, manipulating the “Polygonizer”.<\/p>\n
Better understanding the Geomerative “Polygonizer”<\/h2>\n
Now these values seem to be something we set in the library directly, rather than to the shape objects themselves, implying that this will cause a global change. Lets have a play and see what some of these options do.<\/p>\n
First lets take the “UNIFORMLENGTH” setting used in the tutorial, manually defining a length of 30 and 100.<\/p>\n
<\/div>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n
\r\n\r\nRG.setPolygonizer(RG.UNIFORMLENGTH);\r\nRG.setPolygonizerLength(30);\r\n\r\n<\/pre>\n
The two resultant outputs are:<\/p>\n
<\/div>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\"Here
Here is an animation of the UNIFORMLENGTH Polygonizer with different lengths of 30 and 100.<\/p><\/div>\n
This simple animation works well to show how the UNIFORMLENGTH mode of the polygonizer responds. As the length of the curve increases, further points are added to maintain the specified\u00a0length between them.<\/p>\n
Next a quick look at the alternative modes of:<\/p>\n
 <\/p>\n
<\/div>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n
\r\nRG.setPolygonizer(RG.UNIFORMSTEP);\r\nRG.setPolygonizerStep(10);\r\n<\/pre>\n
and<\/p>\n
<\/div>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n
\r\nRG.setPolygonizer(RG.ADAPTATIVE);\r\n<\/pre>\n
<\/div>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\"This
This animation compared the ADAPTIVE and UNIFORMSTEP modes of the polygonizer<\/p><\/div>\n
The next post will cover using these points to place text along the curve.
<\/div>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
This is a follow on from this post on drawing arcs with Geomerative, a great library for processing\u00a0(Website) by Ricard Marxer.\u00a0 I have struggled to find many similar sketches online other than those included in the examples, so i figured I would share my progress. This post whilst keeping a log for my own future use, I hope may serve as a reference for others\u00a0out there with the same aims as me. Here we will begin to […]<\/p>\n","protected":false},"author":1,"featured_media":2666,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[103,108,28,1],"tags":[112,113,105,109,110,107],"class_list":["post-2657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kinetic-storyteller","category-programming","category-projects","category-uncategorized","tag-design","tag-geomerative","tag-graphics","tag-processing","tag-programming","tag-tine-bech"],"_links":{"self":[{"href":"https:\/\/louisc.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/louisc.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/louisc.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/louisc.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/louisc.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2657"}],"version-history":[{"count":13,"href":"https:\/\/louisc.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2657\/revisions"}],"predecessor-version":[{"id":2715,"href":"https:\/\/louisc.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2657\/revisions\/2715"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/louisc.co.uk\/index.php?rest_route=\/wp\/v2\/media\/2666"}],"wp:attachment":[{"href":"https:\/\/louisc.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/louisc.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/louisc.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}