Drawing Arcs and Text with the Geomerative Processing Library

/, Projects, Tinkering/Drawing Arcs and Text with the Geomerative Processing Library

Drawing Arcs and Text with the Geomerative Processing Library

Stick Figure Waving Arms

Download Code for Mr Wavy Dude below.

Fist introduced in this post (, I am currently working on a project titled the “Kinetic Story Teller” with friend and artist Tine Bech.  This is a visual arts interaction piece and as such I am  learning Processing. This is another post sharing logging and sharing my learning journey.

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.

Back to the task at hand! I found a great library named “Geomerative”  (Website) by Ricard Marxer.  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 out there with the same aims as me.

Geomerative Bezier Lines

From what I understand thus far, 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.

In our case once we generate our RShape object, we will want to add a curve, looking though the documentation here, we do this by calling:

<br />
public void addBezierTo(float cp1x,<br />
               float cp1y,<br />
               float cp2x,<br />
               float cp2y,<br />
               float endx,<br />
               float endy)<br />

The documentation defines the following parameters:

cp1x – the x coordinate of the first control point of the bezier.
cp1y – the y coordinate of the first control point of the bezier.
cp2x – the x coordinate of the second control point of the bezier.
cp2y – the y coordinate of the second control point of the bezier.
endx – the x coordinate of the ending point of the bezier.
endy – the y coordinate of the ending point of the bezier.

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.


The code for making this:

<br />
import geomerative.*;</p>
<p>RShape wave;</p>
<p>void setup()<br />
{<br />
  // From the examples we must always initialise the library using this command<br />
<p>  //Usual Processing Jazz<br />
  size(640 ,380);<br />
<p>  //Set up a little for the look and feel<br />
  //fill(255, 102, 0);<br />
  stroke(0);<br />
<p>  //Now we generate a new RShape object in which to create our wavy shape and<br />
  //assign its reference as wave<br />
  RShape wave = new RShape();</p>
<p>  //At the moment the wave object is empty, so lets add a curve:<br />
  wave.addBezierTo(0, 0, 50, 0, 100, 100);</p>
<p>  //Lets start to draw away from the edges<br />
  translate(width/4, height/4);<br />
  //Draw our wave shape<br />
<p>  //Create a visual reference for our control points<br />
  strokeWeight(0.5);<br />
  line(0,0,50,0);<br />
  strokeWeight(5);<br />
  stroke(0, 255, 0); //Green<br />
  point(0,0);<br />
  stroke(0, 0, 255); //Blue<br />
  point(50,0);<br />
  stroke(255, 0, 0); //Red<br />
  point(100,100);<br />
<p>void draw(){<br />

Now in our case we would like to start from the bottom, but, moving the coordinates for cp1 down to 0, 100 did not have the desired result:


<br />
wave.addBezierTo(0, 100, 50, 0, 100, 100);<br />

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:

<br />
public void addMoveTo(float endx,<br />
             float endy)<br />

Adding this moves the starting point back to the same value as cp1:


<p>wave.addMoveTo(0, 100);<br />
 wave.addBezierTo(0, 100, 50, 0, 100, 100);</p>

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:


The code defining our shape now looks like:

<p> wave.addMoveTo(0, 100);<br />
 wave.addBezierTo(0, 100, 50, 0, 100, 100);<br />
 wave.addBezierTo(100, 100, 150, 200, 200, 100);</p>

Finally, lets complete the wave shape by adding a final curve:


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.


Head over to github:


By |2016-11-05T11:17:47+00:00June 23rd, 2016|Kinetic Storyteller, Projects, Tinkering|1 Comment

About the Author:

A PhD in Electronic Engineering. A love for photography (www.islou.co.uk). An interest in tinkering, electronics and design. (www.louisc.co.uk).

One Comment

  1. […] Uncategorized/Placing points along an Arc using Geomerative Polygonizer and Processing Previous […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.