How can I extrude a complex SVG in processing

Question

I'm currently trying to extrude PShape that was created with an SVG file from Adobe Illustrator. My current approach + image is posted below:

Create the base image shape
Create a copy of the base image with z offset

Connect each vertex from both shapes and make it a QUAD_STRIP

PShape group = createShape(GROUP); 
//1. Create the base image shape   
PShape s = createShape(0); //Base Shape
//2. Create a copy of the base image with `z` offset
PShape s2 = createShape(offset);
//3. Connect each vertex from both shapes and make it a `QUAD_STRIP`
PShape connect = connectShapes(s, s2, offset);
group.addChild(s);
group.addChild(s2);
group.addChild(connect);
shape(group, 0, 0, size, size);

PShape createShape(int offset){
    PShape s = loadShape("logo.svg");
    s.translate(0,0,offset);
    return s;
}

PShape connectShapes(PShape normal, PShape extruded, int offset){
    PShape normalChild = normal.getChild(0);
    PShape extrudedChild = extruded.getChild(0);

    println("normalChild.getVertexCount(): " + normalChild.getVertexCount());
    println("extrudedChild.getVertexCount(): " + extrudedChild.getVertexCount());

    PShape s = createShape();
    s.beginShape(QUAD_STRIP);
    for (int i = 0; i < normalChild.getVertexCount(); i++) {
        PVector n = normalChild.getVertex(i);
        PVector e = extrudedChild.getVertex(i);
        s.vertex(n.x, n.y, 0);
        s.vertex(e.x, e.y, offset);
    }
    s.endShape();
    return s;
}

What I'm trying to mimic...

What my code is doing...

UPDATE:

Added SVG source

Here is the link to the SVG [source](https://drive.google.com/file/d/1XTJIa5972ja24mXogFBcDWLEtOTj81PQ/view?usp=sharing) — Dominic Cabral, Feb 22 '18 at 21:30
Your SVG is good, clean single shape so the problem isn't there. I haven't used PShape, but looking closely, it is placing vertexes for all coordinates in the `C` command (quadratic bézier) of the outer circle, so it seems that PShape doesn't know how to handle bézier curves. You could try converting the outer circle into line segments like this: https://graphicdesign.stackexchange.com/questions/62577/approximate-smooth-path-with-line-segments — methodofaction, Feb 22 '18 at 23:11
I tried that out an it seemed to do the trick for the outer-circle issue. The last thing now is to figure out how to the QUAD_STRIP work as desired. Similar to the first image. Here is a [sample](https://i.imgur.com/G3d1r1b.png) of where I am at now. — Dominic Cabral, Feb 23 '18 at 01:26
Same thing, select the inner "pie slices" and convert to the curves into line segments. — methodofaction, Feb 23 '18 at 17:31

H.Scheidl · Answer 1 · 2018-02-25T20:50:55.133

The final image seems to be according the implementation of PShape.getVertex(int i). The round parts of the logo are Bézier curves, represented by control points, and those are the points returned by getVertex. What you need is to get the points along the curves. You could achieve that by for example:

Recreating the SVG, simplifying the Bézier curves into line segments, then use your current algorithm. For example in Inkscape, you can use the Flatten Bézier command, example below:

Use another library to import the SVG, and use Processing methods to create the logo shape in 2D and then in 3D.

How can I extrude a complex SVG in processing

1 Answers1