Path / Shape Clipping with Arcs

[Traxus]

I've been having my way with the radial step sequencer project, decided it would be nice to round out the ends to keep it circular no matter how many steps are inserted (anything less than 8 started to look like a polygon as you might expect)

After some fuss and thick headed-ness I was able to round out the outside edges of each switch with no problem.

I tried applying the same logic to the inside edge of the trapezoid, and i can see the path generating, but the fill seems to ignore the new arc...

I'm using the arcTo method but, i have the same results with regular arc in radians, bezierCurveTo and even if i just try to break the line into 2 segments, with the linking point the same distance from the center of the object as their not linked points, as to create a concave polygon.

I did some googling, looks like i need to setup a clipping path or something? I saw a few tutorials but they all refrenced methods that don't yet seem to be avalible in Lemur canvas.

What is protocol for this?

In the image below, you will see the inside arcs being drawn, but the fill ignoring them as a path...

clipping.jpg (80.15 KiB) Viewed 12424 times

[Macciza]

Hi
I think what you are seeing is a problem the current canvas has with filling concave paths incorrectly...
Unfortunately the only solutions are placing a color mask over the top or trying to do the line as a poly line with lots of points....
Hopefully at some point the fill issue will be addressed so the overlaid mask approach is probably best as it is easily deleted later ....

[Softcore]

Hmmm, I dont know if the problem is due to "concave" filling.....As of Lemur 5.2, it seems to not have problems that I had noticed in earlier versions...

More info here:
https://forum.liine.net/viewtopic.php?f=32&t=4034

[Macciza]

Pretty sure it's the concave issue again as mentioned in that post...
Drawing anything with a concave section doesn't fill properly for me. ...
Just tried again with a triangle with concave bottom, it doesn't fill properly...

Yes the other issue with how you draw seems to have been addressed ...

[Traxus]

Hi
I think what you are seeing is a problem the current canvas has with filling concave paths incorrectly...
Unfortunately the only solutions are placing a color mask over the top...

...as in, drawing a black circle in the center? I was afraid of that

or trying to do the line as a poly line with lots of points....
Hopefully at some point the fill issue will be addressed so the overlaid mask approach is probably best as it is easily deleted later ....

Tried this, not sure if I explained it well enough. I only added one point, so 2 line segments, (see screen shot) but the issue remains, the poly is still concave

Hmmm, I dont know if the problem is due to "concave" filling.....As of Lemur 5.2, it seems to not have problems that I had noticed in earlier versions...

More info here:
https://forum.liine.net/viewtopic.php?f=32&t=4034

Just updated to v 5.2 editor to be sure, but issue persists. As I understand it your shape is 'less concave' than mine. So if we were to abstract our shapes into straight lined ploygons, your lemur logo would be something close to a triangle where as mine would look like an L (still concave).

Pretty sure it's the concave issue again as mentioned in that post...
Drawing anything with a concave section doesn't fill properly for me. ...
Just tried again with a triangle with concave bottom, it doesn't fill properly...

Yes the other issue with how you draw seems to have been addressed ...

Reinforces above theory...


Years ago I used to build maps for an old mac FPS game called marathon. The Editor was a 2D grid, you would draw the map from above and then set the elevation of each polygon to make stairs or balconys or whatever... Anyway, it had the same deal, you couldn't create concave polygons. If you needed a concave poly, you would do it by creating a series of convex polys. That said, I feel like if I pulled a bit more of my hair out, and split up each switch into 3 or 4 convex polys i could get the desired shape i wanted... challenge is that doing this iterivley for x amount of switches might be a bit much for my intro to canvas...

concave.jpg (39.85 KiB) Viewed 12386 times

Marathon Emergency Systems Broadcast
Today at 0820 hours, the Marathon came under surprise attack from unknown hostile forces. The Marathon has sustained serious damage.
At 0830 hours, alien forces boarded the Marathon. The current situation is dire. All personnel are required to arm themselves and fight for their lives. <Posted 2794.7.3.14.08.39>


INCOMING MESSAGE FROM LEELA
Welcome to the Marathon. I am Leela, one of the two surviving Artificial Intelligences aboard the Marathon. I have been severely damaged, and am working to understand the current situation...
https://itunes.apple.com/us/app/maratho ... 05412?mt=8

[Macciza]

Marathon...
I guess thats a game that shows once age somewhat . . .
Might have to look at the iOS version for nostalgic purposes . . .

Simplest proof is the bezier curve with convex concave section, as in top bits of Lemur logo . .
Use that as the edge of a shape and stroke it and it looks fine, then fill it to see the concave problem . . .
For the polyLine or better still polyLineArc solution it would be a case of doing the maths to plot as many points as possible to get it smooth i.e. Lots . .
Using a mask is what i have done, if it is placed properly in the scheme of things then even transforms ,scale,rotation, are not too much of a problem ...

I have gone with the mask so far because it should be easily removed when the issue is fixed...
Though a drop in polyLineArc() solution would be good for arc segments - drop in in the sense of identical args so you later only need to change the function name

cheers

[Traxus]

Masking is the only way to go, the more I think about it.

The issue with a polyLineArc method is that, at least in my case, it would still require that each line segment of the arc was the inside most line of its own shape. Each point in the polyArc would be the inside most point of a line extending to the outer edge of the circle, per the red lines in the image below. Failure to implement any of these lines creates a concave poly and thus the problem would persist. Writing the logic to iterate through enough arc segments to make the polyArc look like an arc would be a royal PITA and probably weigh down the draw() function more than necessary.

Furthermore, it is impossible to apply this logic to an actual arc, as the inner most path would not be a line segment but a concave arc segment, no matter which way you slice it. So its not pretty, but masking is the only option...


This is how we used to make rounded corners in marathon:

divisions.jpg (39.32 KiB) Viewed 12360 times

[Macciza]

Hi
The polyLineArc I envisaged is a multi segment arc, using the same sort of sin & cos loop structure as already in use
This way you would have a nested loop drawing the inside 'curve', using 16 points would probably look fine
Otherwise it is some sort of mask approach, quadrant, circle,arc with thick line etc