Geomerative Tutorial. Part 1.

///////////////////////////////////////////////////////////////////////
——— GEOMERATIVE TUTORIAL ————-
///////////////////////////////////////////////////////////////////////

A beginners tutorial to using the Geomerative Library
developed by Ricard Marxer.

Part 1.
Original tutorial written by Mark Webster & published 18/09/2011.

///////////////////////////////////////////////////////////////////////

This is an introductory step by step tutorial to using the Geomerative Library. It includes basic information about the function of various methods and classes within the library and should be of particular help to graphic designers and artists who wish to work with fonts and text. All sketches provided have full comments explaining important aspects of the library. The tutorial sketches are also accompanied by a separate folder which includes a selection of examples developed during the
Typo Générative
workshop in Lure.

>>> You can download all the necessary files for this tutorial here.

We will be doing a second part of tutorials for the Geomerative library very soon.

///////////////////////////////////////////////////////////////////////

Working with the Geomerative Library.

1). a_Geo_Font_01

Open up this first sketch which shows the most basic structure for displaying text with Geomerative. Note the need to first import the Geomerative library at the beginning of our program. All libraries in Processing need to be imported. We then need to ‘initialize’ the Geomerative library which is done in setup by calling RG.init(this)


import geomerative.*;//Import Geomerative library.
...

void setup() {
  size(800, 300);
  background(255);
  smooth();
  RG.init(this); //Initialise the library.

In Processing, we use the PFont class to work with fonts. These are then called with the loadFont or createFont methods. You can read more about these methods here. With Geomerative however, we use the RFont class which is specific to the library and will handle all our loading and displaying of fonts amongst other things. Now, we can only use True Type font types with the library so that means all fonts ending in .ttf. It is important to place these in the folder named ‘data’ at the root of your sketch otherwise we will not be able to access the font.

Once we have all these in place we can simply call our text using draw(). Try playing with different fonts and font sizes. Remember that Geomerative inherits many of Processing’s inbuilt functions such as fill and stroke so that you can change the appearance of your text.

NB. Classes & Methods

RFont is a reduced class variable for creating, holding and drawing text from TrueType Font files. It’s a basic interpreter of TrueType fonts enabling to access any String in the form of a group of shapes. Enabling us in this way to acces their geometry.

2). b_Geo_Font_02

In this sketch we introduce three important classes that will allow us to access data from our shape or font. In this case we will be accessing the vertex points on the outline of a font and using this information to draw small ellipses at each point. Note that there are a number of modes that give different possible approaches to accessing this data and therefore giving very different results. For the time being though, lets just stick with one mode.

Note that there are three major steps in setting up this code. The first is to configure the segment length along our shape using the RCommand class. Next we group that information together with the RGroup class and finally we access this information using the RPoint class.

  //Configure the segment length and mode.
  //Sets the segment length between two points
  RCommand.setSegmentLength(10);//Assign a value of 10, so every 10 pixels.
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
  
   //RCommand.setSegmentator(RCommand.CUBICBEZIERTO);
   //RCommand.setSegmentator(RCommand.ADAPTATIVE);

  //Group together font with text.
  RGroup myGroup = font.toGroup(myText); 
  myGroup = myGroup.toPolygonGroup();
  
  //Access points on our shape/font.
  RPoint[] myPoints = myGroup.getPoints();

  //Draw ellipses at each of these points
  for (int i=0; i<myPoints.length; i++) {
    ellipse(myPoints[i].x, myPoints[i].y, 5, 5);
  }

Try drawing with other shapes, play with size, color, fill and stroke and see how many variations you can create with this basic structure.

NB. Classes & Methods

RCommand is a class that lets us configure certain behaviors in relation to a font’s outline data. We can configure how we will draw from these points. RCommand gives us a number of modes : ADAPTATIVE, UNIFORMLENGTH….amongst others which each have a specific effect on how our outline data is retrieved. RGroup is a class that groups geometric elements together and from which we can draw and transform them, such as Shapes, Polygons or Meshes. RPoint is a very simple class for creating, holding and drawing 2d arrays. It enables us to retrieve the basic data from any shape/font.

3). c_Geo_Font_02b_Vertex

This is just a variation of the above sketch using vertex to draw the outline. You could also use curveVertex if you want curves of course. You can play a little with the different MODES for beginShape() to get some varied forms. Try LINES, TRIANGLES, TRIANGLES_STRIP or QUAD_STRIP. Basically, once you have access to a shapes outline and its points, you can apply any shape you like to create an infinite number of combinations and varied forms.

4). d_Geo_Font_02c_Lines

Again this is a variation of the above basic skeleton. This time we are simply using the line function as a shape. Play with a number of combinations in the code as suggested to get a feel for the many different variations possible. You will need to experiment a little to get the right coordinates.

5). e_Geo_Font_03_Keys

This is the final sketch in the tutorial in which we have added key input and pdf saving. Again, the idea is to play with different shape combinations and fonts to develop a more complex image. Once you have grasped the functioning of this basic structure you should look at some of the examples provided that develop a little further this basic structure.

///////////////////////////////////////////////////////////////////////

Geomerative Examples

1).TypoGeo_Motion_01

displace

We move our ellipses along the x axis which gives a completely different form to our word. Try adding the value ‘n’ to both values for the diameter of our ellipse and see what happens.

 for (int i=0; i<myPoints.length; i++) {
    ellipse(myPoints[i].x, myPoints[i].y, n, 0);// Try adding n to both arguments.
  }

  if (n > 200) {
    n*=-1;
  }
  else {
    n++;
  }

2).TypoGeo_Random

Here we have added a random value called jitter which is affecting our font’s outline making jagged lines. Each time you press on the screen with the mouse a new random value is calculated therefore giving a different result. You can also export an image as a PDF by pressing CONTROL.

3).TypoGeo_Wiggle

Again here we have added a random value to play with the font’s outline except this time we are creating a word in motion. We could use this as a basic sketch to develop a program in which sound is used to affect the outline.

4).TypoGeo_SoundIn

As above but using sound as a parameter to move the font’s outline.

5).TypoGeo_Deform

bubbles

We have developed a class called fontAgent which is really basic but is a good start for developing more complex systems. In this dynamic example, you can interact with the word using the mouse and keyboard.

6).TypoGeo_Motion_02

In this example we have added a random algorithm so that the particles disintegrate slowly in one direction.

7).TypoGeo_ExtraBright

A mix of parameters that interact with your mouse position creating very different dynamic results. Play and save. Thanks to Stéphane Buellet for this fine piece, developed during our Typos Génératives workshop in Lure 2011.

8).TypoGeo_ParticleSystem

typogeo

An autonomous example showing greater complexity in our Pvector class and calling on an ArrayList to create an animated font. Thanks to Alex Le Guillou for this piece developed during the Processing Paris workshops 2011.

9).TypoGeo_Rotate

Does what it says – we rotate our shapes on our outline and that’s it.

10).TypoGeo_Merge

Nice sketch developed by Bertrand Fèvre during the Typo Générative workshop. There are two string values for this one and we merge between the two using a random function. The transition is pretty good.

///////////////////////////////////////////////////////////////////////

Licensed under GNU General Public License
(GPL) version 3.

http://www.gnu.org/licenses/gpl.html

///////////////////////////////////////////////////////////////////////