How mask SVG in Processing

Hi! I’m trying to make a SVG cutter. The goal is to upload SVG, cut it to specific shape and export back.
Logic is → upload SVG → convert it → cut it → export it.

I’m stuck.
I upload SVG, rebuild it with vectors in Processing, but can’t mask it.
I tried to cut it with If statement, getChild and getVertex. This works, but leaves traces and bugs.

What am I doing wrong? Is there any way to mask SVG and export it with that mask?

If I misunderstood something or created topic in wrong category, please tell me.
P. S. Excuse me for my English, it’s not my native language.

import processing.svg.*;

PShape test;
PShape cut;
PShape realcut;

PVector shape;

void setup() {
 size (600, 600, SVG, "110_test_2.svg");
  test = loadShape ("110 for test.svg");

int count = test.getChildCount();
  println(count);
  cut = test.getChild(0);
  smooth();

 for (int i = 0; i < cut.getChildCount(); i++) {
    for (int j = 0; j < cut.getChild(i).getVertexCount(); j++) {
      println(cut.getChild(i).getVertex(j));

 /*
Tried to make a cut shape. But can't make this work.
 realcut = createShape();
  realcut.beginShape();
  realcut.beginContour();
  realcut = createShape(TRIANGLE, width, 0, width, height, 0, height);
  realcut.noStroke();
  realcut.fill(255);
  realcut.vertex(width, 0);
  realcut.vertex(width, height);
  realcut.vertex(0, height);
  realcut.endContour();
  realcut.endShape();
*/

smooth();

 void draw() {
  background (255);
  fill(0);
  stroke(0);

// Rebuilding shape in processing
  beginShape();

// My SVG have 3 elements, so I draw one by one.
//  if (cut.getChild(i).getVertex(j).y < 300) — this statement cut shape in half
  for (int i = 0; i < 1; i++) {
    for (int j = 0; j < cut.getChild(i).getVertexCount(); j++) {
      if (cut.getChild(i).getVertex(j).y < 300) {
        vertex(cut.getChild(i).getVertex(j).x, cut.getChild(i).getVertex(j).y);
      } else {
        vertex(cut.getChild(i).getVertex(j).x, 300);
      }
    }
  }
  endShape();
  beginShape();
 
 // Second element (child)
  for (int i = 1; i < 2; i++) {
    for (int j = 0; j < cut.getChild(i).getVertexCount(); j++) {
      if (cut.getChild(i).getVertex(j).y < 300) {
        vertex(cut.getChild(i).getVertex(j).x, cut.getChild(i).getVertex(j).y);
      } else {
        vertex(cut.getChild(i).getVertex(j).x, 300);
      }
    }
  }
  endShape();
  beginShape();
 
 // Last one
  for (int i = 2; i < 3; i++) {
    for (int j = 0; j < cut.getChild(i).getVertexCount(); j++) {
      //vertex(cut.getChild(i).getVertex(j).x, cut.getChild(i).getVertex(j).y);
      if (cut.getChild(i).getVertex(j).y < 300) {
        vertex(cut.getChild(i).getVertex(j).x, cut.getChild(i).getVertex(j).y);
      } else {
        vertex(cut.getChild(i).getVertex(j).x, 300);
      }
    }
  }
  endShape();
}
1 Like

Can you provide an example svg file of the kind of svg you are trying to “cut”?

Processing loadShape only supports part of the SVG format.

Also, PShape encodes different for svg import and things created using createShape(with a shape argument) or just pure vertex adding. The data is not all kept in one unified way internally – this can be surprising.

Hi Jeremy!

I’d like to cut any type of SVG. No matter how much verticies or childerns it have.

For example, i want to cut this lettering in half.
https://drive.google.com/open?id=1VHYzwCC3Ro9PecZ4yBy9ga0K7Op8GWU6

By cutting i mean deleting verticies, not masking it.

Is it possible in Processing?

Well, you can cut anything in half at the pixel level by using pixel-based masking, as with PImage.mask()

https://processing.org/reference/PImage_mask_.html

But deleting vertices won’t “cut” a closed shape – that will warp it, and the close point will be a ramp between the remaining ends. To cut a shape like scissors, you usually – at a minimum – need to insert new points in the path along your cut line. How you insert those points can also depend on whether the parts leading to them are curves or straight line segments.

If you want a general purpose solution, pixel-based masking is simple and robust.