Using SVG shapes into ofxBox2d world

beginners
#1

hello,

I am playing with ofxSVG and ofxBox2d and try to mix the use of both in an example app

I would like to create a wireframe world in SVG format and use the shapes as edge lines in an Box2d world.
Say i draw a rectangle with inkscape and save it as wire.svg

I would like to read it in my app and use this shape as an edgeline that interacts with emitted box2d circles.

I am quite new to using these two addons and i have some hard time understanding how ofPath and ofPolyline works.

I understand i must grab the shape from the svg and add its vertices to my box2d edgeline shape and make it interact with generated shapes. But i am lost translating it code wise.

Any help appreciated

thanks a lot

#2

Hi Gallo,

You can grab the outlines from a path like so:

vector<ofPolyline>& polylines = mypath.getOutline();
for( int i = 0; i < polylines.size(); i++) {
   vector< ofPoint >& poly_verts = polylines[i].getVertices();
   for( int j = 0; j < poly_verts.size(); j++ ) {
      ofPoint vert = poly_verts[j];
      // add the vert to the box 2d shape //
   }
}
#3

thanks a lot Nick.

this is helpful. but i still don’t understand how you define a shape !

Why do i have to grab every point of a shape ? it seems possible to grab every distinct shape at once

say i have a square in svg file. I would like to grab its contour.

is it a path ? a polyline ? a vector of polyline ? a vector of points ? anything else ?

#4

I believe ofxSVG will grab the contour of the square as an ofPath. An ofPath is composed of a vector ofPolylines that can be obtained by using getOutline on the ofPath. A polyline is composed of a vector of ofPoints.
I think ofxSVG will store all of the contours it finds as paths.
So I believe each ofPath in ofxSvg would be a unique shape in the svg file. ofxSVG does not keep association between layer names and shapes.

so you could do something like the following to grab all of the points from the svg file:

for( int k = 0; k < mysvg.getNumPath(); k++) {
   ofPath& mypath = mysvg.getPathAt(k);
   vector<ofPolyline>& polylines = mypath.getOutline();
   for( int i = 0; i < polylines.size(); i++) {
      vector< ofPoint >& poly_verts = polylines[i].getVertices();
      for( int j = 0; j < poly_verts.size(); j++ ) {
         ofPoint vert = poly_verts[j];
         // add the vert to the box 2d shape //
      }
   }
}

If you open the svg file in a text editor, you can see that it uses the xml structure. So if you have simple shapes like a rectangle, you could load the svg file using ofxXmlSettings and traverse the rect tags manually.

#5

Gee ! those Paths and Polylines are really confusing !
I think i get confused by the name of it. For me a path is a set of lines which is a set of points.
Though a polyline sounds like a set of lines which is for me a path…
Why not just use Paths OR Polylines ? i don’t get why both exists… both seems redundant to me.

When do you use one or the other ?