Drawing Arcs and Text with the Geomerative Processing Library

Home/Kinetic Storyteller, 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:

public void addBezierTo(float cp1x,
               float cp1y,
               float cp2x,
               float cp2y,
               float endx,
               float endy)

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.

louisc_co_uk_SingleBezier

The code for making this:

import geomerative.*;

RShape wave;

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

void draw(){
}

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:

louisc_co_uk_Geromerative1-000067

wave.addBezierTo(0, 100, 50, 0, 100, 100);

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:

public void addMoveTo(float endx,
             float endy)

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

with:


wave.addMoveTo(0, 100);
 wave.addBezierTo(0, 100, 50, 0, 100, 100);

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:

louisc_co_uk_Geromerative1-000058

The code defining our shape now looks like:


 wave.addMoveTo(0, 100);
 wave.addBezierTo(0, 100, 50, 0, 100, 100);
 wave.addBezierTo(100, 100, 150, 200, 200, 100);

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

louisc_co_uk_Geromerative1-000118

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.

Download

Head over to github:

https://github.com/louisc/processing-standalone-sketches

By | 2016-11-05T11:17:47+00:00 June 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