Paper.js: Boolean Path Operations: Subtract between 2 triangles (Path.RegularPolygon) doesn't always work as expected

[alexburner]

I'm trying to recreate an old illustrator project in Paper.js and have run into an odd issue.

If I have 2 triangles, and one has been rotated 180 degrees, the result of their subtraction is incorrect:

Screenshot | Sketch link
---|---
| http://sketch.paperjs.org/#S/zZFBTsMwEEWvYnmTVIqshEoIuWLFBap2waJhMbEniRVjo8mkVVX17rgEQrkBs/vz/3ie7YsM8I5Sy/2AbHpZSBPtTR+BBJOD0HmsxLMIeBJb4F7tsJs80Db6cxdDfqmDSGUwMJIWR4cnNYtidkZncdRi/S0JrJuSrsryJ8AUB3yJPqb5rPFghuyP9eos91o8puZ1talDHe7hHv4b3AKmKDIw5tVTWdzv/r2DdW2b8Jd3VuPUMIHhfDlkDt+CqnXef5GkkYzQZpv0XQ0hDB/RBR6lPrxdPwE=

If the rotation is anything else (disclaimer: not fully tested), such as 179 degrees, the subtraction works as expected:

Screenshot | Sketch link
---|---
| http://sketch.paperjs.org/#S/zZFBTsMwEEWvYnmTIEVWAxIIV131AlVZsCAsJvYkseLa1WTSClW9O25TQrkBs/vz/3ie7ZMMsEOp5VuPbDpZSBPtRR+ABJOD0HosxUoEPIoNcKe22I4eaBP9VxtDfqqCSGUwMJIWB4dHNYlicgZncdDi6SYJrBuTLheLnwBT7HEdfUzzWe3B9Nkf691Z7rR4Ts3zw7IKVbiHe/xvcDOYosjAmJcvr8X97t87WNc0CX9+ZzWMNRMYzudDpvAlqBrn/ZUkjWSENlum76oJod9HF3iQ+uPz/A0=

Am I doing something wrong, or is this an issue with the subtract operation?

Edit:
Issue not specific to 180 degrees, seems to be any multiple of 60

Edit 2:
Issue is specific to triangles, made a new sketch that supports arbitrary number of sides, and other regular polygons appear to be fine:

Screenshot | Sketch link
---|---
| http://sketch.paperjs.org/#S/zZHBbsIwDIZfJcqlRapCAYlDECfYYTe0HnZYd3ATl0bNEpS6IIR496Ut08YbzDd//vXrt33jDr6QS160SKrhGVdeD/0ZAite9y8F27LVpnSlG8jJ2+siEocXdgBqxBseewvhEPnRu/RWOhZLoSMMkp0NXsTUZNOkMxo7OTk/UABt+sgWef4jouBb3Hnro0dSWVBt8jR6N5oaydYR3mdP4Zb/MdwYTARPQJiu1jmbP047Z8vsb47fXbSp67jKeG/R9RUFUJSORpNoEIjaWDsmidIkoE428YFVQGhP3jjquPz4vH8D
| http://sketch.paperjs.org/#S/zZHBbsIwDIZfJcqlRapCYROHIE7bDtwQPeyw7pAmLo2aJSh1QQjx7nNbpo03mG/+/OvXb/vKvfoCLnnRAuqGZ1wHM/QnFVmxfX0r2IY9r0tf+oEcg7ssiHg4s53CRuzh0DsVd8QPwafX0jMqDR4hSnaycBZTk02Tzhro5OR8R1EZ2xNb5PmPCGNo4SW4QB5J5ZRuk4fRuzXYSLYieJs9hFv+x3BjMBEDKoT0aZWz+f20c7bM/ub43cXYuqZVxnuLrq8wKo3paDSJBoGorXNjEpImEUyypgdWEVR7DNZjx+XH5+0b
| http://sketch.paperjs.org/#S/zZHBbsIwDIZfJcqlRapCYRqHIE7bDtwQPeyw7pAmLo2aJSh1QQjx7nNbpo03mG/+/OvXb/vKvfoCLnnRAuqGZ1wHM/QnFVmxfX0r2IY9r0tf+oEcg7ssiHg4s53CRuzh0DsVd8QPwafX0jMqDR4hSnaycBZTk02Tzhro5OR8R1EZ2xNb5PmPCGNo4SW4QB5J5ZRuk4fRuzXYSLYieJs9hFv+x3BjMBEDKoT0aZWz+f20c7bM/ub43cXYuqZVxnuLrq8wKo3paDSJBoGorXNjEpImEUyypgdWEVR7DNZjx+XH5+0b
| http://sketch.paperjs.org/#S/zZHBbsIwDIZfJcqlRapCYVIPQTttO+yG6IHDukOauDRqlqDUBSHEu89tmTbeYL75869fv+0r9+oLuORlB6hbnnEdzNifVGTl++tbyZ5Zsal85UdyDO6yIuLhzLYKW7GDw+BU3BI/BJ9eK8+oNHiEKNnJwlnMTTZPemugl7PzHUVl7EBslec/Ioyhg5fgAnkktVO6Sx5Ge2uwlawgeFs8hFv/x3BTMBEDKoT0qcjZ8n7aJVtnf3P87mJs09Aq071FP9QYlcZ0MppFo0A01rkpCUmTCCbZ0APrCKo7Buux5/Lj8/YN

[lehni]

Have you tried this with the develop branch? I quickly checked, and it seems to be fixed there already:

http://paperjs.org/download/#development-builds

[alexburner]

Just downloaded develop branch and checked, it worked! Thank you :)

[alexburner]

Paper.js continues to be an excellent library for 2D path geometry, many thanks @lehni & co!

[lehni]

@alexburner glad to hear it works, and thanks for the kind words! This example looks great. Could you consider "donating" it to the examples / reference? : )

[alexburner]

I'd be honored to donate to the site! I'll need to tidy up the code a little ;) How should I submit it to you?

[alexburner]

@lehni here's a more reasonable/readable version
https://patterns.website/experiments/paperjs/other/holonstar-6.html
https://github.com/alexburner/experiments/blob/master/paperjs/other/holonstar-6.html

[lehni]

@alexburner that's great! It's a really nice example. I will loo into perhaps animating it somehow.

BTW: instead of triangle.remove(), you can pass insert: false when creating it, should be faster!

[lehni]

I have simplified the code a bit in this sketch

Note that the colors don't work correctly in v0.10.2 but fine in develop, I am not sure why that is.

[alexburner]

@lehni thank you! That insert: false is a nice trick, and looks like you pared down the project hierarchy manipulation in those for loops (much nicer without all the .clone() and .replaceWith() calls). And animations sound like a great idea! I might noodle on that too.

FWIW the colors issue in v0.10.2 might be related to the 180° triangle subtract issue? I'd developed the secondaries before the primaries and noticed—while they did all show up—they showed up out of order. Most of the shapes extracted from the triangles showed up in clockwise order [1, 2, 3], but the second set had children in clockwise [1, 3, 2] order and the third in [2, 3, 1] order. This threw off the whole children[i + j * COUNT] trick. Here's a sketch with some debugging code. In develop they all show up in clockwise [1, 2, 3] order.