Changing the colour of an SVG file?

Processing Coding Questions
1

Hi, I am trying to the change the colour of an svg file. I have been able to do this however it also changes the colour of some rectangle which I’m not sure why it is there. Here is a screenshot of what it looks like. Basically it’s doing what I want it to but why is the rectangle there? The sketch wouldn’t accept an exported asset so I have saved the file via save as if that makes any difference?

Capture
Capture1079×468 5.09 KB

Here is the code I have used.

PShape img;

void setup() {
  background(255);
  size(1080, 1920);
  img = loadShape("Untitled-2-01.svg");
}

void draw() {
  img.enableStyle();
  shape (img, 50, 0);
}

I want to be able to select different colour options to change the colour of the image and have also tried loading a png file but haven’t been able to. Any tips?

2

Always call size first in setup!!!

Also, since you‘re Calling shape() in draw, you should also use background(255) in draw as first line, to redraw everything each frame, Else it will just Stack on top and become blurry after some time (or offset any alpha values).

After doing this, and the rect still remains, replace shape(img, 50, 0) with shape(img, frameCount/10, 0); and see if the rect moves too. If it does, that means the rect is part of the Code that draws the PShape and we‘ll have to look there for the problem.

As for changing color, use the .setFill() method.

3

Thanks Lexyth.

As you can tell I’m still getting to grips with it haha. The rect hasn’t moved, does that mean it is something to do with the exported file?

4

No, since the rect didn‘t move, it means it has something to do with the rest of the code, which is a problem, because your Code now should only have :

  PShape img; //could draw a rect, but it would‘ve moved
  size(1080, 1920); //shouldn‘t cause a rect. 
  img = loadShape("Untitled-2-01.svg"); //could contain a rect, but doesn‘t as we‘ve seen
  background(255); //no rect, only paints the whole screen
  img.enableStyle(); // nothing is drawn with this, only some variables are set
  shape (img, frameCount/10, 0); //this could draw a rect, but then it would‘ve moved.

And none if these could possibly cause a rect to be displayed (except the PShape/shape(), but since it didn‘t move, that‘s not it) , if everything went normal.