CODEWITHSUNDEEP
processingshapes
kelin
kelin

Reputation: 11975

Shape union in processing?

I'm learning processing and trying to create an SVG file containing a complex shape (path) which should be a union of a hexagon and a rectangle. But, unfortunately, I can't find any set operations on PShape.

a hexrect

Upvotes: 1

Views: 636

Answers (1)

kelin
kelin

Reputation: 11975

I found useful ErraticGenerator's answer on Processing forum. The idea is to use g.js library mixed with p5js drawing methods.

Include the script in index.html:

<script src="https://cdn.rawgit.com/nodebox/g.js/master/dist/g.min.js"></script>

Sketch example:

function setup() {
  createCanvas(400, 400)
  noLoop()
}

function draw() {
  let rect = g.rect(50, 50, 100, 100)
  let ellipse = g.ellipse(100, 100, 100, 100)
  let union = g.compound(rect, ellipse, 'union')
  union.fill = null
  union.stroke = 'red'
  union.draw(drawingContext)
}

Path union

This also works in combo with p5.js-svg!

Upvotes: 2

Related Questions