{"id":2623,"date":"2016-06-23T16:37:34","date_gmt":"2016-06-23T16:37:34","guid":{"rendered":"http:\/\/louisc.co.uk\/?p=2623"},"modified":"2016-11-05T11:17:47","modified_gmt":"2016-11-05T11:17:47","slug":"drawing-arcs-and-text-with-the-geomerative-processing-library","status":"publish","type":"post","link":"https:\/\/louisc.co.uk\/?p=2623","title":{"rendered":"Drawing Arcs and Text with the Geomerative Processing Library"},"content":{"rendered":"
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\"Stick

Download Code for Mr Wavy Dude below.<\/p><\/div>\n

Fist introduced\u00a0in this post\u00a0(, I am currently working on a project titled the “Kinetic Story Teller” with friend and artist\u00a0Tine Bech<\/a>. \u00a0This is a visual arts interaction piece and as such I am \u00a0learning Processing<\/a>. This is another post sharing logging and sharing my learning journey.<\/p>\n

The new visual design will re-focus the piece on a concept which was part of the original plan; the idea of flow and waves. These will be waves of information drawn in a playful manner from twitter based on #tags each participant can select.<\/p>\n

Back to the task at hand! I found a great library named “Geomerative” \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

Geomerative Bezier Lines<\/h2>\n

From what I understand thus\u00a0far, the geomerative library allows for the definition of a RShape object. This object is formed of a series of path objects of type RPath. The RShape object provides a range of utility functions for interfacing with and manipulating the generated shape.<\/p>\n

In our case once we generate our RShape object, we will want to add a curve, looking though the documentation here<\/a>, we do this by calling:<\/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\npublic void addBezierTo(float cp1x,\r\n               float cp1y,\r\n               float cp2x,\r\n               float cp2y,\r\n               float endx,\r\n               float endy)\r\n<\/pre>\n
The documentation defines the following parameters:<\/p>\n
cp1x – the x coordinate of the first control point of the bezier.
\ncp1y – the y coordinate of the first control point of the bezier.
\ncp2x – the x coordinate of the second control point of the bezier.
\ncp2y – the y coordinate of the second control point of the bezier.
\nendx – the x coordinate of the ending point of the bezier.
\nendy – the y coordinate of the ending point of the bezier.<\/p>\n
Lets explore what these mean with some drawing examples. Lets begin by creating a simple script drawing a single bezier curve. Here cp1 is green, cp2 blue and end is red.<\/p>\n
\"louisc_co_uk_SingleBezier\"<\/p>\n
The code for making this:<\/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\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(640 ,380);\r\n  background(255);\r\n  \r\n  \/\/Set up a little for the look and feel\r\n  \/\/fill(255, 102, 0);\r\n  stroke(0);\r\n  strokeWeight(2);\r\n    \r\n  \/\/Now we generate a new RShape object in which to create our wavy shape and \r\n  \/\/assign its reference as wave\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.addBezierTo(0, 0, 50, 0, 100, 100);\r\n   \r\n  \/\/Lets start to draw away from the edges\r\n  translate(width\/4, height\/4);\r\n  \/\/Draw our wave shape\r\n  wave.draw();\r\n  \r\n  \/\/Create a visual reference for our control points\r\n  strokeWeight(0.5);\r\n  line(0,0,50,0);\r\n  strokeWeight(5);\r\n  stroke(0, 255, 0); \/\/Green\r\n  point(0,0);\r\n  stroke(0, 0, 255); \/\/Blue\r\n  point(50,0);\r\n  stroke(255, 0, 0); \/\/Red\r\n  point(100,100);\r\n}\r\n\r\nvoid draw(){\r\n}\r\n\r\n<\/pre>\n
Now in our case we\u00a0would like to start from the bottom, but, moving the coordinates for cp1 down to 0, 100 did not have the desired result:<\/p>\n
\"louisc_co_uk_Geromerative1-000067\"<\/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\nwave.addBezierTo(0, 100, 50, 0, 100, 100);\r\n<\/pre>\n
So, it seems cp1 is exactly that, a control point not a start point. So a little investigation on how to move this point uncovers the function:<\/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\npublic void addMoveTo(float endx,\r\n             float endy)\r\n<\/pre>\n
Adding this moves the starting point back to the same value as cp1:
\n\"louisc_co_uk_Geromerative1-000074\"<\/p>\n
with:<\/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\nwave.addMoveTo(0, 100);\r\n wave.addBezierTo(0, 100, 50, 0, 100, 100);\r\n\r\n<\/pre>\n
Ok so since we have a better idea of what these points do, lets try to extend our shape to make it more ‘wave’ like. I have also added some coordinate references to give a better idea of whats going on:<\/p>\n
\"louisc_co_uk_Geromerative1-000058\"<\/p>\n
The code defining our shape now looks like:<\/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\n wave.addMoveTo(0, 100);\r\n wave.addBezierTo(0, 100, 50, 0, 100, 100);\r\n wave.addBezierTo(100, 100, 150, 200, 200, 100);\r\n\r\n<\/pre>\n
Finally, lets complete the wave shape by adding a final curve:<\/p>\n
\"louisc_co_uk_Geromerative1-000118\"<\/p>\n
So, we have used the geomerative library to create our first shape which is a series of bezier curves. The next step is to translate this into an object and design in a way to create variations of this curve for each object.<\/p>\n
Download<\/h1>\n
Head over to github:<\/p>\n
https:\/\/github.com\/louisc\/processing-standalone-sketches
<\/div>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2650,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[103,28,30],"tags":[112,113,105,109,110,107,111],"class_list":["post-2623","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kinetic-storyteller","category-projects","category-tinkering","tag-design","tag-geomerative","tag-graphics","tag-processing","tag-programming","tag-tine-bech","tag-visuals"],"_links":{"self":[{"href":"https:\/\/louisc.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2623","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=2623"}],"version-history":[{"count":24,"href":"https:\/\/louisc.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2623\/revisions"}],"predecessor-version":[{"id":2716,"href":"https:\/\/louisc.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2623\/revisions\/2716"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/louisc.co.uk\/index.php?rest_route=\/wp\/v2\/media\/2650"}],"wp:attachment":[{"href":"https:\/\/louisc.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/louisc.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/louisc.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}