Thank you all for your great replies. In particular I know I'll never be able to read references carefully enough..

Anyway I think sharing the result I got so far, could really help the discussion.

This is a working sketch that asks you to select a SVG file and then begins "drawing" it (something like the OpenCanvas animation effect..)

PShape s;
ArrayList ve;
int nve = 1;

// max length of segments
float slen = 5.0;
// scale factor for the image
float sf = 0.8;
String svgFile = "image.svg";


void setup() {

ve = new ArrayList();

frameRate(20);
size(400, 400);
svgFile = selectInput();
s = loadShape(svgFile);
s.scale(sf);
smooth();
//shape(s);

exVert(s, sf);
println("# of vertex: " + ve.size());
}

void draw(){
if(nve < ve.size()){
  if(((Point) ve.get(nve)).z != -10.0) // a way to separate distinct paths
line(((Point) ve.get(nve-1)).x, ((Point) ve.get(nve-1)).y, ((Point) ve.get(nve)).x, ((Point) ve.get(nve)).y);
//ellipse( ((Point) ve.get(nve)).x, ((Point) ve.get(nve)).y, 2, 2 );
nve++;
}
else{ // restart drawing
background(200);
nve = 1;
}
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// recursively find PShape children and trigger function to get existing vertex and fill-in vertex
//
void exVert(PShape s, float sf) {
PShape[] ch; // children
int n, i;

n = s.getChildCount();
if (n > 0) {
for (i = 0; i < n; i++) {
ch = s.getChildren();
exVert(ch[i], sf);
}
}
else { // no children -> work on vertex
n = s.getVertexCount();
//println("vertex count: " + n + " getFamily():" + s.getFamily()+ " isVisible():" + s.isVisible());
for (i = 0; i < n; i++) {
float x = s.getVertexX(i)*sf;
float y = s.getVertexY(i)*sf;
// println(i + ") getVertexCode:"+s.getVertexCode(i));
if (i>0) {
float ox = s.getVertexX(i-1)*sf;
float oy = s.getVertexY(i-1)*sf;
stepToVert(ox, oy, x, y, slen);
}
else {
ve.add(new Point(x, y, -10.0));
}
}
}
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// fill in with points, if needed, from (ox, oy) to (x, y)
//
void stepToVert(float ox, float oy, float x, float y, float slen) {

int i;
float n;
float dt = dist(ox, oy, x, y);
if ( dt > slen) {
n = floor(dt/slen);
// println("Adding "+n+" points...");
for (i = 0; i < n; i++) {
float nx = lerp(ox, x, (i+1)/(n+1));
float ny = lerp(oy, y, (i+1)/(n+1));
ve.add(new Point(nx, ny, 0));
}
}
ve.add(new Point(x, y, 0));
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// myClass for a 3D point
//
class Point {
float x, y, z;
Point(float x, float y, float z) {
this.x = x;
this.y = y;
this.z = z;
}

void set(float x, float y, float z) {
this.x = x;
this.y = y;
this.z = z;
}
}

So far so good and this is the overall effect I'm looking for, but now I'd like to:

1 - understand why a straight segment joins together some consecutive paths that should be separate

2 - take advantage of functions like bezierPoint, but how do I find out which are the control points?

3 - get the color of the lines/areas as defined in the source file (is it possible?)

- know how to paste formatted code in this forum ;) ... copy as HTML command doesn't seem to work

Hope you like it and of course any feedback and suggestion would be greatly appreciated.

Thanks!

Thanks!

Yeah, I thought that pasting code like that would have made people sad, but now I almost read the forum practices and won't happen again (btw, I think that with "the third (from the left) icon", you actually meant "the third (from the right) icon"). I also don't exactly understand why the topic has been moved since it also provides actual code (badly formatted code) and now even a snapshot, but whatever...

As you can see in the image, during the animation sometimes "the pen doesn't get lifted". Perhaps as PhiLho suggested, these are indeed moveTo commands, but how could I identify them (BREAK vertex found with getVertexCode(), seem to be other things)? This is the first problem in order of priority.

The second is that linear interpolations (lerp) make the lines a little shaky. Infos related to BEZIER_VERTEX types of vertices only seem to be the x,y coordinates, without any control points.

Any ideas?

PhiLho, thank you very much for your notes.

As planned to do, I'm also exploring a little further amnon.owed suggestion, taking a look at the Geomerative library.

Overall opinion 'till now is that it is quite amazing, definitely a very good tool to use to get the result I'm looking for: in particular with getPointsInPaths() it's easy for me to get the "right" distinct paths and resolving one of the above issues.

Still got something to fix, but I feel this it is going in right direction...

and maybe a moveTo "Contributed Library Questions" will be soon in the air ;)

Yes, I ended up using the (great) Geomerative library.

Now everything works fine, even too much, so I decided to add some random noise while the pen animation is "drawing" the paths 

Anyway, here's my code, hoping someone else will find it useful and thank you all for the good support!

1. import geomerative.*;
   import processing.opengl.*;
   //import processing.xml.*;
   
   // global variables
   RShape grp;
   String svgFile;
   ArrayList ve;
   int nve = 1;
   int colo;
   
   // global params
   float pl = 4.0; // maximum segments length
   
   
   void setup() {
   // Initilaize the sketch
   size(400, 400);
   frameRate(24);
   ve= new ArrayList();
   
   // Choice of colors
   background(255);
   fill(255, 102, 0);
   stroke(100);
   strokeWeight(1);
   
   // VERY IMPORTANT: Allways initialize the library in the setup
   RG.init(this);
   
   svgFile = selectInput();
   //svgFile = "image.svg";
   grp = RG.loadShape(svgFile);
   //grp = RG.centerIn(grp, g);
   // Set the origin to draw in the middle of the sketch
   //translate(width/2, 3*height/4);
   // Enable smoothing
   smooth();
   
   RG.setPolygonizer(RG.UNIFORMLENGTH);
   RG.setPolygonizerLength(pl);
   
   exVert(grp);
   println("tot points: " + ve.size());
   println(grp.getTopLeft().x);
   //grp.draw();
   }
   
   void draw() {
   if (nve < ve.size()) {
   //strokeWeight(map(mouseY, 0, height, 1, 10));
   if (((Point) ve.get(nve)).z != -10.0) {
   if (mousePressed) {
   ((Point) ve.get(nve-1)).x += random(-5, +5);
   ((Point) ve.get(nve-1)).y += random(-5, +5);
   //line(((Point) ve.get(nve)).x, ((Point) ve.get(nve)).y, ((Point) ve.get(nve)).x+random(-10, +10), ((Point) ve.get(nve)).y+random(-10, +10));
   }
   line(((Point) ve.get(nve-1)).x, ((Point) ve.get(nve-1)).y, ((Point) ve.get(nve)).x, ((Point) ve.get(nve)).y);
   }
   nve++;
   }
   else { // restart drawing
   delay(3000);
   background(255);
   nve = 1;
   }
   }
   
   // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   // recursively find RShape children and "flattens", by putting vertices inside an array
   //
   void exVert(RShape s) {
   RShape[] ch; // children
   int n, i, j;
   RPoint[][] pa;
   
   n = s.countChildren();
   if (n > 0) {
   ch = s.children;
   for (i = 0; i < n; i++) {
   exVert(ch[i]);
   }
   }
   else { // no children -> work on vertex
   pa = s.getPointsInPaths();
   n = pa.length;
   for (i=0; i<n; i++) {
   for (j=0; j<pa[i].length; j++) {
   //ellipse(pa[i][j].x, pa[i][j].y, 2,2);
   if (j==0)
   ve.add(new Point(pa[i][j].x, pa[i][j].y, -10.0));
   else
   ve.add(new Point(pa[i][j].x, pa[i][j].y, 0.0));
   }
   }
   //println("#paths: " + pa.length);
   }
   }
   
   // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   // Class for a 3D point
   //
   class Point {
   float x, y, z;
   Point(float x, float y, float z) {
   this.x = x;
   this.y = y;
   this.z = z;
   }
   
   void set(float x, float y, float z) {
   this.x = x;
   this.y = y;
   this.z = z;
   }
   }
   

PS: I suspect Zoho again won't really like this formatting, but maybe it's a little better.