2D lineart - culling hidden lines for SVG output / Plotting

Hi All, I would like generatively create something like this, in a 2D lineart/doodle sketch style.

Using PShape seems like the way to go, as a “Building” class with variants for Window, Roof, Door, etc (I’m a beginner with Processing) It seems straightforward to start at the background and progressively overlay objects - The problem is I cannot use fill() to set a white background of each house instance, as I want to use the SVG renderer / output to my plotter.

The only thing I can think of is to draw to the screen initially and use get() to look for all the points of overlap, then somehow use that data to cull lines during the SVG render? Pretty daunting for me, I’m a beginner at Processing.

Perhaps the 2D Boolean operations in GitHub - micycle1/PGS: Processing Geometry Suite but checking if anyone has done something similar, I might be over-thinking this? Thanks!

1 Like

Ok, I think GitHub - micycle1/PGS: Processing Geometry Suite is a way forward - Here’s my quick check

The boxes on the left have fills which wouldn’t work on the plotter.

The boxes on the right are made of :

  1. The foreground box (green), and
  2. the subtraction of the foreground box from the background box (red)

No fill() used on the right hand side - So a bit of playing around to progressively add one house at a time to a resulting shape. Still would be keen to hear how anyone else would approach this one, Cheers!

import processing.svg.*;
import micycle.pgs.*;

boolean plotter = false;

void setup() 
{
  //size(10680, 6240); //a4
  size(1068, 624);
  if (plotter)
  {
    beginRecord(SVG, "test.svg");
  }

  background(255);
  noFill();
  stroke(0);
  strokeWeight(1.0);
  smooth();
}

void draw()
{
  //rect(10, 10, width - 20, height - 20);
  
  //The original houses on the left side (with fills to hide any background houses) 
  House backgroundHouse = new House(100, 100);
  House foregroundHouse = new House(140, 200);

  backgroundHouse.Draw();
  foregroundHouse.Draw();
  
  //Houses put through Processing Geometry Suite on the right side
  int destX = 500;
  int destY = 100;
  PShape bground = PGS_Transformation.translateTo(backgroundHouse.s, backgroundHouse.x, backgroundHouse.y);
  PShape fground = PGS_Transformation.translateTo(foregroundHouse.s, foregroundHouse.x, foregroundHouse.y);
  
  //Show the subtraction of the foreground house from the background
  PShape subtract = PGS_ShapeBoolean.subtract(bground, fground);
  PGS_Conversion.disableAllFill(subtract);
  PGS_Conversion.setAllStrokeColor(subtract, color(100, 0, 0), 2);
  shape(subtract, destX, destY);
  
  //Show the foreground house
  PGS_Conversion.disableAllFill(fground);
  PGS_Conversion.setAllStrokeColor(fground, color(0, 100, 0), 2);
  shape(fground, destX, destY);
  
  if (plotter)
  {
    endRecord();
  }
  noLoop();
}

class House //ok it's not much of a house, it's a box :)
{
  PShape s;
  int x;
  int y;
  
  House(int xPos, int yPos)
  {
    x = xPos;
    y = yPos;
    
    s = createShape();
    s.beginShape();
    s.fill(230);
    s.vertex(0, 0);
    s.vertex(0, 200);
    s.vertex(200, 200);
    s.vertex(200, 0);
    s.endShape(CLOSE);
  }
  
  void Draw()
  {
    shape(s, x, y);
  }
}

1 Like

@mrWoodo – Thanks so much for sharing this. Were you eventually able to arrive at the effect that you wanted using PGS_ShapeBoolean.subtract()?

Hi Jeremy, yes that was the way to go - I got a bit sidetracked and didn’t finish off my project but here’s a small test overlaying hundreds of objects, and subtracting as I went. Probably not the most efficient way of doing it, but worked out well!

1 Like

Hi @mrWoodo, I’m working with SVGs and an AxiDraw pen plotter and came across your posts here. PGS does look promising, but when I ran the sketch as-is and opened the SVG in Illustrator, I realized that the composition retains the internal lines from both intersected squares. In the attached example on the right, I nudged the shapes apart by a bit and you can see that they share two lines.


AxiDraw can draw this just fine, but it will draw those overlapping lines twice. Did you experience this overlap with your final results and if so, was it just not a dealbreaker for your application?

Hi @computershawn, for cleanup (and because I output to an ancient Roland plotter that uses HPGL), I use vpype - Check out the linemerge / linesimplify parameters which might help.

I’ve since gone a completely different route since posting this though - I ran into troubles once there’s too many polygons overlaid on each other. It’s too much work to keep subtracting / unioning / and you end up with runtime errors. This isn’t really a fault of PGS (I tried JTS as well with similar results) as it’s pushing these libs too far.

What I’m trying now is a bit hard to explain, but roughly :
1 - For every output polygon, fill it with a solid colour (starting at 1) and draw that result to an off screen buffer. Keep adding these and incrementing the colour by 1.
2 - Now agains that buffered image, extract a ‘mask’ image one at a time, starting at colour 1 - Convert that mask image to black / white. (So Mask image 1 = only the pixels that were colour 1).
3 - Run PoTrace against that mask, and convert that output to a ‘Mask’ Polygon.
4 - Then calculate the intersection between your original polygon and the Mask Polygon from Step 3, and plot that. Keep doing that for every Polygon + Mask pair.

So instead of building up a progressively bigger and bigger set of polygons, you’re only running the intersection once per shape, in Step 4. (The higher the resolution you use for the buffer image, the better the mask for PoTrace to work with).

Ridiculous I know :slight_smile: See how you go with vpype, but if you run into troubles I’ll post my alternate approach code, Cheers!