Arc segments API is difficult to understand to the point of being unusable #206

johansen · 2016-10-28T21:02:09Z

Try as I might, I can't comprehend how to use the arc segment drawing API. Consider the following demo:

<!DOCTYPE html>
<html>
<head>
    <title>Arc Segment Demo</title>
    <script src="./two.js"></script>

    <script>
        function ready(fn) {
            if (document.readyState != 'loading'){
                fn();
            } else {
                document.addEventListener('DOMContentLoaded', fn);
            }
        }

        ready(function(){
            var elem = document.getElementById('draw-shapes');
            var two = new Two({ width: 500, height: 500 }).appendTo(elem);

            var ir = 0;
            var or = 100;
            var sa = Math.PI;
            var ea = Math.PI;

            var arc;
            function updateArc() {
                if(arc) {
                    two.remove(arc);
                }

                arc = two.makeArcSegment(
                    250, 250,
                    ir, or,
                    sa, ea
                );
                arc.stroke = "#001f3f";
                arc.linewidth = 1.5;

                two.update();
            }

            updateArc();

            function pctToRads(pct) {
                var proportion = parseFloat(pct) / 100;
                return proportion * 2 * Math.PI;
            }

            document.querySelector("#startAngle").addEventListener("input", function(evt){
                sa = pctToRads(evt.target.value);
                console.log("startAngle: " + sa);
                updateArc();
            });
            document.querySelector("#endAngle").addEventListener("input", function(evt){
                ea = pctToRads(evt.target.value);
                console.log("endAngle: " + ea);
                updateArc();
            });
        });

    </script>
</head>
<body>
    <div id="draw-shapes"></div>
    <div id="controls">
        <input type="range" id="startAngle"/>
        <input type="range" id="endAngle"/>
    </div>
</body>
</html>

By adjusting the sliders, the start angle and end angle range between 0 and 2*PI. But the behavior of the arc segment that gets drawn is incomprehensible. The segment seems to rotate around the center in a way I can't account for, and thus the makeArcSegment function is useless to me.

What I would have expected is for the sa and ea parameters to be absolute. So if I give a starting angle of 50 degrees and an ending angle of 60 degrees, I would see an arc drawn between 50 and 60 degrees from some fixed axis. But this isn't what seems to happen.

I must be misunderstanding something, but at very least the documentation doesn't account sufficiently for the behavior of this function for me to be able to make use of it.

The text was updated successfully, but these errors were encountered:

jonobr1 · 2016-10-28T21:58:16Z

Thanks for raising this @johansen! This sounds like a bug in the library. I'll take a look at this over the weekend and get back to you with something that works in an absolute space. It should totally work how you're describing.

larrybotha · 2016-10-28T23:55:31Z

Take a look here: http://codepen.io/larrybotha/pen/amredV?editors=0010

I converted radians to degrees in the console to make it easier to understand what's going on.

If you set sa to 0deg, and shift ea, ea rotates anti-clockwise at the expected degree value.

What is interesting is if you then set the sa to 90deg and ea to 0deg, sa rotates clockwise, and ea is offset 90deg from sa clockwise. If you set ea to 90deg, it rotates anti-clockwise to a 0deg arc.

The following can be ascertained from the result:
arcAngle = 2 * PI - sa + ea

I'm not sure if this is the intended behaviour by @jonobr1, but that should give you a better idea of what's going on at least!

EDIT: updated function

jonobr1 · 2016-10-31T20:12:10Z

Hey @johansen,

I've updated Two.js' dev branch with a fix for this. It includes new properties on the Two.ArcSegment:

Two.ArcSegment.startAngle,
Two.ArcSegment.endAngle,
Two.ArcSegment.innerRadius
Two.ArcSegment.outerRadius

You can see an example of that here: http://codepen.io/jonobr1/full/VKovWP/

johansen · 2016-10-31T20:13:45Z

That looks perfect. Just the behavior I had been expecting.

dumptyd · 2018-01-25T12:59:40Z

Hi, this might be really easy but I can't figure out how to do this. I want to draw an arc using makeArcSegment anticlockwise, like HTML5 canvas's arc function. Is there a way to do this with two.js?

larrybotha · 2018-01-25T15:16:30Z

@dumptyd on the second input in the following demo set max=100 and min=-100 and give the input a bash - it draws the arc in both directions:

https://codepen.io/jonobr1/pen/VKovWP?editors=1010

jonobr1 · 2018-01-25T17:43:50Z

Following up on @larrybotha's answer, if you make the arc.endAngle less than the arc.startAngle then it should go in the opposite direction.

jonobr1 added the enhancement label Oct 28, 2016

jonobr1 added the bug label Oct 28, 2016

jonobr1 closed this as completed Oct 31, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Arc segments API is difficult to understand to the point of being unusable #206

Arc segments API is difficult to understand to the point of being unusable #206

johansen commented Oct 28, 2016

jonobr1 commented Oct 28, 2016

larrybotha commented Oct 28, 2016 •

edited

jonobr1 commented Oct 31, 2016

johansen commented Oct 31, 2016

dumptyd commented Jan 25, 2018

larrybotha commented Jan 25, 2018

jonobr1 commented Jan 25, 2018

Arc segments API is difficult to understand to the point of being unusable #206

Arc segments API is difficult to understand to the point of being unusable #206

Comments

johansen commented Oct 28, 2016

jonobr1 commented Oct 28, 2016

larrybotha commented Oct 28, 2016 • edited

jonobr1 commented Oct 31, 2016

johansen commented Oct 31, 2016

dumptyd commented Jan 25, 2018

larrybotha commented Jan 25, 2018

jonobr1 commented Jan 25, 2018

larrybotha commented Oct 28, 2016 •

edited