SVG displays incorrect fill

tomres

Just want to preface this by stating that I am very new to writing code and this is the first piece of code I've written without strictly following a tutorial. I've tried getting as far with it as possible before giving in and posting here. There are probably redundant parts in my code and probably just some stupid mistakes I made too!

What I'm trying to do is create a very simple program that displays the 'child' layers of an SVG in a timed sequence. I've basically managed to do that (with some small bugs at the start of my program)- my trouble is with the way that the SVG layers are filled in processing (e.g. parts of the layer that are supposed to be unfilled, have a fill).

I've tried using both PShape and the library Geomerative to render the SVG, but am getting the same fill error with both. I've checked to see if the shapes are displayed correctly using an online SVG viewer (http://garyhodgson.github.io/slic3rsvgviewer/) and in this case, the SVG is drawn the right way, so I don't think it's my SVG file that is the issue.

Any help would be appreciated!

Here is my code (using PShape):

PShape parentShape;
PShape layerShape;

int counter;
int numLayers;
float scaleFactor;

final int stateA = 67;
final int stateB = 45;
final int stateC = 20;
float m;
char state;

void setup() {
  size(1024, 768);

  background(0, 0, 0);

  noStroke();

  state='B';
  m=millis();

  scaleFactor=12.19;


  parentShape= loadShape("/Users/tom/Desktop/test.svg");

  parentShape.disableStyle();

  numLayers=parentShape.getChildCount();
  counter=0;

}

void draw() {




  background(25, 0, 0);
  layerShape= parentShape.getChild("layer"+counter);


  layerShape.disableStyle();

  timer();
  blackout();
  translate((width/2)-(parentShape.width*scaleFactor/2), (height/2)-(parentShape.height*scaleFactor/2));
  scale(scaleFactor);
  shape(layerShape);
}

void timer() {

  if (state=='B') {
    if (counter<=5) {
      if (millis()-m>stateC) {
        noStroke();
        fill(0);
        m=millis();
        state='A';
      }
    } else if (counter>5) {
      if (millis()-m>stateA) {
        noStroke();
        fill(0);
        m=millis();
        state='A';
      }
    }
  } else if (state=='A') {
    if (millis()-m>stateB) {
      noStroke();
      fill(255);
      counter=counter+1;
      m=millis();
      state='B';
      println(counter+" of "+numLayers);
    }
  }


}

void blackout() {
  if (counter==numLayers-1) {
    if (looping) { 
      noLoop();
      noStroke();
      fill(0);
    } else loop();
  }
}

Link to the SVG: http://we.tl/Zcfbcby0AB

By ~layer 100, the square developing in the centre gets filled with white and comes back at around layer 190. It should have continued black through those layers but gets filled with white.

koogs

we can't test that without the svg file

tomres

Woops! Updated the original post