Arc sweep direction in two.js

Question

two.js library has a function as follows;

makeArcSegment two.makeArcSegment(ox, oy, ir, or, sa, ea, res);

I calculate my parameters as follows;

var prevPt = points[i - 1];

var dxNext = nextPt.x - pt.x;
var dyNext = nextPt.y - pt.y;
var angleNext = Math.atan2(dyNext, dxNext);

var dxPrev = prevPt.x - pt.x;
var dyPrev = prevPt.y - pt.y;
var anglePrev = Math.atan2(dyPrev, dxPrev);

var innerRadius = 0;
var outerRadius = 20;

var arc = two.makeArcSegment(pt.x, pt.y, innerRadius, outerRadius, anglePrev, angleNext)

And my output is kind of unexpected.

At first node (after the line with the length of 225.46), sweep direction is counter clockwise. At second node (after 142.35), sweep direction is clockwise.How do I force it to be always counter clockwise?

Thanks.

MBo · Answer 1 · 2020-03-10T07:34:29.937

0

According to this if you make the arc.endAngle less than the arc.startAngle then it should go in the opposite direction..

So you can try to draw between min(prev,next) and max(prev,next) as workaround.

Also make all angles positive (adding 2*Pi to negative ones).

Looks like serious flaw of library though.

edited Mar 10 '20 at 07:34

answered Mar 10 '20 at 01:39

MBo

77,366
5
53
86

Yes, your first statement is right, and it's been a workaround for me, however I already tried min,max method but It didn't affect the output. – Meriç Kıranoğlu Mar 10 '20 at 07:01
Does exchange of all `anglePrev, angleNext` influence on output? – MBo Mar 10 '20 at 07:09
Have you tried to "cast" all angles into 0.2*Pi range (adding 2Pi to negative ones)? – MBo Mar 10 '20 at 07:11
exchange of angleprev and angleNext doesn't affect output either. I posted the workaround I found. 1. Make everything positive, 2. Make prevousAngle greater than nextAngle. – Meriç Kıranoğlu Mar 10 '20 at 07:26
OK, so I move assumption about range into answer. – MBo Mar 10 '20 at 07:35

score 0 · Answer 2 · answered Mar 10 '20 at 07:24

This is the workaround I found.

      if (anglePrev < 0.0)
      {
          anglePrev += Math.PI * 2.0;
      }
      if (angleNext < 0.0)
      {
          angleNext += Math.PI * 2.0;
      }
      if (angleNext > anglePrev)
      {
          anglePrev += Math.PI * 2.0;
      }

Arc sweep direction in two.js

2 Answers2